树表格之 ztree、ligerGrid、dataTables

最新推荐文章于 2024-08-10 08:07:15 发布

爱游戏爱动漫的肥宅

最新推荐文章于 2024-08-10 08:07:15 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签：表格树树表格 ztree ligerGrid dataTables

本文链接：https://blog.csdn.net/Alias_fa/article/details/99483198

版权

本文对比分析了ztree、ligerGrid和dataTables这三个表格树插件，探讨了它们在样式控制、逻辑处理和灵活性上的差异。ztree的主列样式受限，但从列可定制；dataTables提供了高度灵活性，但图标位置可能不自然；ligerGrid在主列和从列的控制上都很灵活，但表头对齐存在问题。完整代码可在指定链接获取。

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

树表格，表格树，就是可以像菜单一样折叠展开的表格。对于具有上下级关系的数据，用表格树展示颇为直观方便。
最近对 ztree、ligerGrid、dataTables三个插件进行了一番研究。主要对比了它们对于各列各行数据的样式、逻辑的可控程度、灵活程度。
首先声明一下：在本文中，能进行伸缩有层级关系的列称为主列，其他称为从列，如下图
在这里插入图片描述
本文没有列出全部代码，只有部分片段，需要完整代码可前往https://gitee.com/willbebetter/table_tree_demo免费下载
样式比较丑，如果真要用的话，相信各位朋友可以写出自己满意的样式
下面开始正题

ztree

先看 demo 吧
1）可以给主列加样式，需设置 nameIsHTML 为 true，并且我试了 < a > 和 < div >标签是会解析出问题的，从列可以用任意标签。
2）因为主列是直接解析数据展现出来的，我没找到可以控制主列的显示逻辑的方法，比如可写个判断，主列的地区全部显示黑色，但是企业显示蓝色（这种效果可以通过在每个对象name属性加上一个class来控制）。从列是可以的，比如本例中判断电话是否为空，分别处理。
3）主列也没办法单独绑定click事件，可以用回调函数 onClick，但是这样的话，绑定的是整行，无论点该行的哪里，都会触发该事件。从列可以通过嵌入的html给单独的列进行绑定。
在这里插入图片描述

初始化表头

		//初始化列表
        zTreeNodes = data;
        //初始化树
        var treeObj = $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
       // treeObj.expandAll(true); //展开/折叠所有节点
        //添加表头
        var li_head = ' <li class="head"><a><div class="diy">企业名称</div><div class="diy">企业地址</div><div class="diy">联系人</div>' +
            '<div class="diy">联系方式</div><div class="diy">操作</div></a></li>';
        var rows = $("#dataTree").find('li');
        if (rows.length > 0) {
   
            rows.eq(0).before(li_head)
        } else {
   
            $("#dataTree").append(li_head);
            $("#dataTree").append('<li ><div style="text-align: center;line-height: 30px;" >无符合条件数据</div></li>')
        }

参数设置

var zTreeNodes;
    var setting = {
   
        view: {
   
            showLine: false,
            showIcon: false,
            nameIsHTML: true,  //为了给主列搞点花样，把这个属性找出来了，功能如同属性名，把主列属性值解析为html，默认为false
            					//但是不能使用<div>和<a>标签，会和插件冲突。我测试中用的是<span>，但是好像不能用class和id绑定事件
            addDiyDom: addDiyDom	//自定义节点显示方式
        },
        data: {
   
            simpleData: {
   
                enable: true
            },
            key: {
   
            	name: "name",  //指定主列的属性，默认为 name
            	url: "baiduUrl"  //指定跳转路径属性，单击触发，单机该行的任意单元格都可触发，不管有无数据；默认是对象中的url属性
            }
         },
        callback: {
   
        	//onClick: dblClick
        	onDblClick: dblClick  //这里的单击和双击都是整行生效的，该行的任意地方都可触发，不管有无数据；
         }
    };
    /**
     * 自定义DOM节点
     */
    function addDiyDom(treeId, treeNode) {
   
        var spaceWidth = 15;
        var liObj = $("#" + treeNode.tId);
        var aObj = $("#" + treeNode.tId + "_a");
        var switchObj = $("#" + treeNode.tId + "_switch");
        var icoObj = $("#" + treeNode.tId + "_ico");
        var spanObj = $("#" + treeNode.tId +