树表格,表格树,就是可以像菜单一样折叠展开的表格。对于具有上下级关系的数据,用表格树展示颇为直观方便。
最近对 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 +