bootstrapTable树表格
最近在做bootstrapTable树表格，在此总结一下
首先在网上找了一个插件，来源于：https://github.com/lslvxy/bootstrapTable-treeView，我改了一点点，如有侵权，请联系删除
/**
* created by lise
* @date 2018-01-18
*/
(function ($) {
'use strict';
var sprintf = function (str) {
var args = arguments,
flag = true,
i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg;
});
return flag ? str : '';
};
var getFieldIndex = function (columns, field) {
var index = -1;
$.each(columns, function (i, column) {
if (column.field === field) {
index = i;
return false;
}
return true;
});
return index;
};
var escapeHTML = function (text) {
if (typeof text === 'string') {
return text
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/`/g, '`');
}
return text;
};
var calculateObjectValue = function (self, name, args, defaultValue) {
var func = name;
if (typeof name === 'string') {
var names = name.split('.');
if (names.length > 1) {
func = window;
$.each(names, function (i, f) {
func = func[f];
});
} else {
func = window[name];
}
}
if (typeof func === 'object') {
return func;
}
if (typeof func === 'function') {
return func.apply(self, args);
}
if (!func && typeof name === 'string' && sprintf.apply(this, [name].concat(args))) {
return sprintf.apply(this, [name].concat(args));
}
return defaultValue;
};
var getItemField = function (item, field) {
var value = item;
if (typeof field !== 'string' || item.hasOwnProperty(field)) {
return item[field];
}
var props = field.split('.');
for (var p in props) {
value = value[props[p]];
}
return value;
};
var getParent = function (node, source, field) {
var data = [];
var items = $.grep(source, function (item, index) {
return node.parentid == item[field];
});
$.each(items, function (index, item) {
data.splice(0, 0, item);
var child = getParent(item, source, field);
$.each(child, function (i, n) {
data.splice(0, 0, n);
});
});
return data;
};
var getChild = function (node, source, field) {
var items = $.grep(source, function (item, index) {
return item.parentid == node[field];
});
return items;
};
var getAllChild = function (node, source, field) {
var data = [];
var g=function(child){
$.each(child, function (i, n) {
data.push(n);
var subChild = getChild(n, source, field);
if(subChild!=null && subChild.length>0){
g(subChild);
}
});
}
var child = getChild(node, source, field);
g(child);
return data;
};
//调用bootstrapTable组件的构造器得到对象
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initData = BootstrapTable.prototype.initData,
_initPagination = BootstrapTable.prototype.initPagination;
//重写bootstrapTable的initData方法
BootstrapTable.prototype.initData = function () {
_initData.apply(this, Array.prototype.slice.apply(arguments));
var that = this;
//初始化数据，添加level,isLeaf 属性
if (that.options.treeView && this.data.length > 0) {
var rows = [],levelStep=1;
var roots = $.grep(this.data, function (row, index) {
return row.parentid == null;
});
var g=function(child){
var childLevel=that.options.treeRootLevel+levelStep;
$.each(child, function (i, n) {
n.level=childLevel;
if (that.options.treeCollapseAll) {
n.hidden = true;
}
var subChild = getChild(n, that.data, that.options.treeId);
if(subChild==null || subChild.length==0){
n.isLeaf=true;
}
rows.push(n);
if(subChild!=null && subChild.length>0){
levelStep++;
g(subChild);
}else{
levelStep=1;
}
});
}
$.each(roots, function (index, item) {
item.level=that.options.treeRootLevel;
var child = getChild(item, that.data, that.options.treeId);
if(child==null || child.length==0){
item.isLeaf=true;
}
rows.push(item);
g(child);
});
that.options.data = that.data = rows;
}
};
//重写bootstrapTable的initPagination方法
BootstrapTable.prototype.initPagination = function () {
//理论情况下，treegrid是不支持分页的，所以默认分页参数为false
if(this.options.treeView){
this.options.pagination = false;
}
//调用“父类”的“虚方法”
_initPagination.apply(this, Array.prototype.slice.apply(arguments));
};
//重写bootstrapTable的initRow方法
BootstrapTable.prototype.initRow = function(item, i, data, parentDom) {
var that=this,
key,
html = [],
style = {},
csses = [],
data_ = '',
attributes = {},
htmlAttributes = [];
if ($.inArray(item, this.hiddenRows) > -1) {
return;
}
style = calculateObjectValue(this.options, this.options.rowStyle, [item, i], style);
if (style && style.css) {
for (key in style.css) {
csses.push(key + ': ' + style.css[key]);
}
}
attributes = calculateObjectValue(this.options,
this.options.rowAttributes, [item, i], attributes);
if (attributes) {
for (key in attributes) {
htmlAttributes.push(sprintf('%s="%s"', key, escapeHTML(attributes[key])));
}
}
if (item._data && !$.isEmptyObject(item._data)) {
$.each(item._data, function(k, v) {
// ignore data-index
if (k === 'index') {
return;
}
data_ += sprintf(' data-%s="%s"', k, v);
});
}
html.push(''
);
if (this.options.cardView) {
html.push(sprintf('', this.header.fields.length));
}
if (!this.options.cardView && this.options.detailView) {
html.push('',
'',
sprintf('', this.options.iconsPrefix, this.options.icons.detailOpen),
'',
' ');
}
$.each(this.header.fields, function(j, field) {
var text = '',
value_ = getItemField(item, field, that.options.escape),
value = '',
type = '',
cellStyle = {},
id_ = '',
class_ = that.header.classes[j],
data_ = '',
rowspan_ = '',
colspan_ = '',
title_ = '',
column = that.columns[j];
if (that.fromHtml && typeof value_ === 'undefined') {
return;
}
if (!column.visible) {
return;
}
if (that.options.cardView && (!column.cardVisible)) {
return;
}
if (column.escape) {
value_ = escapeHTML(value_);
}
style = sprintf('style="%s"', csses.concat(that.header.styles[j]).join('; '));
// handle td's id and class
if (item['_' + field + '_id']) {
id_ = sprintf(' id="%s"', item['_' + field + '_id']);
}
if (item['_' + field + '_class']) {
class_ = sprintf(' class="%s"', item['_' + field + '_class']);
}
if (item['_' + field + '_rowspan']) {
rowspan_ = sprintf(' rowspan="%s"', item['_' + field + '_rowspan']);
}
if (item['_' + field + '_colspan']) {
colspan_ = sprintf(' colspan="%s"', item['_' + field + '_colspan']);
}
if (item['_' + field + '_title']) {
title_ = sprintf(' title="%s"', item['_' + field + '_title']);
}
cellStyle = calculateObjectValue(that.header,
that.header.cellStyles[j], [value_, item, i, field], cellStyle);
if (cellStyle.classes) {
class_ = sprintf(' class="%s"', cellStyle.classes);
}
if (cellStyle.css) {
var csses_ = [];
for (var key in cellStyle.css) {
csses_.push(key + ': ' + cellStyle.css[key]);
}
style = sprintf('style="%s"', csses_.concat(that.header.styles[j]).join('; '));
}
value = calculateObjectValue(column,
that.header.formatters[j], [value_, item, i], value_);
if (item['_' + field + '_data'] && !$.isEmptyObject(item['_' + field + '_data'])) {
$.each(item['_' + field + '_data'], function(k, v) {
// ignore data-index
if (k === 'index') {
return;
}
data_ += sprintf(' data-%s="%s"', k, v);
});
}
if (column.checkbox || column.radio) {
type = column.checkbox ? 'checkbox' : type;
type = column.radio ? 'radio' : type;
text = [sprintf(that.options.cardView ?
'' : '', column['class'] || ''),
' '
].join('');
item[that.header.stateField] = value === true || (value && value.checked);
} else {
value = typeof value === 'undefined' || value === null ?
that.options.undefinedText : value;
//渲染tree展开图标，下面text中添加了indent和icon。
var indent, icon;
if (that.options.treeView && column.field == that.options.treeField) {
var indent = item.level == that.options.treeRootLevel ? '' : sprintf('', (item.level - that.options.treeRootLevel) * 15);
var child = $.grep(data, function (d, i) {
return d.parentid == item[that.options.treeId] && !d.hidden;
});
icon = sprintf('', child.length > 0 ? that.options.expandIcon : that.options.collapseIcon);
if(item.isLeaf){
icon = sprintf('', that.options.leafIcon);
}
}
//end
text = that.options.cardView ? ['',
that.options.showHeader ? sprintf('%s', style,
getPropertyFromOther(that.columns, 'field', 'title', field)) : '',
sprintf('%s', value),
''
].join('') : [sprintf('',
id_, class_, style, data_, rowspan_, colspan_, title_),
indent,icon,
value,
' '
].join('');
// Hide empty data on Card view when smartDisplay is set to true.
if (that.options.cardView && that.options.smartDisplay && value === '') {
// Should set a placeholder for event binding correct fieldIndex
text = '';
}
}
html.push(text);
});
if (this.options.cardView) {
html.push('
通过修改以下几个可以改变树结构展开收缩的图标样式
treeCollapseAll: false,//是否全部展开，默认不展开
collapseIcon: "fa fa-plus-square-o",//折叠样式
expandIcon: "fa fa-minus-square-o",//展开样式
leafIcon:""//叶子节点样式使用如下：
1、引入相关css/js
2、html
3、js
$("#table").bootstrapTable({
method:"get",
contentType: "application/x-www-form-urlencoded",
url: 'tree/treelist',
height: tableHeight(),
toolbar: '#toolbar',
striped: false, //显示更行变色
dataField: "rows",
pagination: false, //是否分页
queryParamsType: 'limit',
queryParams: queryParams,
sidePagination: 'server',
treeView: true,
treeId: "id",
treeField: "name",
columns: [{
title: '分类',
field: 'name',
//width: 100,
align: 'left',
valign: 'middle',
sortable: true,
}, {
title: '目标',
field: 'target',
align: 'center',
valign: 'middle',
sortable: true,
}]
})其中这三个是必须的：
treeView: true,
treeId: "id",
treeField: "name",treeField: "name",这个显示那个是树节点，注意请求的数据必须有id,parentid,