Layui(十一) Layui Tree点击组件则加载相关数据

最新推荐文章于 2024-06-28 03:45:22 发布

宗乐平

最新推荐文章于 2024-06-28 03:45:22 发布

阅读量3.4k

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/qq_42142258/article/details/104654443

版权

本文主要介绍了如何在Layui中使用Tree组件，当用户点击Tree节点时动态加载相关Table数据。首先，页面加载时会加载初始的Tree和Table数据。接着，通过监听Tree的click事件，实现点击节点后加载对应的数据详情。

摘要由CSDN通过智能技术生成

目的：

思路：①、界面打开则加载Tree数据和 Table 数据

②、用户点击某个节点则加载该节点的所有数据、

过程：

1、先加载table数据

  // 显示右侧表格数据
        var tableIns = table.render({
            elem: '#test'
            , id: 'DeptUser'
            , url: 'http://xxx.xx.xx.xx:xxxx/api/depuser'
            , method: 'POST'
            , datatype: 'json'
            , where: {'deptid': JSON.stringify(tmp_id), 
                        'token': token
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'ID', title: 'ID', sort: true}
                , {field: 'UserName', title: '用户名'}
                , {field: 'Sex', title: '性别'}
                , {field: 'DeptName', title: '部门'}
                , {field: 'JobName', title: '职位'}
            ]]
            , limit: 10
            , page: {theme: '#1E9FFF'}
        });

2、加载Tree组件，同时在Tree.click方法中写表格的回调方法

tree.render({
            elem: '#test9'
            , data: tmp_data
            // 默认节点打开状态
            , spread: true
            , id: 'DeptName'
            , edit: ['add', 'update', 'del'] //操作节点的图标