<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. 使用vscode写typescript(node.js环境)起手式

    动机 一直想把typescript在服务端开发中用起来,主要原因有: javascript很灵活,但记忆力不好的话,的确会让你头疼,看着一月前自己写的代码,一脸茫然. 类型检查有利有敝,但在团队开发中 ...

  2. JavaScript(4)

    myfuns.js //自定义函数 //输入两个数,再输入一个运算符(+,-,*,/),得到结果->函数 function jiSuan(num1,num2,operator){//特别强调 参 ...

  3. URL过滤

    URL过滤 就是网址过滤.把不安全的.少儿不宜的.政治的东西过滤掉,访问这些网址就会提示受限,不能访问. 一.url过滤简介 针对企业对员工上网行为的控制管理,可以采用URL过滤技术.如企业不允许研发 ...

  4. codeforces 569A A. Music(水题)

    题目链接: A. Music time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  5. C语言中的指针(二)

    指针指向谁,就把谁的地址赋给指针,指针变量和指针指向的内存变量是不一样的.不停的给指针赋值,相当于是不断的改变指针的指向. 在开发中要避免野指针的存在,在指针使用完毕之后,记得要给指针赋值成为NULL ...

  6. 网络编程学习笔记-linux常用的网络命令

    网络参数设置命令 所有时刻如果你想要做好自己的网络参数设置,包括IP参数.路由参数和无线网络等,就得要了解下面这些相关的命令才行.其中Route及ip这两条命令是比较重要的.当然,比较早期的用法,我们 ...

  7. 1119 Pre- and Post-order Traversals(30 分)

    1119 Pre- and Post-order Traversals(30 分) Suppose that all the keys in a binary tree are distinct po ...

  8. 云-资讯-Micron-Insight:云的形成方式 — 以及它的发展方向

    ylbtech-云-资讯-Micron-Insight:云的形成方式 — 以及它的发展方向 1.返回顶部 1. 云的形成方式 — 以及它的发展方向 当你坐下来开始一天工作的时候,你可能不会考虑到你所做 ...

  9. 五 Vue学习 首页学习 (上)

    首页:   http://localhost:8002/#/,  登录页面如下: index.js文件中如下的路由配置,转过去看login.vue是如何实现的. const routes = [ { ...

  10. 第一章 Git 一览

    虽然这个系列的文章主要关注的是Github,然而首先了解下Git的基本概念和名词也是非常有帮助的. 工作目录(Working Directory) 工作目录是你个人计算机上的一个目录.在该目录下,每一 ...