<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>
<!-- 表格工具栏结束 -->

  

效果展示
       页面默认展示
 

 
 点击展示全部效果

 
注意:这是一级一级的打开,点击一次打开一级
点击折叠效果(一次性全部折叠。)
 

纯HTML代码,展示折叠方法都封装好了,可以直接调用。
 
 
   EasyUI中文网:http://www.jeasyui.cn
  TopJUI前端框架:http://www.topjui.com
  TopJUI交流社区:http://ask.topjui.com

JQuery Easyui/TopJUI 基本树形表格的创建的更多相关文章

  1. 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

    jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...

  2. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  3. Jquery easyui treegrid实现树形表格的行拖拽

    前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...

  4. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  5. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  6. JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  7. jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!) validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改 ...

  8. JQuery Easyui/TopJUI 多表头创建

    JQuery Easyui/TopJUI 多表头创建 废话不多说,直接贴上代码. html <div data-toggle="topjui-layout" data-opt ...

  9. 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

随机推荐

  1. camera报错经典问题

    --- 33u>: error: undefined reference to 'NSFeature::RAWSensorInfo<22133u>::impGetDefaultDat ...

  2. 玩转Google开源C++单元测试框架Google Test系列(gtest)(总)

    原文地址:http://www.cnblogs.com/coderzh/archive/2009/04/06/1426755.html 前段时间学习和了解了下Google的开源C++单元测试框架Goo ...

  3. Struts2 小例子 --第二弹

    struts-2.5.14.1-all.zip  下载后文件夹说明 apps:war格式的例子文件 lib:引用jar包文件 src:源码文件 docs:帮助文档 小例子: 1.创建web工程:str ...

  4. 设置document.domain实现js跨域注意点

    转自:http://www.cnblogs.com/fsjohnhuang/archive/2011/12/07/2279554.html document.domain 用来得到当前网页的域名.比如 ...

  5. 分享知识-快乐自己:Hibernate 关联映射

    关联关系映射--概念: 关联关系是使用最多的一种关系,非常重要.在内存中反映为实体关系,映射到DB中为主外键关系. 实体间的关联,即对外键的维护.关联关系的发生,即对外键数据的改变. 外键:外面的主键 ...

  6. navicat for mysql 安装

    直接上正题,用于记录 1.下载linux版本的navicat:http://www.navicat.com/download/navicat-for-mysql 2.解压 tar -vzxf navi ...

  7. eclipse如何在不联网的情况下引入dtd约束文件

    1. 获取dtd文件,解压 F:\Java配置文件\Mybatis\mybatis-3.3.0\mybatis-3.3.0.jar\org\apache\ibatis\builder\xml\ 路径下 ...

  8. HDU 6170 Two strings (dp)

    /** * 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6170 * 字符串match, '.'代表匹配任意一个字符,"*" 代表 ...

  9. listen 58

    Different Brain Regions Handle Different Music Types (Vivaldi) versus (the Beatles) . Both great. Bu ...

  10. Linux(Ubuntu16.04)+GitLab8.17deb安装包搭建Git仓库(代码管理系统)

    1 下载GitLab安装包 2  执行安装命令 3 验证是否安装和启动成功 4 修改管理员密码 5 其它说明 5.1修改访问URL 5.2修改邮件配置 5.3修改web端口 1下载GitLab安装包 ...