JQuery Easyui/TopJUI 基本树形表格的创建

最新推荐文章于 2024-04-16 09:48:21 发布

原创最新推荐文章于 2024-04-16 09:48:21 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用JQuery EasyUI和TopJUI创建树形表格，包含HTML代码示例，展示如何通过调用方法实现表格的展开和折叠功能。

JQuery Easyui/TopJUI 基本树形表格的创建

<table data-toggle="topjui-treegrid"
       data-options="id:'menuTg',
        idField:'id',
        treeField:'text',
        url:remoteHost+'/system/codeItem/getListByCodeSetIdAndLevelId?codeSetId=0&levelId=0',
        expandUrl:remoteHost+'/system/codeItem/getListByPid?pid={id}'">
    <thead>
    <tr>
        <th data-options="field:'uuid',title:'UUID',checkbox:true"></th>
        <th data-options="field:'text',title:'名称'"></th>
        <th data-options="field:'codeSetId',title:'体系代码'"></th>
        <th data-options="field:'id',title:'编号'"></th>
        <th data-options="field:'pid',title:'父级编号'"></th>
    </tr>
    </thead>
</table>


<!-- 表格工具栏开始 -->
<div id="menuTg-toolbar" class="topjui-toolbar"
     data-options="grid:{
           type:'treegrid',
           id:'menuTg',
           parentIdField:'pid'
       }">
        <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'expandAll',
       extend: '#menuTg-toolbar',
       btnCls:'topjui-btn-blue'">展开全部</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'collapseAll',
       extend: '#menuTg-toolbar',
       btnCls:'topjui-btn-blue'">折叠全部</a>
</div>
<!-- 表格工具栏结束 -->

效果展示

页面默认展示