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

作者: 东本三月 | 来源:发表于2020-01-24 15:34 被阅读0次

Layui第三方组件 treetable-lay的使用与封装
layui中formSelects多选组件使用
layui第三方插件layui-excel的用法
layui table的使用与封装
封装element-ui的dialog组件
layUI之树状表格异步加载组件treetableAsync.j
在vue中如何优雅的封装第三方组件
element-ui 封装dialog组件
vue插件介绍
React(React-Redux)

来源: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.引用

<!-- layui的样式包 -->
<link rel="stylesheet" href="${request.contextPath}/skins/layui/css/layui.css" media="all"/>

<!-- layui的js,模块化使用 -->
<!--<script type="text/javascript" src="${request.contextPath}/skins/layui/layui.js"></script>-->

<!--layui的js,可非模块化 -->
<script type="text/javascript" src="${request.contextPath}/skins/layui/layui.all.js"></script>

<!-- 基于layui的树状表格 1.0 -->
<!--<link rel="stylesheet" href="${request.contextPath}/skins/layui/treetable-lay/treetable.css" media="all"/>-->
<!--<script type="text/javascript" src="${request.contextPath}/skins/layui/treetable-lay/treetable.js"></script>-->

<!-- 基于layui的树状表格 2.0 -->
<link rel="stylesheet" href="${request.contextPath}/skins/js/treeTable/treeTable.css" media="all"/>
<script type="text/javascript" src="${request.contextPath}/skins/js/treeTable/treeTable.js"></script>

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. 页面使用

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="always" name="referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <#include "../../common/header.html">
</head>
<body>
<!--最外面的灰底框,用于与ifram区别开-->
<div class="col-xs-12 lightgray_div">
    <!--白底框-->
    <div class="col-xs-12 white_div">
        <!--搜索框-->
        <div class="col-xs-12 search_div">
            <div class="input-group g-fr">
                <form id="inquire" class="form-inline ">
                    <div class="input-group ">
                        <input type="text" class="form-control" id="name" name="name" placeholder="角色名称">
                    </div>
                    <button type="button" class="layui-btn" style="height: 30px"  id="btn_search" onclick="table_func.search()"><i
                            class="layui-icon layui-icon-search"></i></button>
                </form>
            </div>
        </div>
        <div class="col-xs-12" style="overflow:auto  " >
            <div>
                <div class="layui-table-tool" style="margin-bottom: -11px;margin-top: 10px">
                    <div class="layui-table-tool-temp">
                        <div style="margin-bottom: -5px">
                            <div class="layui-btn-container " style="float: left;">
                                <button class="layui-btn " onclick="table_func.saveRoleInfo()">
                                    <i class="layui-icon layui-icon-ok"></i>
                                    确定
                                </button>
                                <button class="layui-btn layui-btn-normal" onclick="table_func.cancel()">
                                    <i class="layui-icon layui-icon-close"></i>
                                    取消
                                </button>
                            </div>
                            <div class="layui-table-tool-self">
                                <div class="layui-inline" title="展开所有" lay-event="LAYTABLE_COLS" onclick="table_func.expandAll()" >
                                    <i class="layui-icon layui-icon-triangle-d"></i>
                                </div>
                                <div class="layui-inline" title="折叠所有" lay-event="LAYTABLE_EXPORT" onclick="table_func.foldAll()"  id="">
                                    <i class="layui-icon layui-icon-template-1"></i>
                                </div>
                                <!--<div class="layui-inline" title= lay-event="LAYTABLE_PRINT"><i class="layui-icon layui-icon-print"></i></div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <table id="table_div" lay-filter="main"></table>
            </div>
        </div>
    </div>
</div>
</body>
<#include "../../common/layui_init.html">
<!--表格工具类的按钮-->
<script type="text/javascript">
    //树状表格 表头
    var cols = [
        // {type: 'checkbox'}
        {field: 'id', title: 'id', sort: true, type: 'checkbox', fixed: 'left'}
        , {field: 'name', width:"25%" ,title: '角色名称',style:' overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'}
        , {field: 'code',width:"15%", title: '角色别名'}
        // , {field: 'parent_ids', title: '父级'}
        , {field: 'orderno', title: '排序号'}
        , {field: 'level', title: '层级'}
        , {field: 'remark', title: '备注'}
        , {field: 'remark', title: '备注'}
        , {
            field: 'gmt_create', title: '创建时间'
            , templet: function (col) {
                return layui_table.date_format(col.gmt_create, "yyyy-MM-dd hh:mm:ss")
            }
        },
        {
            field: 'gmt_create', title: '修改时间'
            , templet: function (col) {
                return layui_table.date_format(col.gmt_modified, "yyyy-MM-dd hh:mm:ss")
            }
        }
    ]
    //页面要用的方法
    table_func = {
        //表格初始化
        init: function () {
            layui_table_tree.set_table_data("${request.contextPath}/role/getAll",cols,$("#inquire").serialize())
            layui_table_tree.table_load_render();
        },
        //搜索
        search: function () {
            layui_table_tree.search($("#inquire").serialize())
        },
        //保存
        saveRoleInfo: function () {
            var ids=layui_table_tree.get_checked_data_id();

            $.getJSON("${request.contextPath}/user/saveRoleInfo", {userId:"${userId!?html}",roleIds:ids}, function (o) {
                if(layui_layer.ajax_verify(o)){
                    var data=o.data;
                    table_func.cancel();
                }
            });
        },
        //取消
        cancel: function () {
            var index=parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        },
        load:function(){
            $.getJSON("${request.contextPath}/role/getRoleIdByUserId", {userId:"${userId!?html}"}, function (o) {
                if(layui_layer.ajax_verify_not_success_hint(o)){
                    var data=o.data;
                    layui_table_tree.setChecked(data);
                }

            });
        },
        // 展开全部
        expandAll:function(){
            layui_table_tree.expandAll();
        },
        //  折叠全部
        foldAll:function(){
            layui_table_tree.foldAll();
        }
    }
    $(function () {
        //回车点击事件 搜索
        enter_event.event_search_click();
        //树状表格渲染
        table_func.init();
        //取消 父复选框到子复选框的联动
        layui_table_tree.closeCheckboxAllLinkage();
        //设置点击表格行,进行选中
        layui_table_tree.click_line_checked()
        table_func.load();
    });
</script>
<#include "../../common/footer-inner.html">
</html>

5.展示效果

待补充

6.还需完善的地方

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

Layui第三方组件 treetable-lay的使用与封装
来源:https://gitee.com/whvse/treetable-lay 官方演示:https://whv...
layui中formSelects多选组件使用
layui中formSelects多选组件使用日记一、下载引用 1、下载在layui 第三方组件平台下...
layui第三方插件layui-excel的用法
layui第三方插件layui-excel的用法一. layui-excel模块化想到使用layui-exce...
layui table的使用与封装
1.版本与封装方式 layui-v2.5.4 出于需求的需要,未使用官方所推荐的layui.use()相关方式进行...
封装element-ui的dialog组件
封装组件：使用封装的组件：
layUI之树状表格异步加载组件treetableAsync.j
概述后台框架中使用树状表格是非常常用的操作，layUI本身并没有这种组件。第三方的treetable.js做到...
在vue中如何优雅的封装第三方组件
在使用第三方组件的时候或多或少的会因为样式，业务不符合自己的需求进而进行封装。是否你也会有这样的困扰。封装业务组件...
element-ui 封装dialog组件
封装组件：使用组件：
vue插件介绍
插件和组件的关系在没有封装组件之前，如果不使用第三方插件，那么很多情况下我们会编写几个常用的组件来提供给页面使用...
React(React-Redux)
React-Redux是一个封装好的第三方库它主要封装了两方面的功能 connect：连接容器组件与傻瓜组件 Pr...