jquery实现自定义树形表格的方法【自定义树形结构table】


Posted in jQuery onJuly 12, 2019

本文实例讲述了jquery实现自定义树形表格的方法。分享给大家供大家参考,具体如下:

话不多说,直接上代码(本代码仅提供思路):

function createTables(data, t, p) {
    $("#datatable" + t + ' tbody').empty();
    var count = data.length;
    var html = '';
    if (count > 0) {
      for (var i = 0; i < count; i++) {
        var btn = '';
        if(data[i]._child && data[i]._child.length > 0){
          btn = '<i class="layui-icon mt-icon" style="cursor: pointer" data-tid="'+ data[i].category_id +'-'+ data[i].id +'-'+ t +'" data-pid="'+ data[i].category_id +'-'+ data[i].pid +'-'+ t +'"></i> ';
        }else{
          btn = '<i class="mt-icon" style="cursor: pointer" data-tid="'+ data[i].category_id +'-'+ data[i].id +'" data-pid="'+data[i].category_id +'-'+ data[i].pid+'"></i> ';
        }
        html += '<tr style="">' +
          '<td style="text-align: left">'+btn + data[i].name + '(' + data[i].title + ')' + '</td>' +
          '<td>' + (data[i].source_name ? data[i].source_name : '') + '</td>' +
          '<td>' + data[i].show_time + '</td>' +
          '<td>' + dataFormat(data[i].current_record, data[i].unit) + '</td>' +
          '<td>' + dataFormat(data[i].prev_record, data[i].unit) + '</td>' +
          '<td>' + dataFormat(data[i].last_record, data[i].unit) + '</td>' +
          '<td>' + dataFormat(data[i].budget, data[i].unit) + '</td>' +
          '<td>' + dataFormat(data[i].budget_rate, '%') + '</td>' +
          '<td>' + dataFormat(data[i].record_rate) + '</td>' +
          '<td>' + dataFormat(data[i].mom, '%') + '</td>' +
          '<td>' + dataFormat(data[i].yoy, '%') + '</td>' +
          '<td><i class="layui-icon" style="cursor: pointer" onclick="showHiddenArea(this,' + data[i].category_id + ',' + data[i].data_structure_id + ',' + data[i].time_unit + ',' + t + ');"></i></td> ' +
          '</tr>';
        if(data[i]._child && data[i]._child.length > 0){
          html = createNewTable(data[i]._child,html,1,t);
        }
      }
    } else {
      html = '<tr><td colspan="12" style="text-align: center"> 暂无数据 </td></tr>';
    }
    $("#datatable" + t + ' tbody').html(html); // 插入的表格
    initTreeAction(t); // 结构初始化
}
function createNewTable(data,html,y,t)
{
    var counts = data.length;
    var num = ++y;
    for (var i = 0; i < counts; i++) {
      var btn = '';
      var css = '';
      css = 'text-indent:'+ (num * 20) +'px;';
      if(data[i]._child && data[i]._child.length > 0){
        css = 'text-indent:'+ (num==2?20:(num-1) * 20) +'px;';
        btn = '<i class="layui-icon mt-icon" style="cursor: pointer" data-tid="'+ data[i].category_id +'-'+ data[i].id +'-'+ t +'" data-pid="'+data[i].category_id +'-'+ data[i].pid+'-'+ t +'" data-type="dir"></i> ';
      }else{
        btn = '<i class="mt-icon" style="cursor: pointer" data-tid="'+ data[i].category_id +'-'+ data[i].id +'-'+ t +'" data-pid="'+data[i].category_id +'-'+ data[i].pid +'-'+ t +'" data-type="file"></i> ';
      }
      html += '<tr style="display: none">' +
        '<td style="text-align: left; '+ css +'">'+ btn + data[i].name + '(' + data[i].title + ')' + '</td>' +
        '<td>' + (data[i].source_name ? data[i].source_name : '') + '</td>' +
        '<td>' + data[i].show_time + '</td>' +
        '<td>' + dataFormat(data[i].current_record, data[i].unit) + '</td>' +
        '<td>' + dataFormat(data[i].prev_record, data[i].unit) + '</td>' +
        '<td>' + dataFormat(data[i].last_record, data[i].unit) + '</td>' +
        '<td>' + dataFormat(data[i].budget, data[i].unit) + '</td>' +
        '<td>' + dataFormat(data[i].budget_rate, '%') + '</td>' +
        '<td>' + dataFormat(data[i].record_rate) + '</td>' +
        '<td>' + dataFormat(data[i].mom, '%') + '</td>' +
        '<td>' + dataFormat(data[i].yoy, '%') + '</td>' +
        '<td><i class="layui-icon" style="cursor: pointer" onclick="showHiddenArea(this,' + data[i].category_id + ',' + data[i].data_structure_id + ',' + data[i].time_unit + ',' + t + ');"></i></td> ' +
        '</tr>';
      if(data[i]._child && data[i]._child.length > 0){
        html = createNewTable(data[i]._child,html,num,t);
      }
    }
    return html;
}
function showLowData(obj)
{
    var mId = $(obj).attr('data-tid');
    var isOpen = $(obj).hasClass('open');
    if (isOpen) {
      $(obj).removeClass('open');
      if($(obj).hasClass('layui-icon')){
        $(obj).html('');
      }
    } else {
      $(obj).addClass('open');
      if($(obj).hasClass('layui-icon')){
        $(obj).html('');
      }
    }
    $(obj).parents('tbody').find('tr').each(function () {
      var mt = $(this).find('.mt-icon');
      var pid = mt.attr('data-pid');
      var Open = mt.hasClass('open');
      var type = mt.attr('data-type');
      if (mId == pid) {
        if (isOpen) {
          $(this).hide();
          if (type == 'dir' && Open == isOpen) {
            mt.trigger('click');
          }
        } else {
          $(this).show();
        }
      }
    });
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 #jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 #jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 #jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
You might like
用PHP开发GUI
2006/10/09 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
Vue 项目代理设置的优化
2018/04/17 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
python相似模块用例
2016/03/04 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python实现图片拼接的代码
2018/07/02 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python 实现单通道转3通道
2019/12/03 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
读书心得体会
2013/12/28 职场文书
校友会欢迎辞
2014/01/13 职场文书
个人贷款承诺书
2014/03/28 职场文书
12岁生日演讲稿
2014/05/14 职场文书
酒后驾车标语
2014/06/30 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
财务会计岗位职责
2015/02/03 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
工作表现证明
2015/06/15 职场文书
2019 入党申请书范文
2019/07/10 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
oracle重置序列从0开始递增1
2022/02/28 Oracle