标签：__ name open Layui TreeTable 树形 entered data id

TreeTable.js下载

链接：https://pan.baidu.com/s/1lLBge_4MSSViLztwTnPfkA
提取码：whj3

一、效果图

二、前端代码

{include file='common/header'}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card layui-form">
                <div class="layui-card-header">{:__('Query conditions')}</div>
                <div class="layui-card-body layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-btn-group demoTable">
                            {if $check->checkPrivilege('department/add')}<button class="layui-btn " data-type="add">
                            <i class="layui-icon layui-icon-addition"></i>{:__('Add')}
                        </button>{/if}
                            {if $check->checkPrivilege('department/delete_op')} <button class="layui-btn layui-btn-danger" data-type="delAll"><i
                                class="layui-icon layui-icon-delete"></i>{:__('Delete all')}
                        </button>{/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card layui-form">
                <div class="layui-card-body">
                    <table class="layui-hide" id="app" lay-filter="app"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="operate">
    {if $check->checkPrivilege('department/child')}<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="child">{:__('Add child')}</a>{/if}
    {if $check->checkPrivilege('department/edit')}<a class="layui-btn layui-btn-xs" lay-event="edit">{:__('Edit')}</a>{/if}
    {if $check->checkPrivilege('department/delete_op')}<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">{:__('Delete')}</a>{/if}
</script>
{include file='common/footer'}
<script>
    layui.config({
        base : '/static/admin/layui/lay/modules/'
    }).extend({
        treeTable : 'treeTable'
    });
    var table = null;
    layui.use(['treeTable', 'form'], function () {
        table = layui.treeTable;
        table.render({
            id: "app",
            elem: '#app',
            url: "{:url('department/lst')}",
            tree: {
                iconIndex: 1,
                isPidData: true,
                idName: 'id',//父ID
                pidName: 'parent_id',//子ID
                openName: 'open',// 是否默认展开的字段名
                //public bool open { get; set; }open字段是bool类型
            },
            cols: [[
                {field: 'id', title: 'ID', width: 100}
                , {
                    field: 'name', title: "{:__('Department name')}"
                }
                , {field: 'update_entered', title: "{:__('Update time')}"}
                , {field: 'date_entered', title: "{:__('Create time')}"}
                , {fixed: 'right', title: "{:__('Operate')}", toolbar: '#operate', width: 180}
            ]],
            page: false,
            cellMinWidth: 80,
            // toolbar: '#toolbar',
            // defaultToolbar: ['filter', 'exports', 'print']
        });
        table.on('tool(app)', function (obj) {
            let data = obj.data, id = data.id;
            switch (obj.event) {
                case 'child':
                    layer.open({
                        type: 2,
                        title: "{:__('Add %s', __('App name'))}",
                        area: ["600px", "400px"],
                        content: "{:url('department/add')}?id="+id,
                        maxmin: true,
                    });
                    break;
                case 'edit':
                    layer.open({
                        type: 2,
                        title: "{:__('Edit %s', __('App name'))}",
                        area: ["600px", "400px"],
                        content: "{:url('department/edit')}?id="+id,
                        maxmin: true,
                    });
                    break;
                case 'delete':
                    delete_op(id, "{:__('Are you sure you want to delete this item?')}");
                    break;
            }
        });

        var active = {
            add: function () {
                layer.open({
                    type: 2,
                    title: "{:__('Add %s', __('App name'))}",
                    area: ["600px", "550px"],
                    content: "{:url('department/add')}",
                    maxmin: true,
                });
            },
            delAll: function () {
                var checkStatus = table.checkStatus('app'),
                    data = checkStatus.data, ids="";

                if (data.length == 0) {
                    layer.msg("{:__('Please select the item to delete')}", {
                        icon: 5,
                        shift: 6
                    });
                    return false;
                }
                for (let i = 0; i < data.length; i++) {
                    if (i == data.length - 1) {
                        ids += data[i].id;
                    }else {
                        ids += data[i].id + ",";
                    }
                }
                delete_op(ids, "{:__('Are you sure you want to delete this item?')}");
            }
        };

        $('.layui-btn').on('click', function() {
            var type = $(this).data('type');
            active[type] && active[type].call(this);
        });

        function delete_op(id, msg) {
            layer.confirm(msg, function (index) {
                $.ajax({
                    url: "{:url('department/delete_op')}",
                    data: {id: id},
                    type: "post",
                    success: function (data) {
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                icon: 1
                            });
                            location.reload(true);
                        } else {
                            layer.msg(data.msg, {
                                icon: 5,
                                shift: 6
                            });
                        }
                        layer.close(index);
                    }
                });
                layer.close(index);
            });
        }
    });
</script>

三、后台数据

{
    "code": 0,
    "msg": "获取成功",
    "time": 1659322274,
    "data": [{
        "id": 1,
        "name": "test",
        "parent_id": 0,
        "date_entered": null,
        "update_entered": null,
        "open": true
    }, {
        "id": 2,
        "name": "h",
        "parent_id": 1,
        "date_entered": null,
        "update_entered": null,
        "open": true
    }, {
        "id": 3,
        "name": "222",
        "parent_id": 1,
        "date_entered": null,
        "update_entered": null,
        "open": true
    }, {
        "id": 4,
        "name": "哈哈",
        "parent_id": 0,
        "date_entered": "2022-08-01 10:28:38",
        "update_entered": "2022-08-01 10:28:38",
        "open": true
    }, {
        "id": 5,
        "name": "好",
        "parent_id": 4,
        "date_entered": "2022-08-01 10:28:53",
        "update_entered": "2022-08-01 10:35:19",
        "open": true
    }],
    "count": 5
}

标签：__,name,open,Layui,TreeTable,树形,entered,data,id
来源： https://www.cnblogs.com/yang-2018/p/16539387.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。