layui树形表格支持非异步和异步加载。

仓库地址:https://gitee.com/uniqid/

使用示例如下:

<div class="uui-admin-common-body uui-bg-white">
<table id="list" class="layui-table uui-admin-table" lay-filter="list"></table>
</div> <script type="text/html" id="toolbarList">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="expandAll">展开全部</button>
<button class="layui-btn layui-btn-sm" lay-event="expandOne">展开一层</button>
<button class="layui-btn layui-btn-sm" lay-event="foldAll">折叠全部</button>
<button class="layui-btn layui-btn-sm" lay-event="foldOne">折叠一层</button>
</div>
</script> <script>
layui.config({
base: '/uui/treetable-lay/module/'
}).extend({
treetable: 'treetable-lay/treetable'
}).use(['treetable'], function () {
var treetable = layui.treetable; treetable.render({
treeColIndex: 1,
treeSpid: 0,
treeIdKey: 'code',
treePidKey: 'pcode',
treeIsLeafKey: 'isleaf',
treeDefaultClose: false,
treeLinkage: false,
treeNodeAsync: true,
elem: '#list',
toolbar: '#toolbarList',
url: '/admin/regions',
method: 'post',
parseData: parseData,
cols: [[
{field: 'id', title: 'ID', width:80}
,{field: 'name', title: '名称', width: 288}
,{field: 'code', title: '编码', width:168}
,{field: 'abbr', title: '简称', width: 100}
,{field: 'created_at', title: '添加时间'}
]]
}); treetable.on('toolbar(list)', function(obj){
if(obj.event == 'expandOne'){
treetable.expandOne('#list');
} else if(obj.event == 'expandAll'){
treetable.expandAll('#list');
} else if(obj.event == 'foldOne'){
treetable.foldOne('#list');
} else {
treetable.foldAll('#list');
}
});
});
</script>

layui树形表格支持非异步和异步加载的更多相关文章

  1. 180807-Quick-Task 动态脚本支持框架之Groovy脚本加载执行

    Quick-Task 动态脚本支持框架之Groovy脚本加载执行 上一篇简答说了如何判断有任务动态添加.删除或更新,归于一点就是监听文件的变化,判断目录下的Groovy文件是否有新增删除和改变,从而判 ...

  2. 180729-Quick-Task 动态脚本支持框架之任务动态加载

    Quick-Task 动态脚本支持框架之任务动态加载 前面几篇博文分别介绍了整个项目的基本架构,使用说明,以及整体框架的设计与实现初稿,接下来则进入更细节的实现篇,将整个工程中核心实现捞出来,从为什么 ...

  3. D3树状图异步按需加载数据

    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...

  4. jeecgboot-vue3笔记(八)——treeSelect树形选择组件的使用(一次性加载)

    使用效果 前端代码 定义interface export interface TreeDataItem { value: string; key: string; title?: string; sl ...

  5. layui的几个简单使用(简单弹窗,加载效果,移除加载效果)

    1.加载效果和移除加载效果 function layuiLoading(msg){ layui.use(['layer', 'form'], function(){ index = layer.loa ...

  6. mpvue支持小程序的分包加载

    目录 clone mpvue-quickstart 模板 分包体验 现有项目的分包改造 这个功能可以说是让我们这些用 mpvue 的等的很焦灼,眼看着项目的大小一天天地逼近 2M,mpvue 还不能很 ...

  7. 001_Chrome 76支持原生HTML 图片懒加载Lazy loading

    Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...

  8. js实现所有异步请求全部加载完毕后,loading效果消失

    在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loadi ...

  9. LayUI中实现上级下拉框动态加载下级下拉框js

    js代码: var form = layui.form, layer = layui.layer; form.on("select(上级)", function(data){ va ...

随机推荐

  1. Day2 01 引用类型和值类型

    值类型:值类型变量,存储的是对象的值.给其赋值,会创建值的副本,修改任何一个副本,不会影响其他副本. int x = 5; int y = x;  //创建一个x的副本y  x把其自身的值传送给了y ...

  2. Netflow elasticflow

    http://itfish.net/article/27660.html https://github.com/robcowart/elastiflow/tree/master

  3. P4999烦(gui)人(chu)的数学作业

    P4399P4999 这是一道有着三倍经验的宝藏题目 我们可以求出来1到n中,1~9分别出现了几次,设f[i]为数字i出现的次数,则\(ans=\sum{f[i]\cdot i}\) 然后就是数位dp ...

  4. iOS即时通讯之CocoaAsyncSocket源码解析五

    接上篇:iOS即时通讯之CocoaAsyncSocket源码解析四         原文 前言: 本文为CocoaAsyncSocket Read篇终,将重点涉及该框架是如何利用缓冲区对数据进行读取. ...

  5. Jmeter上传文件、cookie、登录验证

    2.11选择http请求   3.0 cookie 域:十九服务器ip或者域名 路径就是接口路径 登录验证:

  6. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  7. 发邮件--yagmail模块

    准备工作:1.在你的邮箱设置里面打开smtp服务(若有的话)2.开启邮箱授权码,记住这个授权码(连接邮箱服务时用) 1.安装yagmail模块pip install yagmail2.举例:impor ...

  8. java程序利用ansible修改redis服务参数

    第一步,java调用shell paraname和paravalue是传给playbook的变量. try { String cmd5 = "sudo ansible-playbook /s ...

  9. postman从body,headers,data中获取token后回写做全局变量

    设置全局变量

  10. C#中Func与Action的理解

    Action 与 Func是.NET类库中增加的内置委托,以便更加简洁方便的使用委托.最初使用委托时,均需要先定义委托类型,然后定义一个符合委托类型签名的函数,在调用前,需声明并创建委托对象,将指定函 ...