整合jquery.treegrid插件到bootstrap-table

dist/extensions/treegrid/bootstrap-table-treegrid.js

@@ -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);

dist/extensions/treegrid/data.json

@@ -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
+}

dist/extensions/treegrid/index.html

@@ -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>