2023年6月22日发(作者：)

表格树形结构HTMLCSS,基于jQueryztree实现表格风格的树状结构zTree 简介zTree 是⼀个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最⼤优点。zTree 是开源免费的软件(MIT 许可证)。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进⾏捐助。zTree v3.0 将核⼼代码按照功能进⾏了分割，不需要的代码可以不⽤加载采⽤了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器⽀持 JSON 数据⽀持静态 和 Ajax 异步加载节点数据⽀持任意更换⽪肤 / ⾃定义图标(依靠css)⽀持极其灵活的 checkbox 或 radio 选择功能提供多种事件响应回调灵活的编辑(增/删/改/查)功能，可随意拖拽节点，还可以多节点拖拽哟在⼀个页⾯内可同时⽣成多个 Tree 实例简单的参数配置实现 灵活多变的功能先来⼀张完成图:原理很简单：利⽤zTree的addDiyDom⽅法，⾃定义每个DOM节点，在原来的节点后⾯加⼀些div，再利⽤css样式使它看起来像个表格。下⾯是完整代码(更新于2017-7-30 08:56 )：Demo by dq/*按钮*/.icon_div {display: inline-block;height: 25px;width: 35px;}.icon_div a {display: inline-block;width: 27px;height: 20px;cursor: pointer;}/*end--按钮*//*ztree表格*/.ztree {padding: 0;border: 2px solid #CDD6D5;}.ztree li a {vertical-align: middle;height: 30px;}.ztree li > a {width: 100%;}.ztree li > a,.ztree li ectedNode {padding-top: 0px;background: none;height: auto;border: none;cursor: default;opacity: 1;}.ztree li ul {padding-left: 0px}.ztree span {line-height: 30px;vertical-align: middle;}.ztree {height: 100%;width: 20%;line-height: 30px;border-top: 1px dotted #ccc;border-left: 1px solid #eeeeee;text-align: center;display: inline-block;box-sizing: border-box;color: #6c6c6c;font-family: "SimSun";font-size: 12px;overflow: hidden;}.ztree :first-child {text-align: left;text-indent: 10px;border-left: none;}.ztree .head {background: #5787EB;}.ztree .head {border-top: none;border-right: 1px solid #CDD2D4;color: #fff;font-family: "Microsoft YaHei";font-size: 14px;}/*end--ztree表格*/var zTreeNodes;var setting = {view: {showLine: false,showIcon: false,addDiyDom: addDiyDom},data: {simpleData: {enable: true}}};/*** ⾃定义DOM节点*/function addDiyDom(treeId, treeNode) {var spaceWidth = 15;var liObj = $("#" + );var aObj = $("#" + + "_a");var switchObj = $("#" + + "_switch");var icoObj = $("#" + + "_ico");var spanObj = $("#" + + "_span");('title', '');('var div = $(liObj).find('div').eq(0);();();();(switchObj);(spanObj);var spaceStr = "";(spaceStr);var editStr = '';editStr += '' + (T_USER == null ? ' ' : T_USER) + '';var corpCat = '' + _CAT + '';editStr += '' + (_CAT == '-' ? ' ' : corpCat ) + '';editStr += '' + (T_PHONE == null ? ' ' : T_PHONE ) + '';editStr += '' + formatHandle(treeNode) + '';(editStr);}/*** 查询数据*/function query() {var data = [{"CONTACT_USER":"张三","CONTACT_PHONE":"","addFlag":true,"ORG_ID":1,"id":"o1","pId":"onull","open":true,"name":"单位1","modFlag":true,"CORP_CAT":"港⼝-天然液化⽓,港⼝-液化⽯油⽓","TYPE":"org","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门1","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":1,"ORG_ID":1,"id":"s1","pId":"o1","name":"部门1","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港⼝-天然液化⽓","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门12","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":2,"ORG_ID":1,"id":"s2","pId":"s1","name":"部门12","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港⼝-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门13","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":3,"ORG_ID":1,"id":"s3","pId":"s1","name":"部门13","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港⼝-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门24","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":4,"ORG_ID":1,"id":"s4","pId":"s2","name":"部门24","modFlag":true,"PARENT_ID":2,"CORP_CAT":"港⼝-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门35","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":5,"ORG_ID":1,"id":"s5","pId":"s3","name":"部门35","modFlag":true,"PARENT_ID":3,"CORP_CAT":"港⼝-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门22","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":8,"ORG_ID":1,"id":"s8","pId":"s2","name":"部门22","modFlag":true,"PARENT_ID":2,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门23","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":9,"ORG_ID":1,"id":"s9","pId":"s2","name":"部门23","modFlag":true,"PARENT_ID":2,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":"打撒","SECTOR_NAME":"不爱的是分散","addFlag":true,"CONTACT_PHONE":"1231231","SECTOR_ID":21,"ORG_ID":1,"id":"s21","pId":"o1","name":"不爱的是分散","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港⼝-天然液化⽓","TYPE":"sector","delFlag":true},⼝-集装箱","TYPE":"sector","delFlag":true},","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部门9","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":61,"ORG_ID":1,"id":"s61","pId":"o1","name":"部门9","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港⼝-天然液化⽓","TYPE":"sector","delFlag":true},{"CONTACT_USER":"sara","SECTOR_NAME":"流星⾬","addFlag":true,"CONTACT_PHONE":"","SECTOR_ID":141,"ORG_ID":1,"id":"s141","pId":"s1","name":"流星⾬","modFlag":true,"PARENT_ID":1,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":"流星","SECTOR_NAME":"1级部门","addFlag":true,"CONTACT_PHONE":"","SECTOR_ID":142,"ORG_ID":1,"id":"s142","pId":"o1","name":"1级部门","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港⼝-天然液化⽓","TYPE":"sector","delFlag":true},⼝-集装箱","TYPE":"sector","delFlag":true},⼝-油码头","TYPE":"sector","delFlag":true},⼝-天然液化⽓","TYPE":"sector","delFlag":true}];{"CONTACT_USER":"111","SECTOR_NAME":"test","addFlag":true,"CONTACT_PHONE":"222","SECTOR_ID":29,"ORG_ID":1,"id":"s29","p{"CONTACT_USER":null,"SECTOR_NAME":"22","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":38,"ORG_ID":1,"id":"s38","pId":"o{"CONTACT_USER":"11","SECTOR_NAME":"11","addFlag":true,"CONTACT_PHONE":"","SECTOR_ID":145,"ORG_ID":1,"i{"CONTACT_USER":"ff","SECTOR_NAME":"fff","addFlag":true,"CONTACT_PHONE":"11","SECTOR_ID":146,"ORG_ID":1,"id":"s146","pId{"CONTACT_USER":"1","SECTOR_NAME":"1","addFlag":true,"CONTACT_PHONE":"1","SECTOR_ID":161,"ORG_ID":1,"id":"s161","pId":"o//初始化列表zTreeNodes = data;//初始化树$.($("#dataTree"), setting, zTreeNodes);//添加表头var li_head = '名称联系⼈主管⾏业' +'联系⽅式操作';var rows = $("#dataTree").find('li');if ( > 0) {(0).before(li_head)} else {$("#dataTree").append(li_head);$("#dataTree").append('')}}/*** 根据权限展⽰功能按钮* @param treeNode* @returns {string}*/function formatHandle(treeNode) {var htmlStr = '';htmlStr += '';htmlStr += '';htmlStr += '';htmlStr += '';return htmlStr;}$(function () {//初始化数据query();⽆符合条件数据})总结以上所述是⼩编给⼤家介绍的基于jQuery ztree实现表格风格的树状结构，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对脚本之家⽹站的⽀持！