目前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. 记一次安装VS2015后启动失败的修复过程

    安装过程没有提示任何问题,然而启动vs时提示没有安装 .Net Framework 4.6,那就安装吧,但是安装 4.6 时却提示 Windows Moudle Installer 服务没有启动,于是 ...

  2. 「WC2018」州区划分（FWT）

    「WC2018」州区划分(FWT) 我去弄了一个升级版的博客主题,比以前好看多了.感谢 @Wider 不过我有阅读模式的话不知为何 \(\text{LATEX}\) 不能用,所以我就把这个功能删掉了. ...

  3. PCIE 2.0协议概念基本科普

    PCIE的概念:是电脑总线PCI的一种,它沿用现有的PCI编程概念及通信标准,但建基于更快的串行通信系统. 英特尔是该接口的主要支持者.PCIe仅应用于内部互连.由于PCIe是基于现有的PCI系统,只 ...

  4. eclipse连接远程服务器

    eclipse里有一个强大的插件,可以直接在本地编辑远程服务器代码,Eclipse Remote System Explorer (RSE) 下载安装方法: 一.下载,高版本的eclipse可以直接下 ...

  5. 对话Task

    上一篇简单讲解了 线程和线程池以及上下文切换.创建线程代价高昂,默认每个线程都要占用大量虚拟内存1M.更有效的做法使用线程池,重复利用线程.在.NET4.0中引入了TPL任务并行库,你可以在将精力集中 ...

  6. maven snapshot和release版本的区别

    Maven的Snapshot版本与Release版本 1. Snapshot版本代表不稳定.尚处于开发中的版本 2. Release版本则代表稳定的版本 3. 什么情况下该用SNAPSHOT? 协同开 ...

  7. Android开发之漫漫长途 XVII——动画(续)

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  8. 从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 简单的端口扫描器（TCP connect）

    端口扫描器原理相对简单,采用的是TCP connect状态判断.具体来说:TCP connect方式使用系统网络API connect向目标主机的端口发起连接,如果无法连接,说明该端口关闭.该方式扫描 ...

  10. Jenkins CLI 命令详解

    笔者在前文<通过 CLI 管理 Jenkins Server>中介绍了如何通过 SSH 或客户端命令行的方式管理 Jenkins Server,限于篇幅,前文主要的目的是介绍连接 Jenk ...