|
| 1 | +<!DOCTYPE HTML> |
| 2 | +<html lang="zh-cn"> |
| 3 | + |
| 4 | +<head> |
| 5 | + <meta charset="utf-8" /> |
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| 7 | + <meta content="width=device-width,initial-scale=1.0" name="viewport"> |
| 8 | + <meta content="yes" name="apple-mobile-web-app-capable"> |
| 9 | + <meta content="black" name="apple-mobile-web-app-status-bar-style"> |
| 10 | + <meta content="telephone=no" name="format-detection"> |
| 11 | + <meta content="email=no" name="format-detection"> |
| 12 | + <title>系统管理</title> |
| 13 | + <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css"> |
| 14 | + <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css"> |
| 15 | + <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css"> |
| 16 | +</head> |
| 17 | + |
| 18 | +<body> |
| 19 | + <div class="container"> |
| 20 | + <h1>Table Treegrid</h1> |
| 21 | + <table id="table"></table> |
| 22 | + </div> |
| 23 | +</body> |
| 24 | +<script src="../assets/jquery.min.js"></script> |
| 25 | +<script src="../assets/bootstrap/js/bootstrap.min.js"></script> |
| 26 | +<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script> |
| 27 | +<script src="../assets/bootstrap-table/src/extensions/treegrid/bootstrap-table-treegrid.js"></script> |
| 28 | +<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script> |
| 29 | +<script type="text/javascript"> |
| 30 | + var $table = $('#table'); |
| 31 | + $(function() { |
| 32 | + $table.bootstrapTable({ |
| 33 | + url: '../json/treegrid.json', |
| 34 | + height: $(window).height(), |
| 35 | + striped: true, |
| 36 | + sidePagination: 'server', |
| 37 | + idField: 'id', |
| 38 | + columns: [ |
| 39 | + { |
| 40 | + field: 'ck', |
| 41 | + checkbox: true |
| 42 | + }, |
| 43 | + { |
| 44 | + field: 'name', |
| 45 | + title: '名称' |
| 46 | + }, |
| 47 | + // {field: 'id', title: '编号', sortable: true, align: 'center'}, |
| 48 | + // {field: 'pid', title: '所属上级'}, |
| 49 | + { |
| 50 | + field: 'status', |
| 51 | + title: '状态', |
| 52 | + sortable: true, |
| 53 | + align: 'center', |
| 54 | + formatter: 'statusFormatter' |
| 55 | + }, |
| 56 | + { |
| 57 | + field: 'permissionValue', |
| 58 | + title: '权限值' |
| 59 | + } |
| 60 | + ], |
| 61 | + // bootstrap-table-tree-column.js 插件配置 |
| 62 | + // treeShowField: 'name', |
| 63 | + // parentIdField: 'pid' |
| 64 | + // bootstrap-table-tree-column.js 插件配置 |
| 65 | + |
| 66 | + // bootstrap-table-treegrid.js 插件配置 |
| 67 | + treeShowField: 'name', |
| 68 | + parentIdField: 'pid', |
| 69 | + onLoadSuccess: function(data) { |
| 70 | + console.log('load'); |
| 71 | + // jquery.treegrid.js |
| 72 | + $table.treegrid({ |
| 73 | + // initialState: 'collapsed', |
| 74 | + treeColumn: 1, |
| 75 | + // expanderExpandedClass: 'glyphicon glyphicon-minus', |
| 76 | + // expanderCollapsedClass: 'glyphicon glyphicon-plus', |
| 77 | + onChange: function() { |
| 78 | + $table.bootstrapTable('resetWidth'); |
| 79 | + } |
| 80 | + }); |
| 81 | + } |
| 82 | + // bootstrap-table-treetreegrid.js 插件配置 |
| 83 | + }); |
| 84 | + }); |
| 85 | + |
| 86 | + |
| 87 | + // 格式化类型 |
| 88 | + function typeFormatter(value, row, index) { |
| 89 | + if (value === 'menu') { |
| 90 | + return '菜单'; |
| 91 | + } |
| 92 | + if (value === 'button') { |
| 93 | + return '按钮'; |
| 94 | + } |
| 95 | + if (value === 'api') { |
| 96 | + return '接口'; |
| 97 | + } |
| 98 | + return '-'; |
| 99 | + } |
| 100 | + |
| 101 | + // 格式化状态 |
| 102 | + function statusFormatter(value, row, index) { |
| 103 | + if (value === 1) { |
| 104 | + return '<span class="label label-success">正常</span>'; |
| 105 | + } else { |
| 106 | + return '<span class="label label-default">锁定</span>'; |
| 107 | + } |
| 108 | + } |
| 109 | +</script> |
| 110 | + |
| 111 | +</html> |
0 commit comments