layui树形表格支持非异步和异步加载
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树形表格支持非异步和异步加载的更多相关文章
- 180807-Quick-Task 动态脚本支持框架之Groovy脚本加载执行
Quick-Task 动态脚本支持框架之Groovy脚本加载执行 上一篇简答说了如何判断有任务动态添加.删除或更新,归于一点就是监听文件的变化,判断目录下的Groovy文件是否有新增删除和改变,从而判 ...
- 180729-Quick-Task 动态脚本支持框架之任务动态加载
Quick-Task 动态脚本支持框架之任务动态加载 前面几篇博文分别介绍了整个项目的基本架构,使用说明,以及整体框架的设计与实现初稿,接下来则进入更细节的实现篇,将整个工程中核心实现捞出来,从为什么 ...
- D3树状图异步按需加载数据
D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...
- jeecgboot-vue3笔记(八)——treeSelect树形选择组件的使用(一次性加载)
使用效果 前端代码 定义interface export interface TreeDataItem { value: string; key: string; title?: string; sl ...
- layui的几个简单使用(简单弹窗,加载效果,移除加载效果)
1.加载效果和移除加载效果 function layuiLoading(msg){ layui.use(['layer', 'form'], function(){ index = layer.loa ...
- mpvue支持小程序的分包加载
目录 clone mpvue-quickstart 模板 分包体验 现有项目的分包改造 这个功能可以说是让我们这些用 mpvue 的等的很焦灼,眼看着项目的大小一天天地逼近 2M,mpvue 还不能很 ...
- 001_Chrome 76支持原生HTML 图片懒加载Lazy loading
Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...
- js实现所有异步请求全部加载完毕后,loading效果消失
在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loadi ...
- LayUI中实现上级下拉框动态加载下级下拉框js
js代码: var form = layui.form, layer = layui.layer; form.on("select(上级)", function(data){ va ...
随机推荐
- 利用Javascript解决HTML大数据列表引起的网页加载慢/卡死问题。
在一些网页应用中,有时会碰到一个超级巨大的列表,成千上万行,这时大部份浏览器解析起来就非常痛苦了(有可能直接卡死). 也许你们会说可以分页或动态加载啊?但是有可能需求不允许分页,动态加载?网络的延迟也 ...
- 分页查询 pagecount recordcount pagesize
pagecount=(recordcount+pagesize-1)/pagesize
- clinical-逻辑核查数据的操作
1. 前端页面样式 2. 前端代码 添加: 展示: 修改 删除 3. 后台代码 封装的DAO类数据 # coding: utf-8 from pdform.services.db.dbCore imp ...
- Value Iteration Algorithm for MDP
Value-Iteration Algorithm: For each iteration k+1: a. calculate the optimal state-value function for ...
- 应用安全-安全设备-Waf系列-软Waf-云锁
安装 安装 - Linux 前提:检查selinux状态 - 关闭selinux getenforce #显示为disabled则为关闭 .下载 x86:wget http://download.yu ...
- JQ判断div是否隐藏
1. $("#tanchuBg").css("display") 2. $("#tanchuBg").is(":visible ...
- javascript 阻止事件冒泡
阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...
- IDEA Maven project: 'xxx/pom.xml' already exists in VFS
Failed to create a Maven project: 'xxx/pom.xml' already exists in VFS idea创建项目后,发现项目有问题,删除后重新创建,提示错误 ...
- Maven-Eclipse使用maven创建HelloWorld Java项目
1.依次选择File-->New-->Other-->Maven-->Maven Project,Next 2.选择maven-archetype-quickstart,Nex ...
- RandomAccessFile类使用说明
RandomAccessFile类是Java Io体系中功能最为丰富的文件访问类,它提供了众多的文件访问方法.RandomAccessFile类支持“随机访问”方式,这里的“随机”是指程序可以直接跳到 ...