jQuery 利用ztree实现树形表格的实例代码

2024-12-01 08:25:07

最近公司的项目中要做一个树形表格，因为之前一直在用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="external nofollow" 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;
}

总结

以上所述是小编给大家介绍的jQuery 利用ztree实现树形表格的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

在AngularJS中使用jQuery的zTree插件的方法

前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么. jQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件. AngularJS 功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于 directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能. 因此,花了一点时间
Jquery zTree 树控件异步加载操作

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件兼容 IE.FireFox.Chrome 等浏览器在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一次性静态生成和 Ajax 异步加载两种方式支持多种事件响应及反馈支持 Tree 的节点移动.编辑.删除支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能简单的参数配置实现灵活多变的功能异步加载的意思就是: 当点
多功能jQuery树插件zTree实现权限列表简单实例

zTree 是一个依靠jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree官网 zTreeAPI下载链接页面主要引入一下几个文件: <link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" /> <script type="text/javascript&q
jquery zTree异步加载、模糊搜索简单实例分享

本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:
jQuery使用zTree插件实现树形菜单和异步加载

本文实例讲解了jQuery使用zTree插件实现树形菜单和异步加载,并且可以进行编辑,分享给大家供大家参考,具体内容如下效果图: 一.HTML代码 <html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <l
jQuery zTree加载树形菜单功能

由于项目中需要设计树形菜单功能,于是百度找相关资料,发现zTree方面的资料不少,觉得挺不错,而且zTree官方也有API文档,介绍的非常详细,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 2.zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 3.采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本
jQuery树形控件zTree使用小结

0 zTree简介树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 zTree的特点 •最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.
JQuery ztree 异步加载实例讲解

本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 准备工作: 1下载 JQuery ZTree 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-INF/lib下即可. 代码实例: index.jsp <%@ page language="jav
jquery ztree实现树的搜索功能

本文实例分享了jquery ztree实现树的搜索功能,供大家参考,具体内容如下 var userZTree; var userSetting={ check: { enable: true, chkStyle: "radio", chkboxType : {"Y" : "" , "N" : ""}, radioType: "all" }, data: { simpleData: { e
jquery ztree实现模糊搜索功能

本文分享了jquery ztree实现模糊搜索功能两个实例,供大家参考,具体内容如下 ztree官方demo代码里的: 根据参数查找节点以上文件修改成如下代码 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE> <meta http-equiv="con

jQuery 利用ztree实现树形表格的实例代码

相关推荐

随机推荐