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

本文实例讲述了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表格(table)操作技巧汇总》、《jQuery操作xml技巧总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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