add treegrid demo

wenzhixin · Jan 3, 2018 · dabd2bb · dabd2bb
1 parent cf821e8
commit dabd2bb
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 0 deletions.
diff --git a/extensions/treegrid.html b/extensions/treegrid.html
@@ -0,0 +1,93 @@
+<!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 rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
+    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
+</head>
+<body>
+	<div class="container">
+        <h1>Table Treegrid</h1>
+		<table id="table"></table>
+	</div>
+</body>
+<script src="../assets/jquery.min.js"></script>
+<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
+<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
+<script src="../assets/bootstrap-table/src/extensions/treegrid/bootstrap-table-treegrid.js"></script>
+<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
+<script type="text/javascript">
+    var $table = $('#table');
+    $(function () {
+        $table.bootstrapTable({
+			url: '../json/treegrid.json',
+            height: $(window).height(),
+            striped: true,
+            sidePagination: 'server',
+            idField: 'id',
+            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>
diff --git a/json/treegrid.json b/json/treegrid.json
@@ -0,0 +1,65 @@
+[
+    {
+      "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"
+    }
+]