利用ztree实现树形表格

最新推荐文章于 2021-06-07 15:37:45 发布
最新推荐文章于 2021-06-07 15:37:45 发布
阅读量8.8k 收藏 10
点赞数 4
分类专栏： Java Web 文章标签： ztree ztree表格 树形表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013257679/article/details/78109986
版权

最近公司的项目中要做一个树形表格，因为之前一直在用ztree实现基本的树形结构，理所当然的首先想到利用ztree来做。
网上找了一下别人做的树形表格，有使用ztree的，也有使用treeTable的，但效果都不太好，于是参考使用ztree的做法自己做了一个，贴出来供大家参考，请看注释说明，效果如下所示。

这里写图片描述

<!DOCTYPE HTML>
<html>
    <head>
    <link href="https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js"></script>
<style>
    body {
        overflow: auto;
    }

    .ztree *{
        font-family: "微软雅黑","宋体",Arial, "Times New Roman", Times, serif;
    }

    .ztree {
        padding: 0;
        border-left: 1px solid #E3E3E3;
        border-right: 1px solid #E3E3E3;
        border-bottom: 1px solid #E3E3E3;
    }

    .ztree li a {
        vertical-align: middle;
        height: 32px;
        padding: 0px;
    }

    .ztree li > a {
        width: 100%;
    }

    .ztree li a.curSelectedNode {
        padding-top: 0px;
        background-color: #FFE6B0;
        border: 1px #FFB951 solid;
        opacity: 1;
        height: 32px;
    }

    .ztree li ul {
        padding-left: 0px
    }

    .ztree div.divTd span {
        line-height: 30px;
        vertical-align: middle;
    }

    .ztree div.divTd {
        height: 100%;
        line-height: 30px;
        border-top: 1px solid #E3E3E3;
        border-left: 1px solid #E3E3E3;
        text-align: center;
        display: inline-block;
        color: #6c6c6c;
        overflow: hidden;
    }

    .ztree div.divTd:first-child {
        text-align: left;
        text-indent: 10px;
        border-left: none;
    }

    .ztree .head {
        background: #E8EFF5;
    }

    .ztree .head div.divTd {
        color: #393939;
        font-weight: bold;
    }

    .ztree .ck{
        padding: 0 5px;
        margin: 2px 3px 7px 3px;
    }

    li:nth-child(odd){
        background-color:#F5FAFA;
    }

    li:nth-child(even){
        background-color:#FFFFFF;
    }
</style>
    </head>
    <body>
        <div class="layer">
            <div id="tableMain">
                <ul id="dataTree" class="ztree">

                </ul>
            </div>
        </div>

    </body>
</html>
<script type="text/javascript">
var newOpen =null;
$(function () {
    //初始化数据
    var data = [{"id":"20170525091439001010","name":"企业注册","pId":null,"status":"1","typecode":"02"},{"id":"20170724174119005610","name":"部门沟通演练","pId":"20170525091439001010","status":"1","typecode":"2"},{"id":"20170725085455000110","name":"测试12","pId":null,"status":"1","typecode":"11"},{"id":"20170731171011000410","name":"审批流程","pId":null,"status":"1","typecode":"222"},{"id":"20170803133941018010","name":"单位登记","pId":null,"status":"1","typecode":"188"},{"id":"20170804085419000110","name":"模拟","pId":null,"status":"1","typecode":"122"},{"id":"20170809090321000110","name":"审批模拟（新）测试测试测试测试测试","pId":"20170525091439001010","status":"1","typecode":"110"},{"id":"20170809105407009210","name":"测测测测测测测测测测测测测测测测测测","pId":"20170809090321000110","status":"1","typecode":"123"},{"id":"20170814183837000210","name":"企业登记","pId":null,"status":"1","typecode":"111"},{"id":"20170822183437000710","name":"单事项-部门沟通","pId":"20170814183837000210","status":"1","typecode":"822"},{"id":"20170922112245000510","name":"23","pId":null,"status":"1","typecode":"03"},{"id":"20170922143810000010","name":"sdfa","pId":null,"status":"1","typecode":"04"},{"id":"20170922145203000110","name":"64526","pId":null,"status":"1","typecode":"34262"},{"id":"20170922155403001610","name":"333","pId":null,"status":"1","typecode":"33354"},{"id":"20170922171750000210","name":"4441234","pId":null,"status":"1","typecode":"44444"},{"id":"20170925160636007410","name":"测试数据","pId":"20170731171011000410","status":"1","typecode":"231"},{"id":"20170925163306007510","name":"23462111","pId":null,"status":"1","typecode":"2345"},{"id":"20170925163959007610","name":"242345","pId":"20170922112245000510","status":"1","typecode":"3625346"}];
    queryHandler(data);
});

var setting = {
    view: {
        showLine: false,
        addDiyDom: addDiyDom,
    },
    data: {
        simpleData: {
            enable: true
        }
    }
};
/**
 * 自定义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 + "_span");
    aObj.attr('title', '');
    aObj.append('<div class="divTd swich fnt" style="width:60%"></div>');
    var div = $(liObj).find('div').eq(0);
    //从默认的位置移除
    switchObj.remove();
    spanObj.remove();
    icoObj.remove();
    //在指定的div中添加
    div.append(switchObj);
    div.append(spanObj);
    //隐藏了层次的span
    var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
    switchObj.before(spaceStr);
    //图标垂直居中
    icoObj.css("margin-top","9px");
    switchObj.after(icoObj);
    var editStr = '';
    //宽度需要和表头保持一致
    editStr += '<div class="divTd" style="width:20%">' + (treeNode.typecode  == null ? '' : treeNode.typecode ) + '</div>';
    editStr += '<div class="divTd" style="width:10%">' + (treeNode.status == '1' ? '有效' : '无效' ) + '</div>';
    editStr += '<div class="divTd" style="width:10%">' + opt(treeNode) + '</div>';
    aObj.append(editStr);
}

//初始化列表
function queryHandler(zTreeNodes){
    //初始化树
    $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
    //添加表头
    var li_head = ' <li class="head"><a><div class="divTd" style="width:60%">类型名称</div><div class="divTd" style="width:20%">类型编码</div>' +
        '<div class="divTd" style="width:10%">是否有效</div><div class="divTd" style="width:10%">操作</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>')
    }
}

function opt(treeNode) {
    var htmlStr = '';
    htmlStr += '<input type="button" class="ck" onclick="doEdit(\'' + treeNode.tId + '\',\'' + treeNode.id + '\')" value="编辑"/>';
    htmlStr += '<input type="button" class="ck" onclick="doDelete(\'' + treeNode.tId + '\',\'' + treeNode.id + '\', \'' + treeNode.name + '\')" value="删除"/>';
    return htmlStr;
}

//应要求把新增、修改和删除的代码加上来，仅供参考，因为有些控件是我们自己的，不能调用
function add(){
	var url = "/test/newSub.do";
	if(newOpen==null){
		newOpen = new openNewWindow();
	}
	newOpen.clearParam();
	var treeObj = $.fn.zTree.getZTreeObj("dataTree");
	var nodes = treeObj.getSelectedNodes();
	if (nodes.length>0) {
		var node = nodes[0];
		newOpen.addParam("ptypecode",node.typecode);
		newOpen.addParam("parentid",node.id);
		newOpen.addParam("layer",node.level+1);
	}
	newOpen.popUp(url,{id:"c_view",title:"添加节点",callback:"query",width:500,height:265});
}

function doEdit(tId, id){
	var url = "/test/newEdit.do";
	if(newOpen==null){
		newOpen = new openNewWindow();
	}
	newOpen.clearParam();
	var treeObj = $.fn.zTree.getZTreeObj("dataTree");
	var node = treeObj.getNodeByTId(tId);
	var pnode = node.getParentNode();
	if(pnode!=null){
		newOpen.addParam("ptypecode",pnode.typecode);
		newOpen.addParam("parentid",pnode.id);
	}
	newOpen.addParam("id",id);
	newOpen.popUp(url,{id:"c_view",title:"节点修改",callback:"query",width:500,height:265}); 
}

function doDelete(tId, id,typecode, name){
	var treeObj = $.fn.zTree.getZTreeObj("dataTree");
	var node = treeObj.getNodeByTId(tId);
	if(node.check_Child_State>=0){	//如果有多个子节点,不允许删除,否则子节点将找不到父节点造成混乱(check_Child_State: -1:不存在子节点 或 子节点全部设置为 nocheck = true)
		alert("该节点存在子节点，不能删除!");
		return false;
	}
	if(confirm("是否删除 ["+name+"]?")){ 
		var url = "/test/delete.do";
		var params = {"id":id,"typecode":typecode};
		$.post(url,params,function(){
			alert("删除成功！")
			query();
		})
	}
}

function query(typecode, typename, status) {
	var type = $("#type").val();
    queryJSON("test",queryHandler,{typecode:typecode, typename:typename, status:status, type:type},-1)
}

</script>
阿文施瓦辛格
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
Ztree树形展示
无发可脱
10-20 5027
Ztree 是一种树形展示，当你用新型前端框架的时候，你就意味着要学习他的树形展示，但是Ztree它单独自成一体，这样就不用总是学习别的树形展示了，学会Ztree，可以通用； 优点： 1.优异的性能 2.灵活的配置 3.多种功能的组合 适合项目开发 1.树状菜单 2.树状数据的Web显示 3.权限管理等等。 特点： ● zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 ...
zTree-两种数据格式的使用
最新发布
zhouyuzym的博客
07-31 307
这里只是简单说明了zTree这种jQuery插件的两种数据格式，更多详细的属性可参考官方文档。zTree-API文档t=N7T8zTree-API文档https://docs.caacle.com/zTree_v3/api/API_cn.html。
ztree实现表格风格的树状结构
热门推荐
duqian42707的博客
10-21 4万+
本文地址：http://blog.csdn.net/duqian42707/article/details/52886220先来一张完成图:原理很简单：利用zTree的addDiyDom方法，自定义每个DOM节点，在原来的节点后面加一些div，再利用css样式使它看起来像个表格。 zTree官方api： http://www.treejs.cn/v3/api.php js代码： var
Ztree+treeTable实现 Java实现 树形菜单 树形表格
08-07
Ztree+treeTable实现 Java实现 树形菜单 树形表格 有丰富的实例 和官方开发文档，也有官方api 不懂的可以查询官方api，实现很简单，按照实例做就可以
ztree构造树状结构表格
weixin_43222587的博客
07-29 1099
ztree实现表格风格的树状结构 https://blog.csdn.net/duqian42707/article/details/52886220/
使用zTree控件制作的表格形式的树形+数据菜单
我的笔记
10-21 3万+
测试了一下,兼容ie7以上, chrome opera ff 不使用对方css /*------------------------------------- zTree Style version: 3.4 author: Hunter.z email: hunter.z@263.net website: http://code.google.com/p/jque
表格树zTree
ph_9077的博客
06-04 190
废话不多说，上代码 @Data public class MesDeviceTreeDto implements Serializable { private static final long serialVersionUID = 3158036267336648413L; private String id; private String pId; private String no; private String name; private String type.
jQuery 利用ztree实现树形表格的实例代码
10-19
在本文中，我们将探讨如何使用jQuery和zTree库来实现一个树形表格的实例。zTree是一个基于jQuery的树插件，它提供了丰富的交互性和可定制性，使得创建树形结构变得简单。以下是对实现过程的详细说明： 首先，我们...
表格 树形结构 HTML CSS,基于jQuery ztree实现表格风格的树状结构
weixin_34190683的博客
06-07 783
zTree 简介zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件(MIT 许可证)。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载采用了 延迟加载 技术，上万节点轻松加载，即使在 ...
AngularJS实现树形结构(ztree)菜单示例代码
10-21
运用示例代码给大家详细介绍了利用AngularJS如何实现树形结构(ztree)菜单，文中仅用了几行AngularJS代码就是了这个功能，对大家日常开发很有帮助，有需要的朋友们可以参考借鉴，下面来一起看看吧。
Jquery TreeTable及示例，仿zTree绑定数据方式
08-28
TreeTable示例，允许自定义table样式，自定义td数量及内容，仿zTree动态绑定数据
bootstrap+ztree+table
11-18
利用ztree实现树形表格,bootstrap+ztree+table,ztree表格
Jquery TreeTable及示例，仿zTree绑定数据方式，亲测能用
01-06
Jquery TreeTable及示例，仿zTree绑定数据方式，亲测能用
基于jQuery ztree实现表格风格的树状结构
12-10
zTree 简介     zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。     zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。 zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON 数据 支持静态 和 Ajax
TreeTableJava实现树形结构表格
07-16
treeTable是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。 优点 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari 接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以 组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等 提供两种风格: 通过参数来设置风格
树表格之 ztree、ligerGrid、dataTables
贵在坚持
08-13 1354
树表格，表格树，就是可以像菜单一样折叠展开的表格。对于具有上下级关系的数据，用表格树展示颇为直观方便。
java ztree treegrid_jQuery zTree 展示树形表格
weixin_39951378的博客
02-16 144
jQuery zTree 展示树形表格基本测试Demo标准数据格式var setting = {//显示复选框check: {enable: true},/*//显示单选框check: {enable: true,chkStyle: "radio",radioType: "level"},*/};var zNodes =[{ name:"父节点1 - 展开", open:true,children...
使用jQuery zTree创建树形菜单教程
"jQuery zTree加载树形菜单功能" jQuery zTree 是一个基于 jQuery 的插件，专门用于构建功能丰富的树形结构菜单。...通过深入理解和实践，你将能够轻松地利用 zTree 实现各种复杂的树形结构需求。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值