目前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>

期待完善......

版权声明： 本文有 ```...裥簞點 发表于 bloghome博客

转载声明： 可自由转载、引用，但需要属名作者且注明文章出处。

文章链接： https://www.bloghome.com.cn/user/yysblog

Layui treeGrid的更多相关文章

  1. 【整理】treeGrid 树形表格

    treeGrid 树形表格 https://fly.layui.com/extend/treeGrid/

  2. spring boot + mybatis + layui + shiro后台权限管理系统

    后台管理系统 版本更新 后续版本更新内容 链接入口: springboot + shiro之登录人数限制.登录判断重定向.session时间设置:https://blog.51cto.com/wyai ...

  3. layui常用方法

    很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 conten ...

  4. 基于EasyUI Treegrid的权限管理资源列表

    1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到 ...

  5. CYQ.Data+EasyUI开发：几个相关的问题CheckBox、Tree、TreeGrid

    前言: 话说到新的公司已经呆了三个星期了,从上班的第二天开始就一直在写项目文档和给开发人员培训,以至于我的QQ签名从"我不是来搞培训的“到最后直接换成”我是来搞培训的“. 虽然挂名开发经理, ...

  6. 开源网站.NETMVC+ Layui+SqlSugar+RestSharp

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  7. jquery easyui-datagrid/treegrid 清空数据参考

    在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义.下面给出两种方法供初学者 ...

  8. RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单

    在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能.在我们的RDIFramework.NET Web框架中,只要是使用了EasyUI的D ...

  9. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. iOS编码规范(简版)

    1. 总体指导原则 [规则1-1]首先是为人编写程序,其次才是计算机. 说明:这是软件开发的基本要点,软件的生命周期贯穿产品的开发.测试.生产.用户使用.版本升级和后期维护等长期过程,只有易读.易维护 ...

  2. 浅谈数通畅联ECP与EAC的区别

    最近收到很多客户的提问,AEAI ECP企业云联平台是什么产品?为什么AEAI ECP中包括集成套件?EAC也是数通畅联的产品吗?同样涉及集成两者有什么区别呢?诸如此类的问题还有很多. 其实AEAI ...

  3. Python大法之告别脚本小子系列—信息资产收集类脚本编写(下)

    作者:阿甫哥哥 原文来自:https://bbs.ichunqiu.com/article-1618-1.html 系列文章专辑:Python大法之告别脚本小子系列目录: 0×05 高精度字典生成脚本 ...

  4. DBUtils的增删改查

    数据准备: CREATE DATABASE mybase; USE mybase; CREATE TABLE users( uid INT PRIMARY KEY AUTO_INCREMENT, us ...

  5. 机器学习技法笔记：08 Adaptive Boosting

    Roadmap Motivation of Boosting Diversity by Re-weighting Adaptive Boosting Algorithm Adaptive Boosti ...

  6. HoloLens开发手记－开发概述Development overview

    开发HoloLens全息应用将使用UWP平台(Universal Windows Platform),所有的HoloLens应用都是Win10通用应用,所有UWP通用应用都可以在HoloLens上运行 ...

  7. HttpWebRequst中https的验证处理问题

    最近在公司项目中使用了HttpWebRequst相关API,运行环境为.Net/Mono 2.0,是一款针对Unity平台的工具.开发过程中碰到了大家可能都碰到过的问题,Http还是Https? 为什 ...

  8. Python网络编程-IO阻塞与非阻塞及多路复用

    前言 问题:普通套接字实现的服务端的缺陷 一次只能服务一个客户端!                         accept阻塞! 在没有新的套接字来之前,不能处理已经建立连接的套接字的请求 re ...

  9. textarea 赋值的方法

    textarea 赋值的方法 <textarea name="" rows="3" id="note21" ></text ...

  10. Python内置常量

    引言 Python内置的常量不多,只有6个,分别是True.False.None.NotImplemented.Ellipsis.__debug__. 一. True 1. True是bool类型用来 ...