怎么建立打卡小程序_基于jQuery ztree完成表格风格

发布时间:2021-01-08 12:59 作者:jianzhan

摘要: 根据jQuery ztree完成报表设计风格的树形结构构造 zTree 是一个借助 jQuery 完成的智能 “树软件”,zTree 是开源系统完全免费的手机软件。接下去根据文中给大伙儿详细介绍根据jQue

基于jQuery ztree实现表格风格的树状结构       zTree 是一个依靠 jQuery 实现的多功能 “树插件”,zTree 是开源免费的软件。接下来通过本文给大家介绍基于jQuery 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样式使它看起来像个表格。

 

zTree官方api:

下面是完整代码(更新于 )

<:

 !DOCTYPE html 
 html lang="zh-CN" 
 head 
 meta charset="UTF-8" 
 title Demo by dq /title 
 meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9;IE=8;"/ 
 !--引入文件: 1、zTree默认css样式 2、jquery 3、zTree js-- 
 link href="zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css" rel="external nofollow" rel="stylesheet" 
 script src="jquery/3.2.1/jquery.min.js" /script 
 script src="zTree.v3/3.5.29/js/jquery.ztree.all.min.js" /script 
 /head 
 style 
 /*按钮*/
 .icon_div {
 display: inline-block;
 height: 25px;
 width: 35px;
 background: mon/toolbar/images/f_icon.png) no-repeat 12px -127px;
 .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 a.curSelectedNode {
 padding-top: 0px;
 background: none;
 height: auto;
 border: none;
 cursor: default;
 opacity: 1;
 .ztree li ul {
 padding-left: 0px
 .ztree div.diy span {
 line-height: 30px;
 vertical-align: middle;
 .ztree div.diy {
 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 div.diy:first-child {
 text-align: left;
 text-indent: 10px;
 border-left: none;
 .ztree .head {
 background: #5787EB;
 .ztree .head div.diy {
 border-top: none;
 border-right: 1px solid #CDD2D4;
 color: #fff;
 font-family: "Microsoft YaHei";
 font-size: 14px;
 /*end--ztree表格*/
 /style 
 body 
 div 
 div id="tableMain" 
 ul id="dataTree" 
 /ul 
 /div 
 /div 
 script 
 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 = $("#" + 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 /div 
 var div = $(liObj).find('div').eq(0);
 switchObj.remove();
 spanObj.remove();
 icoObj.remove();
 div.append(switchObj);
 div.append(spanObj);
 var spaceStr = " span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px' /span 
 switchObj.before(spaceStr);
 var editStr = '';
 editStr += ' div ' + (treeNode.CONTACT_USER == null ' nbsp;' : treeNode.CONTACT_USER) + ' /div 
 var corpCat = ' div title="' + treeNode.CORP_CAT + '" ' + treeNode.CORP_CAT + ' /div 
 editStr += ' div ' + (treeNode.CORP_CAT == '-' ' nbsp;' : corpCat ) + ' /div 
 editStr += ' div ' + (treeNode.CONTACT_PHONE == null ' nbsp;' : treeNode.CONTACT_PHONE ) + ' /div 
 editStr += ' div ' + formatHandle(treeNode) + ' /div 
 aObj.append(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},{"CONTACT_USER":"111","SECTOR_NAME":"test","addFlag":true,"CONTACT_PHONE":"222","SECTOR_ID":29,"ORG_ID":1,"id":"s29","pId":"s2","name":"test","modFlag":true,"PARENT_ID":2,"CORP_CAT":"港口-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"22","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":38,"ORG_ID":1,"id":"s38","pId":"o1","name":"22","modFlag":true,"PARENT_ID":null,"CORP_CAT":"-","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},{"CONTACT_USER":"11","SECTOR_NAME":"11","addFlag":true,"CONTACT_PHONE":"","SECTOR_ID":145,"ORG_ID":1,"id":"s145","pId":"s1","name":"11","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-集装箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":"ff","SECTOR_NAME":"fff","addFlag":true,"CONTACT_PHONE":"11","SECTOR_ID":146,"ORG_ID":1,"id":"s146","pId":"s1","name":"fff","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-油码头","TYPE":"sector","delFlag":true},{"CONTACT_USER":"1","SECTOR_NAME":"1","addFlag":true,"CONTACT_PHONE":"1","SECTOR_ID":161,"ORG_ID":1,"id":"s161","pId":"o1","name":"1","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化气","TYPE":"sector","delFlag":true}];
 //初始化列表
 zTreeNodes = data;
 //初始化树
 $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
 //添加表头
 var li_head = ' li a div 名称 /div div 联系人 /div div 主管行业 /div ' +
 ' div 联系方式 /div div 操作 /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 无符合条件数据 /div /li ')
 * 根据权限展示功能按钮
 * @param treeNode
 * @returns {string}
 function formatHandle(treeNode) {
 var htmlStr = '';
 htmlStr += ' div a title="查看" href="javascript:view(\'' + treeNode.id + '\')" rel="external nofollow" /a /div 
 htmlStr += ' div a title="修改" href="javascript:edit(\'' + treeNode.id + '\')" rel="external nofollow" /a /div 
 htmlStr += ' div a title="添加子部门" href="javascript:addSector(\'' + treeNode.id + '\')" rel="external nofollow" /a /div 
 htmlStr += ' div a title="删除" href="javascript:del(\'' + treeNode.id + '\')" rel="external nofollow" /a /div 
 return htmlStr;
 $(function () {
 //初始化数据
 query();
 /script 
 /body 
 /html 

总结

以上所述是小编给大家介绍的基于jQuery ztree实现表格风格的树状结构,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


  • 【H5实例共享】H5实例201

    原题目:【H5实例共享】H5实例2017大合集第一2波-【腾迅】 忽然来临的雪 把小五冻了个猝不及防 吓得小五赶快又戴到了被遗弃的围脖酱 路滑又害怕走快 体态宛如一只腾迅企鹅 (这里需

  • 网易游戏“社会学气场”

    社交媒体贷币定义源于《疯传:给你的商品、观念、个人行为像病毒感染一样侵入》,通俗化的说便是在社交媒体关联链中来源于别人的关心、认可。 大家乐在其中地耗费专业知识贮备

  • WorldFirst:第三方收付款服务

    原题目:WorldFirst:第三方收付款服务是最合适我国中小型商家的收付款方法 8月6日,小语种专业销售市场法语第一电子商务服务平台“Cdiscount”大中华民族区的第一场官方网招商合作会

  • H5页面中大标题字体推荐?

    如图所示,求H5网页页面,banner图上字体样式装饰设计性强合适更新改造用以大标底字体样式强烈推荐 [照片] [照片] [照片] [照片] [照片]

    这一排版设计有点儿太乱了吧,一般设计方

  • 携程网手机端特性提升

    》文章内容第一一部分:构架演变,11 月份创作者在 CSDN 上公布了《》。此篇章是在这里几篇文章内容基本勤奋行小结的有关携程网手机端特性提升的别的內容,包含 Hybrid 架构提升、互