master

分支 (3)

管理

管理

master

style

feature/非圆角青绿配色

Light-Year-Admin-Using-Iframe-v4
/
lyear_pages_data_table.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>表格插件 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">表格插件</div></header>
        <div class="card-body">

          <p>插件使用用bootstrap-table 1.16.0，文档地址：<a href="https://www.bootstrap-table.com.cn" target="_blank">https://www.bootstrap-table.com.cn</a>，github地址：<a href="https://github.com/wenzhixin/bootstrap-table" target="_blank">https://github.com/wenzhixin/bootstrap-table</a>。</p>
          <div class="callout callout-danger">
            因x-editable不支持bootstrap v4版本，这里暂时放弃x-editable进行行内编辑。导出需要配合bootstrap-table-export.min.js、TableExport。
          </div>
          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_add" type="button" class="btn btn-primary m-r-5">
              <span class="mdi mdi-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-success m-r-5">
              <span class="mdi mdi-check" aria-hidden="true"></span>启用
            </button>
            <button id="btn_edit" type="button" class="btn btn-warning m-r-5">
              <span class="mdi mdi-block-helper" aria-hidden="true"></span>禁用
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
            </button>
          </div>
          <table id="tb_departments"></table>
          <div class="callout callout-danger mb-3">
            当你使用bootstrap-table时，如果你的列表需要用到复选框，请确保复选框的字段名称在当前页面是唯一的。
            因为插件的复选框已做修改成自定义的，需要 <code>input</code> 的 <code>id</code> 属性配合实现。
          </div>
          <pre>{
   field: 'example', // 设置的该字段名称，需保证页面唯一
   checkbox: true    // 是否显示复选框
}</pre>

        </div>
      </div>
    </div>

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">TreeGrid使用</div></header>
        <div class="card-body">

          <div id="toolbar2" class="toolbar-btn-action">
            <button type="button" class="btn btn-primary m-r-5" onclick="test()">返回选中行</button>
          </div>

          <table class="tree-table"></table>
        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
/**
 * 合并单元格
 * @param data 原始数据（在服务端完成排序）
 * @param fieldName 合并属性名称
 * @param colspan 合并列
 * @param target 目标表格对象
 */
function mergeCells(data, fieldName, colspan, target) {
	// 声明一个map计算相同属性值在data对象出现的次数和
	var sortMap = {};
	for (var i = 0; i < data.length; i++) {
		for (var prop in data[i]) {
			if (prop == fieldName) {
				var key = data[i][prop]
				if (sortMap.hasOwnProperty(key)) {
					sortMap[key] = sortMap[key] * 1 + 1;
				} else {
					sortMap[key] = 1;
				}
				break;
			}
		}
	}
	var index = 0;
	for (var prop in sortMap) {
		var count = sortMap[prop] * 1;
		$(target).bootstrapTable('mergeCells', {
			index: index,
			field: fieldName,
			colspan: colspan,
			rowspan: count
		});
		index += count;
	}
}

$('#tb_departments').bootstrapTable({
	classes: 'table table-bordered table-hover table-striped',
	url: 'http://www.bixiaguangnian.com/index/test/getExampleJson',
	method: 'get',
	dataType: 'jsonp', // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
	uniqueId: 'id',
	idField: 'id', // 每行的唯一标识字段
	toolbar: '#toolbar', // 工具按钮容器
	//clickToSelect: true,     // 是否启用点击选中行
	showColumns: true, // 是否显示所有的列
	showRefresh: true, // 是否显示刷新按钮
	showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
	pagination: true, // 是否显示分页
	sortOrder: "asc", // 排序方式

	// 传递参数
	queryParams: function(params) {
		return {
			limit: params.limit, // 每页数据量
			offset: params.offset, // sql语句起始索引
			page: (params.offset / params.limit) + 1,
			sort: params.sort, // 排序的列名
			sortOrder: params.order // 排序方式'asc' 'desc'
		};
	},
	sidePagination: "server", // 分页方式：client客户端分页，server服务端分页
	pageNumber: 1, // 初始化加载第一页，默认第一页
	pageSize: 10, // 每页的记录行数
	pageList: [10, 25, 50, 100], // 可供选择的每页的行数
	//search: true,                      // 是否显示表格搜索，此搜索是客户端搜索

	//showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
	//exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

	columns: [{
		field: 'example',
		checkbox: true // 是否显示复选框
	}, {
		field: 'id',
		title: 'ID',
		// 居中显示
		align: 'center',
		// 是否排序
		sortable: true
	}, {
		field: 'author',
		align: 'center',
		title: '作者'
	}, {
		field: 'dynasty',
		align: 'center',
		title: '朝代',
	}, {
		field: 'nationality',
		// 是否可视(默认true)
		visible: false,
		align: 'center',
		title: '国籍'
	}, {
		field: 'opus',
		align: 'center',
		title: '作品'
	}, {
		field: 'category',
		align: 'center',
		title: '分类'
	}, {
		field: 'status',
		align: 'center',
		title: '状态',
		formatter: function(value, row, index) {
			var value = "";
			if (row.status == '0') {
				value = '<span class="badge badge-danger">禁用</span>';
			} else if (row.status == '1') {
				value = '<span class="badge badge-success">正常</span>';
			} else {
				value = row.pType;
			}
			return value;
		}
	}, {
		field: 'operate',
		align: 'center',
		title: '操作',
		formatter: btnGroup, // 自定义方法
		events: {
			'click .edit-btn': function(event, value, row, index) {
				editUser(row);
			},
			'click .del-btn': function(event, value, row, index) {
				delUser(row);
			}
		}
	}],
	onColumnSwitch: function() {
		// 合并相同列(在切换可视列是也需要执行一次，否则会失效)
		var data = $('#tb_departments').bootstrapTable('getData', true);
		mergeCells(data, "nationality", 1, $('#tb_departments'));
		mergeCells(data, "category", 1, $('#tb_departments'));
	},
	onLoadSuccess: function(data) {
		$("[data-toggle='tooltip']").tooltip();
		// 合并相同列
		var data = $('#tb_departments').bootstrapTable('getData', true);
		mergeCells(data, "nationality", 1, $('#tb_departments'));
		mergeCells(data, "category", 1, $('#tb_departments'));
	}
});

// 操作按钮
function btnGroup() {
	let html =
		'<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
		'<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
	return html;
}

// 操作方法 - 编辑
function editUser() {
	alert('跳转修改信息');
}
// 操作方法 - 删除
function delUser() {
	alert('信息删除成功');
}
</script>
<!--以下是tree-grid的使用示例-->
<link href="js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
<script type="text/javascript">
// tree-grid使用
var data = JSON.parse(
	'[{"id":1, "pid":0, "status":1, "name":"用户管理", "permissionValue":"open:user:manage"},' +
	'{"id":2, "pid":0, "status":1, "name":"系统管理", "permissionValue":"open:system:manage"},' +
	'{"id":3, "pid":1, "status":1, "name":"新增用户", "permissionValue":"open:user:add"},' +
	'{"id":4, "pid":1, "status":1, "name":"修改用户", "permissionValue":"open:user:edit"},' +
	'{"id":5, "pid":1, "status":0, "name":"删除用户", "permissionValue":"open:user:del"},' +
	'{"id":6, "pid":2, "status":1, "name":"系统配置管理", "permissionValue":"open:systemconfig:manage"},' +
	'{"id":7, "pid":6, "status":1, "name":"新增配置", "permissionValue":"open:systemconfig:add"},' +
	'{"id":8, "pid":6, "status":1, "name":"修改配置", "permissionValue":"open:systemconfig:edit"},' +
	'{"id":9, "pid":6, "status":0, "name":"删除配置", "permissionValue":"open:systemconfig:del"},' +
	'{"id":10, "pid":2,"status":1, "name":"系统日志管理", "permissionValue":"open:log:manage"},' +
	'{"id":11, "pid":10,"status":1, "name":"新增日志", "permissionValue":"open:log:add"},' +
	'{"id":12, "pid":10,"status":1, "name":"修改日志", "permissionValue":"open:log:edit"},' +
	'{"id":13, "pid":10,"status":0, "name":"删除日志", "permissionValue":"open:log:del"}]');

var $treeTable = $('.tree-table');
$treeTable.bootstrapTable({
	data: data,
	idField: 'id',
	uniqueId: 'id',
	dataType: 'jsonp',
	toolbar: '#toolbar2',
	columns: [
        {
			field: 'check',
			checkbox: true
		},
		{
			field: 'name',
			title: '名称'
		},
		{
			field: 'status',
			title: '状态',
			sortable: true,
			/*
			 * 可以选择采用开关来处理状态显示
			 * 或者采用上个示例的处理方式
			 */
			formatter: function(value, row, index) {
				if (value == 0) {
					is_checked = '';
				} else if (value == 1) {
					is_checked = 'checked="checked"';
				}
				result = '<div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="customSwitch' + row.id + '" ' + is_checked + '><label class="custom-control-label" for="customSwitch' + row.id + '" onClick="updateStatus(' + row.id + ', ' + value + ')"></label></div>';

				return result;
			},
		},
		{
			field: 'permissionValue',
			title: '权限值'
		},
		{
			field: 'operate',
			title: '操作',
			align: 'center',
			events: {
				'click .role-add': function(e, value, row, index) {
					add(row.id);
				},
				'click .role-delete': function(e, value, row, index) {
					del(row.id);
				},
				'click .role-edit': function(e, value, row, index) {
					update(row.id);
				}
			},
			formatter: operateFormatter
		}
	],

	treeShowField: 'name',
	parentIdField: 'pid',

	onResetView: function(data) {
		$treeTable.treegrid({
			initialState: 'collapsed', // 所有节点都折叠
			treeColumn: 1,
			//expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
			//expanderCollapsedClass: 'mdi mdi-folder',
		});

		// 只展开树形的第一集节点
		$treeTable.treegrid('getRootNodes').treegrid('expand');
	},
	onCheck: function(row) {
		var datas = $treeTable.bootstrapTable('getData');

		selectChilds(datas, row, 'id', 'pid', true); // 选择子类

		selectParentChecked(datas, row, 'id', 'pid'); // 选择父类

		$treeTable.bootstrapTable('load', datas);
	},

	onUncheck: function(row) {
		var datas = $treeTable.bootstrapTable('getData');
		selectChilds(datas, row, 'id', 'pid', false);
		$treeTable.bootstrapTable('load', datas);
	},
});

// 操作按钮
function operateFormatter(value, row, index) {
	return [
		'<a type="button" class="role-add btn btn-xs btn-default m-r-5" title="编辑" data-toggle="tooltip"><i class="mdi mdi-plus"></i></a>',
		'<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>',
		'<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i></a>'
	].join('');
}

/**
 * 选中父项时，同时选中子项
 * @param datas 所有的数据
 * @param row 当前数据
 * @param id id 字段名
 * @param pid 父id字段名
 */
function selectChilds(datas, row, id, pid, checked) {
	for (var i in datas) {
		if (datas[i][pid] == row[id]) {
			datas[i].check = checked;
			selectChilds(datas, datas[i], id, pid, checked);
		};
	}
}

function selectParentChecked(datas, row, id, pid) {
	for (var i in datas) {
		if (datas[i][id] == row[pid]) {
			datas[i].check = true;
			selectParentChecked(datas, datas[i], id, pid);
		};
	}
}

function add(id) {
	alert("add 方法 , id = " + id);
}

function del(id) {
	alert("del 方法 , id = " + id);
}

function update(id) {
	alert("update 方法 , id = " + id);
}

function updateStatus(id, state) {
	var newstate = (state == 1) ? 0 : 1; // 发送参数值跟当前参数值相反
	$.ajax({
		type: "get",
		url: "http://www.bixiaguangnian.com/index/test/testGridJson",
		data: {id: id, state: newstate},
		dataType: 'jsonp',
		success: function(data, status) {
			if (data.code == '200') {
				$treeTable.bootstrapTable('updateCellByUniqueId', {id: id, field: 'status', value: newstate});
			} else {
				alert(data.msg);
				$treeTable.bootstrapTable('updateCellByUniqueId', {id: id, field: 'status', value: state}); // 因开关点击后样式是变的，失败也重置下
			}
		},
		error: function() {
			alert('修改失败，请稍后再试');
		}
	});
}

function test() {
	var selRows = $treeTable.bootstrapTable("getSelections");
	if (selRows.length == 0) {
		alert("请至少选择一行");
		return;
	}
	console.log(selRows);

	var postData = "";
	$.each(selRows, function(i) {
		postData += this.id;
		if (i < selRows.length - 1) {
			postData += "， ";
		}
	});
	alert("你选中行的 id 为：" + postData);
}
</script>
</body>
</html>