Layui treeGrid

目前treeGrid的源码不是很完善, 没有开放, 只有社区里面有, 想用的可以看看下面方法:

1.加入treeGrid.js文件

(1)layui 的treeGrid 下载地址: https://gitee.com/lrd110/tree_table_treegrid_based_on_layui

https://gitee.com/beijiyi/tree_table_treegrid_based_on_layui (最新)

(2)下载后找到里面的treeGrid.js .将文件放入现有的layui的包里面: layui/lay/modules/

(3)修改layui.js 文件, 加入treeGrid.js 模块:

2.代码实现

(1).效果

支持编辑:如果关掉可以自己修改源码(没找到在哪个地方,不过找到了全局禁用的标签)

(2). 代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="static/layui/css/layui.css" media="all"><style type="text/css">body {height: 100%;width: 100%;/*overflow: hidden;*/background-size: cover;margin: 0 auto;}.body_bg {/*height: 1000px;;*/text-align: center;display: block;padding-left: 15px;padding-right: 15px;}.t_title {height: 65px;font-size: 20px;display: block;/*padding: 10px;*/text-align: left;}.t_test {background-color: white;width: 100%;}.table_scroll {height: 505px;overflow-y: auto;}td {font-size: 12px !important;}.layui-form-checkbox span {height: 30px;}.layui-field-title {border-top: 1px solid white;}table {width: 100% !important;}</style></head>
<body><div class="body_bg"><!--标题--><div class="t_title"><fieldset class="layui-elem-field layui-field-title"><blockquote class="layui-elem-quote"><legend>权限管理</legend></blockquote></fieldset></div><div class="t_test"><!--搜索  按钮--><div class="layui-form-item"><!--按钮--><div style="padding-bottom: 10px; width:100%;height:40px"><div class="layui-input-inline" style="width: 147px;"><button class="layui-btn" id="addLeaguerInfoSpecial"><i class="layui-icon" style="font-size: 20px; "></i> 添加菜单</button></div></div></div><hr class="layui-bg-blue"><div class="yys-fluid yys-wrapper"><div class="layui-row lay-col-space20"><div class="layui-cos-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12"><section class="yys-body animated rotateInDownLeft"><div class="yys-body-content clearfix changepwd"><div class="layui-col-lg12 layui-col-md10 layui-col-sm12 layui-col-xs12" style="width:100%"><div class="user-tables"><table id="userTables" lay-filter="userTables"></table></div></div></div></section></div></div></div></div>
</div><script src="static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript">layui.use(['element', 'tree', 'layer', 'form', 'upload', 'treeGrid'], function () {var $ = layui.jquery, tree = layui.tree;var datatable = [{"sd_id": 1,"sd_name": "测试集团","sd_up_id": null},{"sd_id": 2,"sd_name": "测试集团","sd_up_id": 1},{"sd_id": 3,"sd_name": "测试集团","sd_up_id": 1}];var treeGrid = layui.treeGrid; //很重要var treeTable = treeGrid.render({elem: '#userTables', data: datatable, cellMinWidth: 100, treeId: 'sd_id'//树形id字段名称
            , treeUpId: 'sd_up_id'//树形父id字段名称
            , treeShowName: 'sd_name'//以树形式显示的字段
            , cols: [[{type: 'checkbox'}, {field: 'sd_name', edit: 'text', width: '100', title: '水果'}, {field: 'sd_id', edit: 'text', width: '300', title: 'id'}, {field: 'sd_up_id', edit: 'text', width: '300', title: 'pId'}]], page: false});});
</script>
</body>
</html>
</body>
</html>

期待完善......

转载于:https://www.cnblogs.com/yysbolg/p/8968968.html

Layui treeGrid相关推荐

layui中的treeGrid 树形表格
文章目录 1. 导入依赖 2. HTML 内容 3. 导入js 并加载模块 4. 编写接口返回json格式对象官方文档:https://fly.layui.com/extend/treeGrid/ ...
LayUi 折叠表格
表格会以代码的形式写到里面,大家可以将代码copy到项目中新建一个HTML尝试,下面用到的JS都会进行展示JS的内容.可以完全还原我当时的环境 <#include "/common/l ...
spring boot + mybatis + layui + shiro后台权限管理系统
后台管理系统版本更新后续版本更新内容链接入口: springboot + shiro之登录人数限制.登录判断重定向.session时间设置:https://blog.51cto.com/wyai ...
easyui的treegrid一些小问题
项目前端用的是layui框架,但是layui的table的树状表格不太好用,下图是用easyui的treegrid,这是正常状态下的遇到的问题是显示数据不全,前端明明接收到了3条数据,但是只显示一条 ...
thymeleaf+layui 展示table 报500
使用thymeleaf和layui的时候,使用layui的表格方法渲染,thymeleaf出现了渲染错误,报错信息如下: org.thymeleaf.exceptions.TemplateProces ...
layui中从上一个js模块中取参数_layui的引用js踩坑
前言: 今天因为项目需要,需要使用layui,因为本身不多的前端经验,以为layui的用法和其他的前端框架,例如jquery,bootstrap等等,只需要直接引入layui.js,和layui.cs ...
php layui table,layui table 相关问题汇总
1.表格内容自动换行完美解决默认情况下,layui table表格内容超出表格宽度会自动省略号隐藏需要鼠标放到单元格上,出现次图标然后再点击,才会显示全部,用起来不方便解决方法: 未页面添加c ...
layui 表格内容写temple函数_layui表格-template模板的三种用法
问题情境: layui中将数据库数据通过layui table渲染到前端表格,非常简单,但是如果数据库存储的信息不能被直接展示,项目中该页面有好几个这样的字段,会员类型,支付类型,会员时长还有平台类型 ...
怎么接收layui上传的文件_layui 上传文件_批量导入数据UI的方法
使用layui的文件上传组件,可以方便的弹出文件上传界面. 效果如下: 点击[批量导入]按钮调用js脚本importData(config)就可以实现数据上传到服务器. 脚本: /*** * 批量导入 ...

Layui treeGrid

1.加入treeGrid.js文件

Layui treeGrid相关推荐

最新文章

热门文章