Skip to content

Commit

Permalink
整合jquery.treegrid插件到bootstrap-table
Browse files Browse the repository at this point in the history
  • Loading branch information
foreveryang321 committed Jan 2, 2018
1 parent 00b3ca4 commit 570aec2
Show file tree
Hide file tree
Showing 3 changed files with 267 additions and 0 deletions.
95 changes: 95 additions & 0 deletions dist/extensions/treegrid/bootstrap-table-treegrid.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/**
* @author: YL
* @version: v1.0.0
*/
!function ($) {
'use strict';
$.extend($.fn.bootstrapTable.defaults, {
treeShowField: null,
idField: 'id',
parentIdField: 'pid',
onGetNodes: function (row, data) {
var that = this;
var nodes = [];
$.each(data, function (i, item) {
if (row[that.options.idField] === item[that.options.parentIdField]) {
nodes.push(item);
}
});
return nodes;
},
onCheckRoot: function (row, data) {
var that = this;
return !row[that.options.parentIdField];
}
});

var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initRow = BootstrapTable.prototype.initRow,
_initHeader = BootstrapTable.prototype.initHeader;

// td
BootstrapTable.prototype.initHeader = function () {
var that = this;
_initHeader.apply(that, Array.prototype.slice.apply(arguments));
var treeShowField = that.options.treeShowField;
if (treeShowField) {
$.each(this.header.fields, function (i, field) {
if (treeShowField === field) {
that.treeEnable = true;
return false;
}
});
}
};

var initTr = function (item, idx, data, parentDom) {
var that = this;
var nodes = that.options.onGetNodes.apply(that, [item, data]);
item._nodes = nodes;
parentDom.append(_initRow.apply(that, [item, idx, data, parentDom]));

// init sub node
var len = nodes.length - 1;
for (var i = 0; i <= len; i++) {
var node = nodes[i];
node._level = item._level + 1;
node._parent = item;
if (i === len)
node._last = 1;
// jquery.treegrid.js
that.options.rowStyle = function (item, idx) {
var id = item[that.options.idField] ? item[that.options.idField] : 0;
var pid = item[that.options.parentIdField] ? item[that.options.parentIdField] : 0;
return {
classes: 'treegrid-' + id + ' treegrid-parent-' + pid
};
};
initTr.apply(that, [node, $.inArray(node, data), data, parentDom]);
}
};

// tr
BootstrapTable.prototype.initRow = function (item, idx, data, parentDom) {
var that = this;
if (that.treeEnable) {
// init root node
if (that.options.onCheckRoot.apply(that, [item, data])) {
if (item._level === undefined) {
item._level = 0;
}
// jquery.treegrid.js
that.options.rowStyle = function (item, idx) {
var x = item[that.options.idField] ? item[that.options.idField] : 0;
return {
classes: 'treegrid-' + x
};
};
initTr.apply(that, [item, idx, data, parentDom]);
return true;
}
return false;
}
return _initRow.apply(that, Array.prototype.slice.apply(arguments));
};
}(jQuery);
68 changes: 68 additions & 0 deletions dist/extensions/treegrid/data.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
{
"rows": [
{
"id": 1,
"pid": 0,
"status": 1,
"name": "系统管理",
"permissionValue": "open:system:get"
},
{
"id": 2,
"pid": 0,
"status": 1,
"name": "字典管理",
"permissionValue": "open:dict:get"
},
{
"id": 20,
"pid": 1,
"status": 1,
"name": "新增系统",
"permissionValue": "open:system:add"
},
{
"id": 21,
"pid": 1,
"status": 1,
"name": "编辑系统",
"permissionValue": "open:system:edit"
},
{
"id": 22,
"pid": 1,
"status": 1,
"name": "删除系统",
"permissionValue": "open:system:delete"
},
{
"id": 33,
"pid": 2,
"status": 1,
"name": "系统环境",
"permissionValue": "open:env:get"
},
{
"id": 333,
"pid": 33,
"status": 1,
"name": "新增环境",
"permissionValue": "open:env:add"
},
{
"id": 3333,
"pid": 33,
"status": 1,
"name": "编辑环境",
"permissionValue": "open:env:edit"
},
{
"id": 233332,
"pid": 33,
"status": 0,
"name": "删除环境",
"permissionValue": "open:env:delete"
}
],
"total": 9
}
104 changes: 104 additions & 0 deletions dist/extensions/treegrid/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>系统管理</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="../../bootstrap-table.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" rel="stylesheet">
</head>
<body>
<table id="table"></table>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../../bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<script src="./bootstrap-table-treegrid.js"></script>
<script type="text/javascript">
var $table = $('#table');
$(function () {
$table.bootstrapTable({
url: 'data.json',
height: $(window).height(),
striped: true,
showRefresh: true,
showColumns: true,
sidePagination: 'server',
// detailView: true,
// detailFormatter: 'detailFormatter',
silentSort: false,
escape: true,
search: true,
searchOnEnterKey: true,
idField: 'id',
maintainSelected: true,
toolbar: '#toolbar',
responseHandler: function (res){
console.log(res);
return res;
},
columns: [
{field: 'ck', checkbox: true},
{field: 'name', title: '名称'},
// {field: 'id', title: '编号', sortable: true, align: 'center'},
// {field: 'pid', title: '所属上级'},
{field: 'status', title: '状态', sortable: true, align: 'center', formatter: 'statusFormatter'},
{field: 'permissionValue', title: '权限值'}
],
// bootstrap-table-tree-column.js 插件配置
// treeShowField: 'name',
// parentIdField: 'pid'
// bootstrap-table-tree-column.js 插件配置

// bootstrap-table-treegrid.js 插件配置
treeShowField: 'name',
parentIdField: 'pid',
onLoadSuccess: function (data) {
console.log('load');
// jquery.treegrid.js
$table.treegrid({
// initialState: 'collapsed',
treeColumn: 1,
// expanderExpandedClass: 'glyphicon glyphicon-minus',
// expanderCollapsedClass: 'glyphicon glyphicon-plus',
onChange: function () {
$table.bootstrapTable('resetWidth');
}
});
}
// bootstrap-table-treetreegrid.js 插件配置
});
});


// 格式化类型
function typeFormatter(value, row, index) {
if (value === 'menu') {
return '菜单';
}
if (value === 'button') {
return '按钮';
}
if (value === 'api') {
return '接口';
}
return '-';
}

// 格式化状态
function statusFormatter(value, row, index) {
if (value === 1) {
return '<span class="label label-success">正常</span>';
} else {
return '<span class="label label-default">锁定</span>';
}
}
</script>
</html>

0 comments on commit 570aec2

Please sign in to comment.