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 ...
随机推荐
- [CSP-S模拟测试]:玩具(概率DP)
题目描述 这个故事发生在很久以前,在$IcePrincess\text{_}1968$和$IcePrince\text{_}1968$都还在上幼儿园的时候. $IcePrince\text{_}196 ...
- fengmiantu2
- UltraISO(软碟通) 制作U盘启动盘
在使用之前我们先下载好UltraISO并安装完成. 打开软碟通,执行文件-->打开命令,找到下载好的ubuntu系统镜像文件 选择写入映象的U盘(U盘容量一定要大于镜像文件的容量),执行启动-- ...
- leetcode 36有效的数独
建立一个哈希表,每次查找,如果对应的列col,行row,小方格box中的数出现第二次,那么数独不合法: 据说还有深度优先搜索的方法,表示没有听懂:) class Solution { public: ...
- memocached基础操作
cmd->telnet方式链接(控制面板-启动该功能)telenet +ip +(端口号) memcahed 只有 string类型的 整个数据全部都是存在内存里面的 连接数 内存的大小 失效时 ...
- 使用GOGS搭建自己的Git托管
大家在开发中一般使用的git服务都是公司搭建好的,或者就是直接用gayhub提供的免费的仓库 如果想搭建一个自己的仓库的话怎么弄,这里给大家安利一款开箱即用的git托管服务:gogs. gogs是基于 ...
- Struts2 Convention Plugin ( struts2 零配置 )
Struts2 Convention Plugin ( struts2 零配置 ) convention-plugin 可以用来实现 struts2 的零配置.零配置的意思并不是说没有配置,而是通过约 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_09 序列化流_1_序列化和反序列化的概述
- 浅谈vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...
- Sentinel分布式系统的流量防卫兵
Sentinel 是什么?官网:https://github.com/alibaba/Sentinel/wiki/介绍 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 以流量 ...