目前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. 用 Docker 构建、运行、发布来一个 Spring Boot 应用

    本文演示了如何用 Docker 构建.运行.发布来一个 Spring Boot 应用. Docker 简介 Docker 是一个 Linux 容器管理工具包,具备“社交”方面,允许用户发布容器的 im ...

  2. Flask实例化的参数 及 对app的配置

    首先展示一下: from flask import Flask app = Flask(__name__) # type:Flask app.config["DEBUG"] = T ...

  3. Mac OS 中安装 autoconf 和 automake

    在Mac上面编译FFmpeg需要安装很多东西,首先是:autoconf 和 automake 请按照以下顺序安装: curl -O http://mirrors.kernel.org/gnu/m4/m ...

  4. [CocoaPods]Podfile文件

    Podfile是一个描述一个或多个Xcode项目的目标依赖项的规范.该文件应该只是命名Podfile.指南中的所有示例都基于CocoaPods 1.0及更高版本. Podfile可以非常简单,这会将A ...

  5. python中实现排序list

    作为一个非常实用的一种数据结构,排序链表用在很多方面,下面是它的python代码实现: from Node import * class OrderedList: def __init__(self) ...

  6. [POC]SuiteCRM 7.10.7 - 'record' SQL Injection

    #################################################################### # Exploit Title: SuiteCRM - 're ...

  7. 一筐鸡蛋的lcm

    问题 一筐鸡蛋,一个一个取正好取完,两个两个取剩下一个,三个三个取正好取完,四个四个取剩下一个,五个五个取少一个,六个六个取剩下三个,七个七个取正好取完,八个八个取剩下一个,九个九个取正好取完,共多少 ...

  8. Java高并发之设计模式

    本文主要讲解几种常见并行模式, 具体目录结构如下图. 单例 单例是最常见的一种设计模式, 一般用于全局对象管理, 比如xml配置读写之类的. 一般分为懒汉式, 饿汉式. 懒汉式: 方法上加synchr ...

  9. dart之旅（三）- list

    list, 在 js 中被称为数组, 但是和 js 中的数组还是有不少不同的地方,我们来看一个例子: // 声明一个长度不可变的 list List<int> fixedLengthLis ...

  10. C++模板的应用

    需求:类比数组类,只不过数组类型不再是整型.浮点型等,也可以是类. 1.创建模板类 头文件 #ifndef MYVECTOR_H #define MYVECTOR_H #include <ios ...