Layui第三方组件 treetable-lay的使用与封装

• 来源:https://gitee.com/whvse/treetable-lay
• 官方演示:https://whvse.gitee.io/treetable-lay/

1.说明

• 作者发布了两个版本的组件.
  第一个是在2018年的1.0版本,基于Layui的table完成的实现
  第二个是在2019年发布2.0版本,仍然基于的Layui,但对底层进行了一定的重写,不再使用table进行实现.
  当前文章是对2.0版本的使用封装(最后更新时间2019-12-27)
  这两个版本的使用差异有些大.若使用1.0版本,可以参考https://gitee.com/stylefeng/guns的使用方式
• 出于需求的需要,未使用官方所推荐的layui.use()相关方式进行调用.使用非模块化方式（即所有模块一次性加载)进行调用
• 需要特别注意,在使用treeTable-lay时的数据是不进行分页的,后端接口不需要实现分页.量级大的数据最好不用tree形式展示.如果强行使用分页,显示与搜索时的效果不太理想.

2.引用

3.代码

    var layui_table_tree={
        //表格渲染结束后的树状表格对象
        tableins: null,
        //用于创建表格的参数
        table_para: {
            elem: '#table_div'
            //容器唯一 id. id 是对表格的数据操作方法上必要的传递条件
            , id: "tableTree_id"
            //请求参数
            ,para:''
            ,url:"${request.contextPath}/role/getAl"
            ,data:null  // 数据
            ,tree: {
                //是否是pid形式的数据
                isPidData:true
                // 折叠图标显示在第几列
                ,iconIndex: 1
                // 设定id的字段名
                ,idName:"id"
                //设定pid的字段名，children形式数据不需要
                , pidName:'parent_id'
                //自定义默认展开的字段名
                ,openName:'name'
            },
            cols: null
        },

        //设置表格渲染的核心参数 url和表头信息,url参数
        set_table_data: function (url, cols, para) {
            layui_table_tree.table_para.url = url;
            layui_table_tree.table_para.cols = cols;
            layui_table_tree.table_para.para = para;
        },
        //设置表格渲染的核心参数 url和表头信息,url参数,tree显示设置
        set_table_data_tree: function (url, cols, para,tree) {
            layui_table_tree.table_para.url = url;
            layui_table_tree.table_para.cols = cols;
            layui_table_tree.table_para.para = para;
            layui_table_tree.table_para.tree = tree;
        },
        //更新表格的参数
        update_table_para:function(para){
            if(para!=null){
                for(var key in para){
                    layui_table_tree.table_para[key]=para[key];
                }
            }
        },
        //通过设置的url与参数相关信息,加载tree展示需要的数据
        load_tree_data(para){
            layui_table_tree.update_table_para(para);
            var url=layui_table_tree.table_para.url;
            var para=layui_table_tree.table_para.para;

            $.ajaxSettings.async=false;
            $.getJSON(url, para,function (o) {
                if (o.code == 0) {
                    layui_table_tree.table_para.data=o.data;
                }
            });
            $.ajaxSettings.async=true;

        },
        //表格渲染
        table_render: function () {
            layui_table_tree.tableins = layui.treeTable.render(layui_table_tree.table_para);
        },
        //加载表格数据并渲染
        table_load_render:function(para){
            layui_table_tree.load_tree_data(para);
            layui_table_tree.table_render();
        },

        //表格搜索  search_para: 请求的参数
        search: function (search_para) {
            layui_table_tree.table_para.para=search_para;
            layui_table_tree.table_load_render();
        },
        // 展开全部
        expandAll:function(){
            layui_table_tree.tableins.expandAll();
        },
        //  折叠全部
        foldAll:function(){
            layui_table_tree.tableins.foldAll();
        },

        //取消复选框 父元素到子元素的联动
        closeCheckboxParentLinkage:function () {
            var nullFunc=function(){
            };
            layui_table_tree.tableins.__proto__.checkSubCB=nullFunc;
        },
        //取消复选框 全部父子联动
        closeCheckboxAllLinkage:function () {
            var nullFunc=function(){
            };
            layui_table_tree.tableins.__proto__.checkSubCB=nullFunc;
            layui_table_tree.tableins.__proto__.checkParentCB=nullFunc;
        },

        //设置点击表格行,进行选中
        click_line_checked: function () {
            // 监听行单击事件
            layui.treeTable.on('row(table_div)', function(obj){
                var tr=obj.tr;
                var input= tr.children().eq(0).find("input").next('.layui-form-checkbox')
                var input_radio= tr.children().eq(0).find("input").next('.layui-form-radio');
                input.click()
                input_radio.click();
            });
        },

        //获取当前选中行的数据
        get_checked_data: function () {
            return layui_table_tree.tableins.checkStatus()
        },
        //获取当前选中行的数据的id
        get_checked_data_id: function () {
            var table_data = layui_table_tree.get_checked_data();
            return paraGetId(table_data);
        },
        //要求选中一条数据,且返回id
        selectOne: function () {
            var table_data = layui_table_tree.get_checked_data();
            if (table_data == null) {
                layer.msg("无法获取选中数据", {icon: 2});
                return null;
            }
            if (table_data.length != 1) {
                if (table_data.length == 0) {
                    layer.msg("至少要选中一条数据", {icon: 2});
                } else {
                    layer.msg("只能选择一条数据", {icon: 2});
                }
                return null;
            }
            var one_id = paraGetOneId(table_data);
            if (one_id == null) {
                layer.msg("无法获取选中行id", {icon: 2});
                return null;
            }
            return one_id;
        },

        //要求选中多条数据,且返回id
        selectMany: function () {
            var table_data = layui_table_tree.get_checked_data();
            if (table_data == null) {
                layer.msg("无法获取选中数据", {icon: 2});
                return null;
            }
            if (table_data.length < 1) {
                layer.msg("至少要选中一条数据", {icon: 2});
                return null;
            }
            var many_id = paraGetId(table_data);
            if (many_id == null) {
                layer.msg("无法获取选中行id", {icon: 2});
                return null;
            }
            return many_id;
        },
        //设置选中
        setChecked:function (ids) {
            layui_table_tree.tableins.setChecked(ids)
        }
    }

• 引用到的方法 paraGetOneId和paraGetId

//获取字面量数组的第一个id项
function paraGetOneId(para) {
    if (para.length == 0) {
        return null;
    } else {
        var temp = para[0];
        return temp.id;
    }
}

//获取字面量数组的id项
function paraGetId(para) {
    var ids = [];
    if (para.length == 0) {
        return null;
    }
    for (var i = 0; i < para.length; i++) {
        ids.push(para[i].id)
    }
    return ids;
}

4. 页面使用

    
    
    
    
    <#include "../../common/header.html">




    
    

        
        

            

                

                    

                        
                    
                    
                
            
        
        

            

                

                    

                        

                            

                                
                                    
                                    确定
                                
                                
                                    
                                    取消
                                
                            
                            

                                

                                    
                                
                                

                                    
                                
                                
                            
                        
                    
                
                
            
        
    


<#include "../../common/layui_init.html">


<#include "../../common/footer-inner.html">

5.展示效果

• 待补充

6.还需完善的地方

• 暂不能实现一个页面展示两个表格.因为创建的是同一个表格对象
• 在表格文本比较长的时候,可能会没有原table的省略效果,造成表格样式出错.暂时的解决方法是在col上增加style:' overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'