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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
详解JWT token心得与使用实例
2019/08/02 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
python实现封装得到virustotal扫描结果
2014/10/05 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
python groupby 函数 as_index详解
2019/12/16 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
python进行参数传递的方法
2020/05/12 Python
python 对xml解析的示例
2021/02/27 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
走近毛泽东观后感
2015/06/04 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
小学科学课教学反思
2016/02/23 职场文书