一、效果图
二、代码
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4>TreeGrid使用</h4>
</div>
<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>
<!--以下是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 = '<label class="lyear-switch switch-primary lyear-status"><input type="checkbox" '+ is_checked +'><span onClick="updateStatus('+ row.id +', '+ value +')"></span></label>';
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',
onChange: function() {
$treeTable.bootstrapTable('resetWidth');
}
});
// 只展开树形的第一集节点
$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('updateCellById', {id: id, field: 'status', value: newstate});
} else {
alert(data.msg);
$treeTable.bootstrapTable('updateCellById', {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>
