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

data

170 浏览量更新于2023-03-03 评论收藏 36KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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 +'"> ';

}else{

btn = ' ';

}

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 + ');"></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"> ';

}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"> ';

}

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>' +