Layui treeGrid

本文轉載自查看原文 2018-04-28 17:32 17627 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; ">&#xe608;</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.bloghome.com.cn/user/yysblog

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 layui中的treeGrid 樹形表格前端框架——Layui（樹形表格treeGrid ） easyui treegrid的使用示例 treegrid，可以展開的jqgrid樹 easyUI treeGrid 的小例子 easyui treegrid逐步加載 TreeGrid( 樹形表格) EasyUI TreeGrid 的使用 easyui treegrid onloadSuccess參數 easyui-treegrid的案例