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. [CSP-S模拟测试]:炼金术士的疑惑(模拟+数学+高斯消元)

    题目传送门(内部题70) 输入格式 第一行一个正整数$n$,表示炼金术士已知的热化学方程式数量.接下来$n$行,每行一个炼金术士已知的热化学方程式.最后一行一个炼金术士想要求解的热化学方程式,末尾记为 ...

  2. Python爬虫数据保存到MongoDB中

    MongoDB是一款由C++语言编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储方式类似于JSON对象,它的字段值可以是其它文档或数组,但其数据类型只能是String文本型. ...

  3. mysql group by 去重 分类 求和

    w SELECT COUNT(*) FROM ( SELECT COUNT(*) FROM listing_vary_asins GROUP BY asin, countrycode ) AS w; ...

  4. JDBC 查询mysql数据库比客户端工具慢的解决办法

    在URL链接参数中配置rewriteBatchedStatements.useServerPrepStmts为true url="jdbc:mysql://****/dbName?useSS ...

  5. Emmet - 自动补全 JSX

    VSCode 中设置"emmet.syntaxProfiles": {"javascript": "jsx"} reactjs - JSX ...

  6. 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第4节 多态_15_多态的概述

    不是多种状态,而是有多种形态 继承是多态的前提 子类就是一个父类.学生就是一个人 多态性说的是这个对象.

  7. 并发测试JMeter及发送Json请求

    1.下载 提前安装好jdk1.8 官网下载地址:http://jmeter.apache.org/download_jmeter.cgi 2.解压,双击bin/jmeter.bat 3.jmeter配 ...

  8. CSS3------box-shadow,即单边阴影效果设置

    box-shadow修改元素的阴影效果要方便得多,因为box-shadow可以修改六个参数,得到不同的效果.下面结合一些简单的案例来对box-shadow属性进行演示说明. 1.单边阴影效果 定义元素 ...

  9. delphi中的inpubox,如何能控制它的位置? 10

    https://zhidao.baidu.com/question/153270855.html delphi中的inpubox,如何能控制它的位置? 10 RT ! 前辈!最好你就把那代码都拿出来吧 ...

  10. python3爬虫之urllib初探

    urllib主要包含request(请求模块).error(异常处理模块).parse(工具模块).robotparser(识别网站的robots.txt文件,是否允许爬取). request(请求模 ...