一、说明：
参考 封装bootstrap-treegrid组件 https://www.cnblogs.com/Leo_wl/p/6794449.html#_labelTop
文章是对bootstrap-treegrid调用的封装，由于业务需要，需要增加很多功能，比如类似Bootstraptable.js中的 列的align,width,formatter相关功能以及onLoadSuccess()事件等等，原来的无法满足，故在大神的基础之上做了一些改动，并修改了一个bug(<tr class=”treegrid-n”></tr>会串号，导致层级显示有问题) 仅供大家参考。
二、效果图
下图为生成的html代码
h5手机端显示效果
三、代码
jquery.treegrid.extension.js
(function ($) {
"use strict";
$.fn.treegridData = function (options, param) {
//如果是调用方法
if (typeof options == 'string') {
return $.fn.treegridData.methods[options](this, param);
}
//如果是初始化组件
options = $.extend({}, $.fn.treegridData.defaults, options || {});
var target = $(this);
debugger;
//得到根节点
target.getRootNodes = function (data) {
var result = [];
$.each(data, function (index, item) {
if (!item[options.parentColumn]) {
result.push(item);
}
});
return result;
};
var parentIndex = 0;
var childIndex=100;
//递归获取子节点并且设置子节点
target.getChildNodes = function (data, parentNode, parentIndex, tbody,nodeLevel) {
nodeLevel = nodeLevel + 1;
$.each(data, function (i, item) {
if (item[options.parentColumn] == parentNode[options.id]) {
var tr = $('<tr></tr>');
childIndex++;
var nowParentIndex = (parentIndex + (childIndex + 1));
tr.addClass('treegrid-' + nowParentIndex);
tr.addClass('treegrid-parent-' + parentIndex);
$.each(options.columns, function (index, column) {
var align="left";
if(column.align){
align=column.align;
}
var td = $('<td style="text-align:'+align+';"></td>');
if(column.width){
td = $('<td style="text-align:'+align+';width: '+column.width+'px;"></td>');
}
var value = item[column.field];
if(column.formatter){
var fn = column.formatter;
if (typeof fn == 'function') {
td.html(fn(value,i,item,nodeLevel));
}
}else{
td.text(value);
}
tr.append(td);
});
tbody.append(tr);
target.getChildNodes(data, item, nowParentIndex, tbody,nodeLevel)
}
});
};
target.addClass('table');
if (options.striped) {
target.addClass('table-striped');
}
if (options.bordered) {
target.addClass('table-bordered');
}
if (options.url) {
$.ajax({
type: options.type,
url: options.url,
data: options.ajaxParams,
dataType: "JSON",
success: function (data, textStatus, jqXHR) {
debugger;
var nodeLevel = 1;
//构造表头
var thr = $('<tr></tr>');
$.each(options.columns, function (i, item) {
var align="left";
if(item.align){
align=item.align;
}
var th = $('<th style="text-align:'+align+';"></th>');
th.text(item.title);
thr.append(th);
});
var thead = $('<thead></thead>');
thead.append(thr);
target.append(thead);
//构造表体
var tbody = $('<tbody></tbody>');
var rootNode = target.getRootNodes(data);
$.each(rootNode, function (i, item) {
var tr = $('<tr></tr>');
parentIndex++;
var parentNodeIndex= parentIndex + i;
tr.addClass('treegrid-' + parentNodeIndex);
$.each(options.columns, function (index, column) {
var align="left";
if(column.align){
align=column.align;
}
var td = $('<td style="text-align:'+align+';"></td>');
if(column.width){
td = $('<td style="text-align:'+align+';width: '+column.width+'px;"></td>');
}
var value = item[column.field];
if(column.formatter){
var fn = column.formatter;
if (typeof fn == 'function') {
td.html(fn(value,i,item,nodeLevel));
}
}else{
td.text(value);
}
tr.append(td);
});
tbody.append(tr);
target.getChildNodes(data, item, parentNodeIndex, tbody,nodeLevel);
});
target.append(tbody);
target.treegrid({
expanderExpandedClass: options.expanderExpandedClass,
expanderCollapsedClass: options.expanderCollapsedClass
});
if (!options.expandAll) {
target.treegrid('collapseAll');
}
if(options.onLoadSuccess){
options.onLoadSuccess();
}
}
});
}
else {
//也可以通过defaults里面的data属性通过传递一个数据集合进来对组件进行初始化....有兴趣可以自己实现，思路和上述类似
}
return target;
};
$.fn.treegridData.methods = {
getAllNodes: function (target, data) {
return target.treegrid('getAllNodes');
},
//组件的其他方法也可以进行类似封装........
};
$.fn.treegridData.defaults = {
id: 'Id',
parentColumn: 'ParentId',
data: [], //构造table的数据集合
type: "GET", //请求数据的ajax类型
url: null, //请求数据的ajax的url
ajaxParams: {}, //请求数据的ajax的data属性
expandColumn: null,//在哪一列上面显示展开按钮
expandAll: true, //是否全部展开
striped: false, //是否各行渐变色
bordered: false, //是否显示边框
columns: [],
expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',//展开的按钮的图标
expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',//缩起的按钮的图标
};
})(jQuery);业务调用代码
$('#leaderGroupTable').treegridData({
id: 'quotaId',
parentColumn: 'parentQuotaId',
type: "POST", //请求数据的ajax类型
url: '/listLeadersQuotaDetailForTreeGrid',
ajaxParams: {leaderId : leaderId,
uuid : uuid,
yearDetailId : yearDetailId,},
expandColumn: null,//在哪一列上面显示展开按钮
striped: true,
bordered: false,
//expandAll: false,
columns: [
{
title: '指标名称',
field: 'quotaName',
width : 120,
formatter : function(value,index,row,nodeLevel) {
if(1==nodeLevel){
return value;
}else{
return "<a class=\"showp\" data-toggle=\"popover\" data-container=\"body\" title=\"指标说明\" "+
" data-content="+row.quotaComments+">"+
row.quotaName+"</a>"
}
}
},
{
title: '得分',
field: 'score',
align: 'center',
width : 160,
formatter : function(value,index,row,nodeLevel) {
if(1==nodeLevel){
return "";
}else{
var comFlag =0;
if(row.comments){
comFlag=1
}
var status = row.fdStatus;
var userid = row.fdUserId;
var minusIcon = "<a href=\"javascript:subScore('"
+ row.quotaId+"','"+uuid+"','"+leaderId+"','"+value+"','"+row.maxScore+"',"+comFlag
+ ")\"><img src=\"/images/减2x.png\" style=\"width:25px;float:left\"></a>";
var plusIcon = "<a href=\"javascript:addScore('"
+ row.quotaId+"','"+uuid+"','"+leaderId+"','"+value+"','"+row.maxScore+"',"+comFlag
+ ")\"><img src=\"/images/加2x.png\" style=\"width:25px;float:left\"></a>";
var inputValue = "<div id='"+row.quotaId+"Value' style=\"width:30px;float:left\">"
+ value
+ "</div>"
var scoreMapkey = row.quotaId;
initScoreMap(scoreMapkey,value,row.maxScore);
return "<div style=\"margin-left:25%;\">"+minusIcon
+ " "
+ inputValue
+ " "
+ plusIcon+"</div>";
}
}
},
{
title: '加权分',
field: 'maxScore',
align: 'center',
formatter : function(value,index,row,nodeLevel) {
if(1==nodeLevel){
return "";
}else{
//获取指标权重
var val = getWeightSocre(row.score,value);
var html = "<div id=\""+row.quotaId+"MaxScore\" class=\"sumCnt\"> "+val+"</div>";
return html;
}
}
}
],
onLoadSuccess : function() {
initPopover();
}
});引入的顺序
<script src="/js/treegrid/jquery.treegrid.js"></script>
<script src="/js/treegrid/jquery.treegrid.extension.js"></script>html中的元素
<div class="table-responsive" style="margin-bottom: 35px !important;">
<table id="leaderGroupTable"></table>
</div>
2845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
