Bootstrap table 實現樹形表格，實現聯動選中，聯動取消

時間 2019-11-26

標籤 bootstrap table 實現表格聯動選中取消欄目 Bootstarp 简体版

原文原文鏈接

公司最近有需求要作樹形式table。由於是先後端不分離項目，且以前已經引入了bootstrap table插件，現把實現方式分享一下：javascript

<!DOCTYPE HTML>

<head>

</head>

<body>

<h1>樹形表格： Table Treegrid</h1>

<br/>

</div>

</body>

var $table = $('#table');

var data = [{0: undefined, id: 94710, pid: 0, mode: "系統管理", permissionTag: "*", permissionMark: "全部權限", }

,{0: undefined, id: 94711, pid: 94710, mode: "營銷中心管理", permissionTag: "*", permissionMark: "全部權限",}

,{0: undefined, id: 471104, pid: 94711, mode: "營銷中心管理", permissionTag: "search", permissionMark: "查詢",}

,{0: undefined, id: 94721, pid: 94710, mode: "工廠管理", permissionTag: "*", permissionMark: "全部權限", }

,{0: undefined, id: 472104, pid: 94721, mode: "工廠管理", permissionTag: "search", permissionMark: "查詢", }

,{0: undefined, id: 94731, pid: 94710, mode: "經銷商管理", permissionTag: "*", permissionMark: "全部權限", }

,{0: undefined, id: 473104, pid: 94731, mode: "經銷商管理", permissionTag: "search", permissionMark: "查詢", }

,{0: undefined, id: 94732, pid: 94710, mode: "產品管理", permissionTag: "*", permissionMark: "全部權限", }

,{0: undefined, id: 473201, pid: 94732, mode: "產品管理", permissionTag: "insert", permissionMark: "添加", }

,{0: undefined, id: 473202, pid: 94732, mode: "產品管理", permissionTag: "update", permissionMark: "修改", }

, {0: undefined, id: 473203, pid: 94732, mode: "產品管理", permissionTag: "delete", permissionMark: "刪除", }

, {0: undefined, id: 473204, pid: 94732, mode: "產品管理", permissionTag: "search", permissionMark: "查詢", }

, {0: undefined, id: 94741, pid: 94710, mode: "用戶帳號", permissionTag: "*", permissionMark: "全部權限", }

, {0: undefined, id: 474101, pid: 94741, mode: "用戶帳號", permissionTag: "insert", permissionMark: "添加", }

, {0: undefined, id: 474102, pid: 94741, mode: "用戶帳號", permissionTag: "update", permissionMark: "修改", }

, {0: undefined, id: 474103, pid: 94741, mode: "用戶帳號", permissionTag: "delete", permissionMark: "刪除", }

, {0: undefined, id: 474104, pid: 94741, mode: "用戶帳號", permissionTag: "search", permissionMark: "查詢", }

, {0: undefined, id: 474105, pid: 94741, mode: "用戶帳號", permissionTag: "resetPwd", permissionMark: "重置密碼", }

, {0: undefined, id: 94742, pid: 94710, mode: "角色權限管理", permissionTag: "*", permissionMark: "全部權限", }

, {0: undefined, id: 474201, pid: 94742, mode: "角色權限管理", permissionTag: "insert", permissionMark: "添加", }

, {0: undefined, id: 474202, pid: 94742, mode: "角色權限管理", permissionTag: "update", permissionMark: "修改", }

, {0: undefined, id: 474203, pid: 94742, mode: "角色權限管理", permissionTag: "delete", permissionMark: "刪除", }

, {0: undefined, id: 474204, pid: 94742, mode: "角色權限管理", permissionTag: "search", permissionMark: "查詢", }

, {0: undefined, id: 94760, pid: 0, mode: "運營中心", permissionTag: "*", permissionMark: "全部權限", }

, {0: undefined, id: 94770, pid: 94760, mode: "跨區域調撥單", permissionTag: "*", permissionMark: "全部權限", }

, {0: undefined, id: 476104, pid: 94770, mode: "跨區域調撥單", permissionTag: "search", permissionMark: "查詢", }

, {0: undefined, id: 476105, pid: 94770, mode: "跨區域調撥單", permissionTag: "download", permissionMark: "下載", }]

$(function() {

//控制檯輸出一下數據

console.log(data);

$table.bootstrapTable({

data:data,

idField: 'id',

dataType:'jsonp',

columns: [

{ field: 'check', checkbox: true, formatter: function (value, row, index) {

if (row.check == true) {

// console.log(row.serverName);

//設置選中

return { checked: true };

}

{ field: 'mode', title: '名稱' },

{ field: 'permissionTag', title: '狀態', },

{ field: 'permissionMark', title: '權限值' },

// bootstrap-table-treegrid.js 插件配置 -- start

//在哪一列展開樹形

treeShowField: 'mode',

//指定父id列

parentIdField: 'pid',

onResetView: function(data) {

//console.log('load');

$table.treegrid({

// initialState: 'collapsed',// 全部節點都摺疊

initialState: 'expanded',// 全部節點都展開，默認展開

treeColumn: 1,

// expanderExpandedClass: 'glyphicon glyphicon-minus', //圖標樣式

// expanderCollapsedClass: 'glyphicon glyphicon-plus',

onChange: function() {

$table.bootstrapTable('resetWidth');

}

});

//只展開樹形的第一級節點

$table.treegrid('getRootNodes').treegrid('expand');

onCheck:function(row){

event.preventDefault()

var datas = $table.bootstrapTable('getData');

console.log(datas)

row.check = true

// 勾選子類

selectChilds(datas,row,"id","pid",true);

// 勾選父類

selectParentChecked(datas,row,"id","pid")

// 刷新數據

$table.bootstrapTable('load', datas);

onUncheck:function(row){

event.preventDefault()

row.check = false

var datas = $table.bootstrapTable('getData');

selectChilds(datas,row,"id","pid",false);

//取消選中最後一個子元素時時查找對應父元素取消

selectParentUnchecked(datas,row,"id","pid")

$table.bootstrapTable('load', datas);

// bootstrap-table-treetreegrid.js 插件配置 -- end

});

</script>

/**

* 選中父項時，同時選中子項

* @param datas 全部的數據

* @param row 當前數據

* @param id id 字段名

* @param pid 父id字段名

function selectChilds(datas,row,id,pid,checked) {

console.log("zi",datas,'row',row,'check',checked)

for(var i in datas){

if(datas[i][pid] == row[id]){

datas[i].check=checked;

selectChilds(datas,datas[i],id,pid,checked);

};

}

function selectParentUnchecked(datas,row,id,pid){

console.log("fu--Uncheck",datas,'row',row,)

let key = 0;

for(var i in datas){

if(datas[i].pid == row.pid && datas[i].check == true){

key++

}

console.log(key)

if(key == 0 ){

for(var i in datas){

if(datas[i][id] == row[pid]){

datas[i].check=false;

selectParentUnchecked(datas,datas[i],id,pid);

}

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 test() {

var selRows = $table.bootstrapTable("getSelections");

if(selRows.length == 0){

alert("請至少選擇一行");

return;

}

var postData = "";

$.each(selRows,function(i) {

postData += this.id;

if (i < selRows.length - 1) {

postData += "， ";

}

});

alert("你選中行的 id 爲："+postData);

}

</script>

</html>

實現的效果圖爲：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。