JQuery-Jquery的TreeGrid插件 · PHP笔记

[TOC] ## **一、jquery-treegrid参数** | 参数| 参数类型| 默认值e | 描述| | --- | --- | --- | --- | | treeColumn | Numeric | 0 | 用于树的列数 | | initialState | String | expanded | 树的初始状态 <br>'expanded' - 将展开所有节点 <br>'collapsed' - 将折叠所有节点 | | saveState | Boolean | false | 如果为true，则可以重新加载页面并保存树状态 | | saveStateMethod | String | cookie | 'cookie' - 将状态保存到cookie <br>'hash' - 状态保存到hash | | saveStateName | String | tree-grid-state | 要保存状态的cookie或哈希的名称. | | expanderTemplate | String | \<span class="treegrid-expander"\>\</span\> | 当你点击此处设置的HTML 元素的时候，它会折叠/展开分支 | | expanderExpandedClass | String | treegrid-expander-expanded | 用于展开元素的类 | | expanderCollapsedClass | String | treegrid-expander-collapsed | 用于折叠元素的类 | | indentTemplate | String | \<span class="treegrid-indent"\>\</span\> | 根据嵌套节点的深度，将放置为填充的HTML元素（即子节点的留白） | | onCollapse | Function | null | 函数，当一个节点折叠时将执行 | | onExpand | Function | null | 函数，将展开一个节点时将执行 | | onChange | Function | null | 函数，当节点之一扩展或折叠时将执行 | ## **二、jquery-treegrid公共方法** getRootNodes 返回根分支 ``` // Expand all root nodes $('.tree').treegrid('getRootNodes').treegrid('expand'); ``` ![](https://img.kancloud.cn/98/a0/98a0a90e4314b54951145ac525defe02_855x249.png) getNodeId 返回节点id ``` if($(.treegrid-6').treegrid('getNodeId')===6){ // Do something with node 6 }; ``` getParentNodeId 返回父节点的id，如果node是root则返回null ~~~ if($('#node-2').treegrid('getParentNodeId')===2){ // Do something if parent node Id is 2 }; getAllNodes Return the all nodes of tree // Find all nodes $('#tree-1').treegrid('getAllNodes').each(function() { if ($(this).treegrid("isLast")) { //Do something with all last nodes } }); ~~~ getParentNode 返回父节点，如果node是root则返回null ~~~ // Expand parent node $('#node-2').treegrid('getParentNode').treegrid('collapse'); ~~~ getChildNodes 返回子节点，如果node是叶节点则返回null ~~~ // Expand child nodes $('#node-2').treegrid('getChildNodes').treegrid('expand'); ~~~ getDepth 返回嵌套分支的深度 ~~~ // Expand all nodes 2nd nesting $('.tree').find('tr').each(function(){ if ($(this).treegrid('getDepth')<2){ $(this).treegrid('expand'); } }); ~~~ isNode 如果element是node则返回true ~~~ $('#tree-1').find('tr').each(function() { if ($(this).treegrid("isNode")) { //Do something } }); ~~~ isLeaf 是否右节点分支？ ~~~ // hide all files $('.tree').find('tr').each(function(){ if ($(this).treegrid('isLeaf')){ $(this).hide(); } }); ~~~ isLast 如果node位于分支的最后一个，则返回true ~~~ // hide all last elements $('.tree').find('tr').each(function(){ if ($(this).treegrid('isLast')){ $(this).hide(); } }); ~~~ isFirst 如果node在分支中是第一个，则返回true ~~~ // hide all last elements $('.tree').find('tr').each(function(){ if ($(this).treegrid('isFirst')){ $(this).hide(); } }); ~~~ isExpanded 节点是否展开 ~~~ if($('#node-2').treegrid('isExpanded')){ // Do something if node expanded }; ~~~ isCollapsed 节点是否折叠 ~~~ if($('#node-2').treegrid('isCollapsed')){ // Do something if node collapsed }; ~~~ isOneOfParentsCollapsed 至少有一个父节点被折叠 ~~~ if($('#node-2').treegrid('isOneOfParentCollapsed')){ // Do something if one of parent collapsed }; ~~~ expand 展开节点 ~~~ $('#node-2').treegrid('expand'); ~~~ collapse 折叠节点 ~~~ $('#node-2').treegrid('collapse'); ~~~ expandRecursive 递归展开节点 ~~~ $('#node-2').treegrid('expandRecursive'); ~~~ collapseRecursive 递归折叠节点 ~~~ $('#node-2').treegrid('collapseRecursive'); ~~~ expandAll 展开所有节点 ~~~ $('#tree').treegrid('expandAll'); ~~~ collapseAll 折叠所有节点 ~~~ $('#tree').treegrid('collapseAll'); ~~~ toggle 如果节点展开则折叠，当节点展开时折叠 ~~~ $('#node-2').treegrid('toggle'); ~~~ render 重新绘制节点及其所有子节点 ~~~ $('#node-2').treegrid('render'); ~~~ ## **三、jquery-treegrid事件** collapse 节点折叠时触发 ~~~ //Alert when node in treegrid with class "tree" collapsed $('.tree').treegrid('getRootNodes').on('collapse', function(){ alert(this); }); ~~~ expand 节点展开时触发 ~~~ //Alert when node with id "node1" expanded $('#node1').on('expand', function(){ alert(this); }); ~~~ change 节点折叠或展开时触发 ~~~ //Alert when node in treegrid with class "tree" changed. $('.tree').treegrid('getRootNodes').on('change', function(){ alert(this); }); ~~~ ## **四、示例** ### **基础示例** ``` <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <title>Jquery-treegrid basic example</title> <link rel="stylesheet" href="../css/jquery.treegrid.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.treegrid.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.tree').treegrid(); }); </script> </head> <body> <table class="tree"> <tr class="treegrid-1"> <td>Root node</td><td>Additional info</td> </tr> <tr class="treegrid-2 treegrid-parent-1"> <td>Node 1-1</td><td>Additional info</td> </tr> <tr class="treegrid-3 treegrid-parent-1"> <td>Node 1-2</td><td>Additional info</td> </tr> <tr class="treegrid-4 treegrid-parent-3"> <td>Node 1-2-1</td><td>Additional info</td> </tr> </table> </body> </html> ``` ![](https://img.kancloud.cn/c3/8d/c38db24f3c1424af1bc0d15dc2abf27e_1324x201.png) ### **示例2，从第二列开始** ![](https://img.kancloud.cn/07/68/0768aef94259aab6fdf7cc04f714a86a_492x126.png) ``` <script type="text/javascript"> $(document).ready(function() { $('.tree').treegrid({ treeColumn: 1 }); }); </script> ``` ![](https://img.kancloud.cn/fa/1e/fa1e75428d4798c91d828dc48f552452_915x199.png) ### **保存节点状态** ``` $(document).ready(function() { $('.tree').treegrid({ treeColumn: 1, // 'initialState': 'collapsed', 'saveState': true,//需要jquery.cookie.js文件https://plugins.jquery.com/cookie/ }); }); //可拖拽：treegrid-dnd.js ``` ## **五、bootstrap-TreeGrid插件** ### 示例 ``` <table id="table"></table> <script> var $table = $('#table') function mounted() { $table.bootstrapTable({ url: 'json/treegrid.json', idField: 'id', showColumns: true, columns: [ { field: 'ck', checkbox: true }, { field: 'name', title: '名称' }, { field: 'status', title: '状态', sortable: true, align: 'center', formatter: 'statusFormatter' }, { field: 'permissionValue', title: '权限值' } ], treeShowField: 'name', parentIdField: 'pid', onPostBody: function() { var columns = $table.bootstrapTable('getOptions').columns if (columns && columns[0][1].visible) { $table.treegrid({ treeColumn: 1, onChange: function() { $table.bootstrapTable('resetView') } }) } } }) } 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>' } return '<span class="label label-default">锁定</span>' } </script> ``` ![](https://img.kancloud.cn/42/c2/42c2c402bfc36efc1ed9d95cc9cd3c64_770x422.png) 更多参考[Treegrid jquery plugin (maxazan.github.io)](http://maxazan.github.io/jquery-treegrid/)