mirror of https://gitee.com/y_project/RuoYi.git
更新treetable，之前的方案数据量大性能太差
cyf783
parent
7d733d868c
commit
28dd8a0dee
|
|
@ -0,0 +1,12 @@
|
|||
.bootstrap-tree-table .treetable-indent {width:16px; height: 16px; display: inline-block; position: relative;}
|
||||
.bootstrap-tree-table .treetable-expander {width:16px; height: 16px; display: inline-block; position: relative; cursor: pointer;}
|
||||
.bootstrap-tree-table .treetable-expander-expanded{background-image: url(img/collapse.png); }
|
||||
.bootstrap-tree-table .treetable-expander-collapsed{background-image: url(img/expand.png);}
|
||||
.bootstrap-tree-table .treetable-selected{background: #f5f5f5 !important;}
|
||||
.bootstrap-tree-table .treetable-table{border:0 !important;margin-bottom:0}
|
||||
.bootstrap-tree-table .treetable-table tbody {display:block;height:auto;overflow-y:auto;}
|
||||
.bootstrap-tree-table .treetable-table thead, .treetable-table tbody tr {display:table;width:100%;table-layout:fixed;}
|
||||
.bootstrap-tree-table .treetable-thead th{line-height:40px;border: 0 !important;background:#f3f3f4 !important;border-radius: 4px;border-left:0px solid #e7eaec !important;border-bottom:2px solid #e7eaec !important;text-align: center;}
|
||||
.bootstrap-tree-table .treetable-thead tr :first-child{border-left:0 !important}
|
||||
.bootstrap-tree-table .treetable-tbody td{border: 0 !important;border-left:0px solid #e7eaec !important;border-bottom:1px solid #e7eaec !important;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
|
||||
.bootstrap-tree-table .treetable-tbody tr :first-child{border-left:0 !important}
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
/**
|
||||
* bootstrapTreeTable
|
||||
*
|
||||
* @author swifly
|
||||
*/
|
||||
(function($) {
|
||||
"use strict";
|
||||
|
||||
$.fn.bootstrapTreeTable = function(options, param) {
|
||||
var allData = null;//用于存放格式化后的数据
|
||||
// 如果是调用方法
|
||||
if (typeof options == 'string') {
|
||||
return $.fn.bootstrapTreeTable.methods[options](this, param);
|
||||
}
|
||||
// 如果是初始化组件
|
||||
options = $.extend({}, $.fn.bootstrapTreeTable.defaults, options || {});
|
||||
// 是否有radio或checkbox
|
||||
var hasSelectItem = false;
|
||||
var target = $(this);
|
||||
// 在外层包装一下div，样式用的bootstrap-table的
|
||||
var _main_div = $("<div class='bootstrap-tree-table fixed-table-container'></div>");
|
||||
target.before(_main_div);
|
||||
_main_div.append(target);
|
||||
target.addClass("table table-hover treetable-table table-bordered");
|
||||
if (options.striped) {
|
||||
target.addClass('table-striped');
|
||||
}
|
||||
// 工具条在外层包装一下div，样式用的bootstrap-table的
|
||||
if(options.toolbar){
|
||||
var _tool_div = $("<div class='fixed-table-toolbar'></div>");
|
||||
var _tool_left_div = $("<div class='bs-bars pull-left'></div>");
|
||||
_tool_left_div.append($(options.toolbar));
|
||||
_tool_div.append(_tool_left_div);
|
||||
_main_div.before(_tool_div);
|
||||
}
|
||||
// 格式化数据，优化性能
|
||||
target.formatData=function(data){
|
||||
var _root = options.rootCodeValue?options.rootCodeValue:null
|
||||
$.each(data, function(index, item) {
|
||||
// 添加一个默认属性，用来判断当前节点有没有被显示
|
||||
item.isShow = false;
|
||||
// 这里兼容几种常见Root节点写法
|
||||
// 默认的几种判断
|
||||
var _defaultRootFlag = item[options.parentCode] == '0'
|
||||
|| item[options.parentCode] == 0
|
||||
|| item[options.parentCode] == null
|
||||
|| item[options.parentCode] == '';
|
||||
if (!item[options.parentCode] || (_root?(item[options.parentCode] == options.rootCodeValue):_defaultRootFlag)){
|
||||
if(!allData["_root_"]){allData["_root_"]=[];}
|
||||
allData["_root_"].push(item);
|
||||
}else{
|
||||
if(!allData["_n_"+item[options.parentCode]]){allData["_n_"+item[options.parentCode]]=[];}
|
||||
allData["_n_"+item[options.parentCode]].push(item);
|
||||
}
|
||||
});
|
||||
data=null;//回收
|
||||
}
|
||||
// 得到根节点
|
||||
target.getRootNodes = function() {
|
||||
return allData["_root_"];
|
||||
};
|
||||
// 递归获取子节点并且设置子节点
|
||||
target.handleNode = function(parentNode, lv, row_id, p_id, tbody) {
|
||||
var _ls = allData["_n_"+parentNode[options.code]];
|
||||
var tr = target.renderRow(parentNode,_ls?true:false,lv,row_id,p_id);
|
||||
tbody.append(tr);
|
||||
if(_ls){
|
||||
$.each(_ls, function(i, item) {
|
||||
var _row_id = row_id+"_"+i
|
||||
target.handleNode(item, (lv + 1), _row_id,row_id, tbody)
|
||||
});
|
||||
}
|
||||
};
|
||||
// 绘制行
|
||||
target.renderRow = function(item,isP,lv,row_id,p_id){
|
||||
// 标记已显示
|
||||
item.isShow = true;
|
||||
var tr = $('<tr id="'+row_id+'" pid="'+p_id+'"></tr>');
|
||||
var _icon = options.expanderCollapsedClass;
|
||||
if(options.expandAll){
|
||||
tr.css("display","table");
|
||||
_icon = options.expanderExpandedClass;
|
||||
}else if(options.expandFirst&&lv<=2){
|
||||
tr.css("display","table");
|
||||
_icon=(lv==1)?options.expanderExpandedClass:options.expanderCollapsedClass;
|
||||
}else{
|
||||
tr.css("display","none");
|
||||
_icon = options.expanderCollapsedClass;
|
||||
}
|
||||
$.each(options.columns, function(index, column) {
|
||||
// 判断有没有选择列
|
||||
if(column.field=='selectItem'){
|
||||
hasSelectItem = true;
|
||||
var td = $('<td style="text-align:center;width:36px"></td>');
|
||||
if(column.radio){
|
||||
var _ipt = $('<input name="select_item" type="radio" value="'+item[options.id]+'"></input>');
|
||||
td.append(_ipt);
|
||||
}
|
||||
if(column.checkbox){
|
||||
var _ipt = $('<input name="select_item" type="checkbox" value="'+item[options.id]+'"></input>');
|
||||
td.append(_ipt);
|
||||
}
|
||||
tr.append(td);
|
||||
}else{
|
||||
var td = $('<td title="'+item[column.field]+'" name="'+column.field+'" style="'+((column.width)?('width:'+column.width):'')+'"></td>');
|
||||
// 增加formatter渲染
|
||||
if (column.formatter) {
|
||||
td.html(column.formatter.call(this, item[column.field], item, index));
|
||||
} else {
|
||||
td.text(item[column.field]);
|
||||
}
|
||||
if(options.expandColumn==index){
|
||||
if(!isP){
|
||||
td.prepend('<span class="treetable-expander"></span>')
|
||||
}else{
|
||||
td.prepend('<span class="treetable-expander '+_icon+'"></span>')
|
||||
}
|
||||
for (var int = 0; int < (lv-1); int++) {
|
||||
td.prepend('<span class="treetable-indent"></span>')
|
||||
}
|
||||
}
|
||||
tr.append(td);
|
||||
}
|
||||
});
|
||||
return tr;
|
||||
}
|
||||
// 加载数据
|
||||
target.load = function(parms){
|
||||
// 加载数据前先清空
|
||||
allData = {};
|
||||
// 加载数据前先清空
|
||||
target.html("");
|
||||
// 构造表头
|
||||
var thr = $('<tr></tr>');
|
||||
$.each(options.columns, function(i, item) {
|
||||
var th = null;
|
||||
// 判断有没有选择列
|
||||
if(i==0&&item.field=='selectItem'){
|
||||
hasSelectItem = true;
|
||||
th = $('<th style="width:36px"></th>');
|
||||
}else{
|
||||
th = $('<th style="'+((item.width)?('width:'+item.width):'')+'"></th>');
|
||||
}
|
||||
th.text(item.title);
|
||||
thr.append(th);
|
||||
});
|
||||
var thead = $('<thead class="treetable-thead"></thead>');
|
||||
thead.append(thr);
|
||||
target.append(thead);
|
||||
// 构造表体
|
||||
var tbody = $('<tbody class="treetable-tbody"></tbody>');
|
||||
target.append(tbody);
|
||||
// 添加加载loading
|
||||
var _loading = '<tr><td colspan="'+options.columns.length+'"><div style="display: block;text-align: center;">正在努力地加载数据中，请稍候……</div></td></tr>'
|
||||
tbody.html(_loading);
|
||||
// 默认高度
|
||||
if(options.height){
|
||||
tbody.css("height",options.height);
|
||||
}
|
||||
$.ajax({
|
||||
type : options.type,
|
||||
url : options.url,
|
||||
data : parms?parms:options.ajaxParams,
|
||||
dataType : "JSON",
|
||||
success : function(data, textStatus, jqXHR) {
|
||||
// 加载完数据先清空
|
||||
tbody.html("");
|
||||
if(!data||data.length<=0){
|
||||
var _empty = '<tr><td colspan="'+options.columns.length+'"><div style="display: block;text-align: center;">没有找到匹配的记录</div></td></tr>'
|
||||
tbody.html(_empty);
|
||||
return;
|
||||
}
|
||||
// 格式化数据
|
||||
target.formatData(data);
|
||||
// 开始绘制
|
||||
var rootNode = target.getRootNodes();
|
||||
if(rootNode){
|
||||
$.each(rootNode, function(i, item) {
|
||||
var _row_id = "row_id_"+i
|
||||
target.handleNode(item, 1, _row_id,"row_root", tbody);
|
||||
});
|
||||
}
|
||||
// 下边的操作主要是为了查询时让一些没有根节点的节点显示
|
||||
$.each(data, function(i, item) {
|
||||
if(!item.isShow){
|
||||
var tr = target.renderRow(item,false,1);
|
||||
tbody.append(tr);
|
||||
}
|
||||
});
|
||||
target.append(tbody);
|
||||
//动态设置表头宽度
|
||||
thead.css("width", tbody.children(":first").css("width"));
|
||||
// 行点击选中事件
|
||||
target.find("tbody").find("tr").click(function(){
|
||||
if(hasSelectItem){
|
||||
var _ipt = $(this).find("input[name='select_item']");
|
||||
if(_ipt.attr("type")=="radio"){
|
||||
_ipt.prop('checked',true);
|
||||
target.find("tbody").find("tr").removeClass("treetable-selected");
|
||||
$(this).addClass("treetable-selected");
|
||||
}else{
|
||||
if(_ipt.prop('checked')){
|
||||
_ipt.prop('checked',false);
|
||||
$(this).removeClass("treetable-selected");
|
||||
}else{
|
||||
_ipt.prop('checked',true);
|
||||
$(this).addClass("treetable-selected");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// 小图标点击事件--展开缩起
|
||||
target.find("tbody").find("tr").find(".treetable-expander").click(function(){
|
||||
var _flag = $(this).hasClass(options.expanderExpandedClass);
|
||||
var tr = $(this).parent().parent();
|
||||
var row_id = tr.attr("id");
|
||||
if(_flag){
|
||||
var _ls = target.find("tbody").find("tr[id^='"+row_id+"_']");//下所有
|
||||
if(_ls&&_ls.length>0){
|
||||
$.each(_ls, function(index, item) {
|
||||
$(item).css("display","none");
|
||||
var _icon = $(item).children().eq(options.expandColumn).find(".treetable-expander");
|
||||
if(_icon.hasClass(options.expanderExpandedClass)){
|
||||
_icon.removeClass(options.expanderExpandedClass)
|
||||
_icon.addClass(options.expanderCollapsedClass)
|
||||
}
|
||||
});
|
||||
}
|
||||
$(this).removeClass(options.expanderExpandedClass)
|
||||
$(this).addClass(options.expanderCollapsedClass)
|
||||
}else{
|
||||
var _ls = target.find("tbody").find("tr[pid='"+row_id+"']");//下一级
|
||||
if(_ls&&_ls.length>0){
|
||||
$.each(_ls, function(index, item) {
|
||||
$(item).css("display","table");
|
||||
});
|
||||
}
|
||||
$(this).removeClass(options.expanderCollapsedClass)
|
||||
$(this).addClass(options.expanderExpandedClass)
|
||||
}
|
||||
});
|
||||
},
|
||||
error:function(xhr,textStatus){
|
||||
var _errorMsg = '<tr><td colspan="'+options.columns.length+'"><div style="display: block;text-align: center;">'+xhr.responseText+'</div></td></tr>'
|
||||
tbody.html(_errorMsg);
|
||||
debugger;
|
||||
},
|
||||
});
|
||||
}
|
||||
if (options.url) {
|
||||
target.load();
|
||||
} else {
|
||||
// 也可以通过defaults里面的data属性通过传递一个数据集合进来对组件进行初始化....有兴趣可以自己实现，思路和上述类似
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
// 组件方法封装........
|
||||
$.fn.bootstrapTreeTable.methods = {
|
||||
// 返回选中记录的id（返回的id由配置中的id属性指定）
|
||||
// 为了兼容bootstrap-table的写法，统一返回数组，这里只返回了指定的id
|
||||
getSelections : function(target, data) {
|
||||
// 所有被选中的记录input
|
||||
var _ipt = target.find("tbody").find("tr").find("input[name='select_item']:checked");
|
||||
var chk_value =[];
|
||||
// 如果是radio
|
||||
if(_ipt.attr("type")=="radio"){
|
||||
var _data = {id:_ipt.val()};
|
||||
var _tds = _ipt.parent().parent().find("td");
|
||||
_tds.each(function(_i,_item){
|
||||
if(_i!=0){
|
||||
_data[$(_item).attr("name")]=$(_item).attr("title");
|
||||
}
|
||||
});
|
||||
chk_value.push(_data);
|
||||
}else{
|
||||
_ipt.each(function(_i,_item){
|
||||
var _data = {id:$(_item).val()};
|
||||
var _tds = $(_item).parent().parent().find("td");
|
||||
_tds.each(function(_ii,_iitem){
|
||||
if(_ii!=0){
|
||||
_data[$(_iitem).attr("name")]=$(_iitem).attr("title");
|
||||
}
|
||||
});
|
||||
chk_value.push(_data);
|
||||
});
|
||||
}
|
||||
return chk_value;
|
||||
},
|
||||
// 刷新记录
|
||||
refresh : function(target, parms) {
|
||||
if(parms){
|
||||
target.load(parms);
|
||||
}else{
|
||||
target.load();
|
||||
}
|
||||
},
|
||||
// 组件的其他方法也可以进行类似封装........
|
||||
};
|
||||
|
||||
$.fn.bootstrapTreeTable.defaults = {
|
||||
id : 'id',// 选取记录返回的值
|
||||
code : 'id',// 用于设置父子关系
|
||||
parentCode : 'parentId',// 用于设置父子关系
|
||||
rootCodeValue: null,//设置根节点code值----可指定根节点，默认为null,"",0,"0"
|
||||
data : [], // 构造table的数据集合
|
||||
type : "GET", // 请求数据的ajax类型
|
||||
url : null, // 请求数据的ajax的url
|
||||
ajaxParams : {}, // 请求数据的ajax的data属性
|
||||
expandColumn : 1,// 在哪一列上面显示展开按钮
|
||||
expandAll : false, // 是否全部展开
|
||||
expandFirst : true, // 是否默认第一级展开--expandAll为false时生效
|
||||
striped : false, // 是否各行渐变色
|
||||
columns : [],
|
||||
toolbar: null,//顶部工具条
|
||||
height: 0,
|
||||
expanderExpandedClass : 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标
|
||||
expanderCollapsedClass : 'glyphicon glyphicon-chevron-right'// 缩起的按钮的图标
|
||||
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.treegrid-indent {width:16px; height: 16px; display: inline-block; position: relative;}
|
||||
|
||||
.treegrid-expander {width:16px; height: 16px; display: inline-block; position: relative; cursor: pointer;}
|
||||
|
||||
.treegrid-expander-expanded{background-image: url(img/collapse.png); }
|
||||
.treegrid-expander-collapsed{background-image: url(img/expand.png);}
|
||||
.treegrid-selected{background: #f5f5f5 !important;}
|
||||
.treegrid-table{border:0 !important;margin-bottom:0}
|
||||
.treegrid-table tbody {display:block;height:auto;overflow-y:auto;}
|
||||
.treegrid-table thead, .treegrid-table tbody tr {display:table;width:100%;table-layout:fixed;}
|
||||
.treegrid-thead th{line-height:40px;border: 0 !important;background:#f3f3f4 !important;border-radius: 4px;border-left:0px solid #e7eaec !important;border-bottom:2px solid #e7eaec !important;text-align: center;}
|
||||
.treegrid-thead tr :first-child{border-left:0 !important}
|
||||
.treegrid-tbody td{border: 0 !important;border-left:0px solid #e7eaec !important;border-bottom:1px solid #e7eaec !important;overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;}
|
||||
.treegrid-tbody tr :first-child{border-left:0 !important}
|
||||
|
|
@ -1,258 +0,0 @@
|
|||
(function($) {
|
||||
"use strict";
|
||||
|
||||
$.fn.bootstrapTreeTable = function(options, param) {
|
||||
// 如果是调用方法
|
||||
if (typeof options == 'string') {
|
||||
return $.fn.bootstrapTreeTable.methods[options](this, param);
|
||||
}
|
||||
|
||||
// 如果是初始化组件
|
||||
options = $.extend({}, $.fn.bootstrapTreeTable.defaults, options || {});
|
||||
// 是否有radio或checkbox
|
||||
var hasSelectItem = false;
|
||||
var target = $(this);
|
||||
// 在外层包装一下div，样式用的bootstrap-table的
|
||||
var _main_div = $("<div class='fixed-table-container'></div>");
|
||||
target.before(_main_div);
|
||||
_main_div.append(target);
|
||||
target.addClass("table table-hover treegrid-table");
|
||||
if (options.striped) {
|
||||
target.addClass('table-striped');
|
||||
}
|
||||
// 工具条在外层包装一下div，样式用的bootstrap-table的
|
||||
if(options.toolbar){
|
||||
var _tool_div = $("<div class='fixed-table-toolbar'></div>");
|
||||
var _tool_left_div = $("<div class='bs-bars pull-left'></div>");
|
||||
_tool_left_div.append($(options.toolbar));
|
||||
_tool_div.append(_tool_left_div);
|
||||
_main_div.before(_tool_div);
|
||||
}
|
||||
// 得到根节点
|
||||
target.getRootNodes = function(data) {
|
||||
// 指定Root节点值
|
||||
var _root = options.rootCodeValue?options.rootCodeValue:null
|
||||
var result = [];
|
||||
$.each(data, function(index, item) {
|
||||
// 这里兼容几种常见Root节点写法
|
||||
// 默认的几种判断
|
||||
var _defaultRootFlag = item[options.parentCode] == '0'
|
||||
|| item[options.parentCode] == 0
|
||||
|| item[options.parentCode] == null
|
||||
|| item[options.parentCode] == '';
|
||||
if (!item[options.parentCode] || (_root?(item[options.parentCode] == options.rootCodeValue):_defaultRootFlag)){
|
||||
result.push(item);
|
||||
}
|
||||
// 添加一个默认属性，用来判断当前节点有没有被显示
|
||||
item.isShow = false;
|
||||
});
|
||||
return result;
|
||||
};
|
||||
var j = 0;
|
||||
// 递归获取子节点并且设置子节点
|
||||
target.getChildNodes = function(data, parentNode, parentIndex, tbody) {
|
||||
$.each(data, function(i, item) {
|
||||
if (item[options.parentCode] == parentNode[options.code]) {
|
||||
var tr = $('<tr></tr>');
|
||||
var nowParentIndex = (parentIndex + (j++) + 1);
|
||||
tr.addClass('treegrid-' + nowParentIndex);
|
||||
tr.addClass('treegrid-parent-' + parentIndex);
|
||||
target.renderRow(tr,item);
|
||||
item.isShow = true;
|
||||
tbody.append(tr);
|
||||
target.getChildNodes(data, item, nowParentIndex, tbody)
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
// 绘制行
|
||||
target.renderRow = function(tr,item){
|
||||
$.each(options.columns, function(index, column) {
|
||||
// 判断有没有选择列
|
||||
if(index==0&&column.field=='selectItem'){
|
||||
hasSelectItem = true;
|
||||
var td = $('<td style="text-align:center;width:36px"></td>');
|
||||
if(column.radio){
|
||||
var _ipt = $('<input name="select_item" type="radio" value="'+item[options.id]+'"></input>');
|
||||
td.append(_ipt);
|
||||
}
|
||||
if(column.checkbox){
|
||||
var _ipt = $('<input name="select_item" type="checkbox" value="'+item[options.id]+'"></input>');
|
||||
td.append(_ipt);
|
||||
}
|
||||
tr.append(td);
|
||||
}else{
|
||||
var td = $('<td style="text-align:'+column.align+';'+((column.width)?('width:'+column.width):'')+'"></td>');
|
||||
// 增加formatter渲染
|
||||
if (column.formatter) {
|
||||
td.html(column.formatter.call(this, item, index));
|
||||
} else {
|
||||
td.text(item[column.field]);
|
||||
}
|
||||
tr.append(td);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 加载数据
|
||||
target.load = function(parms){
|
||||
// 加载数据前先清空
|
||||
target.html("");
|
||||
// 构造表头
|
||||
var thr = $('<tr></tr>');
|
||||
$.each(options.columns, function(i, item) {
|
||||
var th = null;
|
||||
// 判断有没有选择列
|
||||
if(i==0&&item.field=='selectItem'){
|
||||
hasSelectItem = true;
|
||||
th = $('<th style="text-align:'+item.valign+';width:36px"></th>');
|
||||
}else{
|
||||
th = $('<th style="text-align:'+item.valign+';padding:10px;'+((item.width)?('width:'+item.width):'')+'"></th>');
|
||||
}
|
||||
th.text(item.title);
|
||||
thr.append(th);
|
||||
});
|
||||
var thead = $('<thead class="treegrid-thead"></thead>');
|
||||
thead.append(thr);
|
||||
target.append(thead);
|
||||
// 构造表体
|
||||
var tbody = $('<tbody class="treegrid-tbody"></tbody>');
|
||||
target.append(tbody);
|
||||
// 添加加载loading
|
||||
var _loading = '<tr><td colspan="'+options.columns.length+'"><div style="display: block;text-align: center;">正在努力地加载数据中，请稍候……</div></td></tr>'
|
||||
tbody.html(_loading);
|
||||
// 默认高度
|
||||
if(options.height){
|
||||
tbody.css("height",options.height);
|
||||
}
|
||||
$.ajax({
|
||||
type : options.type,
|
||||
url : options.url,
|
||||
data : parms?parms:options.ajaxParams,
|
||||
dataType : "JSON",
|
||||
success : function(data, textStatus, jqXHR) {
|
||||
// 加载完数据先清空
|
||||
tbody.html("");
|
||||
if(!data||data.length<=0){
|
||||
var _empty = '<tr><td colspan="'+options.columns.length+'"><div style="display: block;text-align: center;">没有记录</div></td></tr>'
|
||||
tbody.html(_empty);
|
||||
return;
|
||||
}
|
||||
var rootNode = target.getRootNodes(data);
|
||||
$.each(rootNode, function(i, item) {
|
||||
var tr = $('<tr></tr>');
|
||||
tr.addClass('treegrid-' + (j + "_" + i));
|
||||
target.renderRow(tr,item);
|
||||
item.isShow = true;
|
||||
tbody.append(tr);
|
||||
target.getChildNodes(data, item, (j + "_" + i), tbody);
|
||||
});
|
||||
// 下边的操作主要是为了查询时让一些没有根节点的节点显示
|
||||
$.each(data, function(i, item) {
|
||||
if(!item.isShow){
|
||||
var tr = $('<tr></tr>');
|
||||
tr.addClass('treegrid-' + (j + "_" + i));
|
||||
target.renderRow(tr,item);
|
||||
tbody.append(tr);
|
||||
}
|
||||
});
|
||||
target.append(tbody);
|
||||
// 初始化treegrid
|
||||
target.treegrid({
|
||||
treeColumn: options.expandColumn?options.expandColumn:(hasSelectItem?1:0),//如果有radio或checkbox默认第二列层级显示，当前是在用户未设置的提前下
|
||||
expanderExpandedClass : options.expanderExpandedClass,
|
||||
expanderCollapsedClass : options.expanderCollapsedClass
|
||||
});
|
||||
if (!options.expandAll) {
|
||||
target.treegrid('collapseAll');
|
||||
}
|
||||
//动态设置表头宽度
|
||||
//thead.css("width", tbody.children(":first").css("width"));
|
||||
// 行点击选中事件
|
||||
target.find("tbody").find("tr").click(function(){
|
||||
if(hasSelectItem){
|
||||
var _ipt = $(this).find("input[name='select_item']");
|
||||
if(_ipt.attr("type")=="radio"){
|
||||
_ipt.prop('checked',true);
|
||||
target.find("tbody").find("tr").removeClass("treegrid-selected");
|
||||
$(this).addClass("treegrid-selected");
|
||||
}else{
|
||||
if(_ipt.prop('checked')){
|
||||
_ipt.prop('checked',false);
|
||||
$(this).removeClass("treegrid-selected");
|
||||
}else{
|
||||
_ipt.prop('checked',true);
|
||||
$(this).addClass("treegrid-selected");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
error:function(xhr,textStatus){
|
||||
var _errorMsg = '<tr><td colspan="'+options.columns.length+'"><div style="display: block;text-align: center;">'+xhr.responseText+'</div></td></tr>'
|
||||
tbody.html(_errorMsg);
|
||||
debugger;
|
||||
},
|
||||
});
|
||||
}
|
||||
if (options.url) {
|
||||
target.load();
|
||||
} else {
|
||||
// 也可以通过defaults里面的data属性通过传递一个数据集合进来对组件进行初始化....有兴趣可以自己实现，思路和上述类似
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
// 组件方法封装........
|
||||
$.fn.bootstrapTreeTable.methods = {
|
||||
// 返回选中记录的id（返回的id由配置中的id属性指定）
|
||||
// 为了兼容bootstrap-table的写法，统一返回数组，这里只返回了指定的id
|
||||
getSelections : function(target, data) {
|
||||
// 所有被选中的记录input
|
||||
var _ipt = target.find("tbody").find("tr").find("input[name='select_item']:checked");
|
||||
var chk_value =[];
|
||||
// 如果是radio
|
||||
if(_ipt.attr("type")=="radio"){
|
||||
chk_value.push({id:_ipt.val()});
|
||||
}else{
|
||||
_ipt.each(function(_i,_item){
|
||||
chk_value.push({id:$(_item).val()});
|
||||
});
|
||||
}
|
||||
return chk_value;
|
||||
},
|
||||
// 刷新记录
|
||||
refresh : function(target, parms) {
|
||||
if(parms){
|
||||
target.load(parms);
|
||||
}else{
|
||||
target.load();
|
||||
}
|
||||
},
|
||||
// 重置表格视图
|
||||
resetHeight : function(target, height) {
|
||||
target.find("tbody").css("height", height + 'px');
|
||||
}
|
||||
// 组件的其他方法也可以进行类似封装........
|
||||
};
|
||||
|
||||
$.fn.bootstrapTreeTable.defaults = {
|
||||
id : 'menuId',// 选取记录返回的值
|
||||
code : 'menuId',// 用于设置父子关系
|
||||
parentCode : 'parentId',// 用于设置父子关系
|
||||
rootCodeValue: null,//设置根节点code值----可指定根节点，默认为null,"",0,"0"
|
||||
data : [], // 构造table的数据集合
|
||||
type : "GET", // 请求数据的ajax类型
|
||||
url : null, // 请求数据的ajax的url
|
||||
ajaxParams : {}, // 请求数据的ajax的data属性
|
||||
expandColumn : null,// 在哪一列上面显示展开按钮
|
||||
expandAll : true, // 是否全部展开
|
||||
striped : false, // 是否各行渐变色
|
||||
columns : [],
|
||||
toolbar: '#toolbar',//顶部工具条
|
||||
height: 0,
|
||||
expanderExpandedClass : 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标
|
||||
expanderCollapsedClass : 'glyphicon glyphicon-chevron-right'// 缩起的按钮的图标
|
||||
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
@ -1,619 +0,0 @@
|
|||
/*
|
||||
* jQuery treegrid Plugin 0.2.0
|
||||
* https://github.com/maxazan/jquery-treegrid
|
||||
*
|
||||
* Copyright 2013, Pomazan Max
|
||||
* Licensed under the MIT licenses.
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
var methods = {
|
||||
/**
|
||||
* Initialize tree
|
||||
*
|
||||
* @param {Object} options
|
||||
* @returns {Object[]}
|
||||
*/
|
||||
initTree: function(options) {
|
||||
var settings = $.extend({}, this.treegrid.defaults, options);
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('setTreeContainer', $(this));
|
||||
$this.treegrid('setSettings', settings);
|
||||
settings.getRootNodes.apply(this, [$(this)]).treegrid('initNode', settings);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Initialize node
|
||||
*
|
||||
* @param {Object} settings
|
||||
* @returns {Object[]}
|
||||
*/
|
||||
initNode: function(settings) {
|
||||
return this.each(function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('setTreeContainer', settings.getTreeGridContainer.apply(this));
|
||||
$this.treegrid('getChildNodes').treegrid('initNode', settings);
|
||||
$this.treegrid('initExpander').treegrid('initIndent').treegrid('initEvents').treegrid('initState').treegrid("initSettingsEvents");
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Initialize node events
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
initEvents: function() {
|
||||
var $this = $(this);
|
||||
//Save state on change
|
||||
$this.on("change", function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('render');
|
||||
if ($this.treegrid('getSetting', 'saveState')) {
|
||||
$this.treegrid('saveState');
|
||||
}
|
||||
});
|
||||
//Default behavior on collapse
|
||||
$this.on("collapse", function() {
|
||||
var $this = $(this);
|
||||
$this.removeClass('treegrid-expanded');
|
||||
$this.addClass('treegrid-collapsed');
|
||||
});
|
||||
//Default behavior on expand
|
||||
$this.on("expand", function() {
|
||||
var $this = $(this);
|
||||
$this.removeClass('treegrid-collapsed');
|
||||
$this.addClass('treegrid-expanded');
|
||||
});
|
||||
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Initialize events from settings
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
initSettingsEvents: function() {
|
||||
var $this = $(this);
|
||||
//Save state on change
|
||||
$this.on("change", function() {
|
||||
var $this = $(this);
|
||||
if (typeof ($this.treegrid('getSetting', 'onChange')) === "function") {
|
||||
$this.treegrid('getSetting', 'onChange').apply($this);
|
||||
}
|
||||
});
|
||||
//Default behavior on collapse
|
||||
$this.on("collapse", function() {
|
||||
var $this = $(this);
|
||||
if (typeof ($this.treegrid('getSetting', 'onCollapse')) === "function") {
|
||||
$this.treegrid('getSetting', 'onCollapse').apply($this);
|
||||
}
|
||||
});
|
||||
//Default behavior on expand
|
||||
$this.on("expand", function() {
|
||||
var $this = $(this);
|
||||
if (typeof ($this.treegrid('getSetting', 'onExpand')) === "function") {
|
||||
$this.treegrid('getSetting', 'onExpand').apply($this);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Initialize expander for node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
initExpander: function() {
|
||||
var $this = $(this);
|
||||
var cell = $this.find('td').get($this.treegrid('getSetting', 'treeColumn'));
|
||||
var tpl = $this.treegrid('getSetting', 'expanderTemplate');
|
||||
var expander = $this.treegrid('getSetting', 'getExpander').apply(this);
|
||||
if (expander) {
|
||||
expander.remove();
|
||||
}
|
||||
$(tpl).prependTo(cell).click(function() {
|
||||
$($(this).closest('tr')).treegrid('toggle');
|
||||
});
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Initialize indent for node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
initIndent: function() {
|
||||
var $this = $(this);
|
||||
$this.find('.treegrid-indent').remove();
|
||||
for (var i = 0; i < $(this).treegrid('getDepth'); i++) {
|
||||
$($this.treegrid('getSetting', 'indentTemplate')).insertBefore($this.find('.treegrid-expander'));
|
||||
}
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Initialise state of node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
initState: function() {
|
||||
var $this = $(this);
|
||||
if ($this.treegrid('getSetting', 'saveState') && !$this.treegrid('isFirstInit')) {
|
||||
$this.treegrid('restoreState');
|
||||
} else {
|
||||
if ($this.treegrid('getSetting', 'initialState') === "expanded") {
|
||||
$this.treegrid('expand');
|
||||
} else {
|
||||
$this.treegrid('collapse');
|
||||
}
|
||||
}
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Return true if this tree was never been initialised
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isFirstInit: function() {
|
||||
var tree = $(this).treegrid('getTreeContainer');
|
||||
if (tree.data('first_init') === undefined) {
|
||||
tree.data('first_init', $.cookie(tree.treegrid('getSetting', 'saveStateName')) === undefined);
|
||||
}
|
||||
return tree.data('first_init');
|
||||
},
|
||||
/**
|
||||
* Save state of current node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
saveState: function() {
|
||||
var $this = $(this);
|
||||
if ($this.treegrid('getSetting', 'saveStateMethod') === 'cookie') {
|
||||
|
||||
var stateArrayString = $.cookie($this.treegrid('getSetting', 'saveStateName')) || '';
|
||||
var stateArray = (stateArrayString === '' ? [] : stateArrayString.split(','));
|
||||
var nodeId = $this.treegrid('getNodeId');
|
||||
|
||||
if ($this.treegrid('isExpanded')) {
|
||||
if ($.inArray(nodeId, stateArray) === -1) {
|
||||
stateArray.push(nodeId);
|
||||
}
|
||||
} else if ($this.treegrid('isCollapsed')) {
|
||||
if ($.inArray(nodeId, stateArray) !== -1) {
|
||||
stateArray.splice($.inArray(nodeId, stateArray), 1);
|
||||
}
|
||||
}
|
||||
$.cookie($this.treegrid('getSetting', 'saveStateName'), stateArray.join(','));
|
||||
}
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Restore state of current node.
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
restoreState: function() {
|
||||
var $this = $(this);
|
||||
if ($this.treegrid('getSetting', 'saveStateMethod') === 'cookie') {
|
||||
var stateArray = $.cookie($this.treegrid('getSetting', 'saveStateName')).split(',');
|
||||
if ($.inArray($this.treegrid('getNodeId'), stateArray) !== -1) {
|
||||
$this.treegrid('expand');
|
||||
} else {
|
||||
$this.treegrid('collapse');
|
||||
}
|
||||
|
||||
}
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Method return setting by name
|
||||
*
|
||||
* @param {type} name
|
||||
* @returns {unresolved}
|
||||
*/
|
||||
getSetting: function(name) {
|
||||
if (!$(this).treegrid('getTreeContainer')) {
|
||||
return null;
|
||||
}
|
||||
return $(this).treegrid('getTreeContainer').data('settings')[name];
|
||||
},
|
||||
/**
|
||||
* Add new settings
|
||||
*
|
||||
* @param {Object} settings
|
||||
*/
|
||||
setSettings: function(settings) {
|
||||
$(this).treegrid('getTreeContainer').data('settings', settings);
|
||||
},
|
||||
/**
|
||||
* Return tree container
|
||||
*
|
||||
* @returns {HtmlElement}
|
||||
*/
|
||||
getTreeContainer: function() {
|
||||
return $(this).data('treegrid');
|
||||
},
|
||||
/**
|
||||
* Set tree container
|
||||
*
|
||||
* @param {HtmlE;ement} container
|
||||
*/
|
||||
setTreeContainer: function(container) {
|
||||
return $(this).data('treegrid', container);
|
||||
},
|
||||
/**
|
||||
* Method return all root nodes of tree.
|
||||
*
|
||||
* Start init all child nodes from it.
|
||||
*
|
||||
* @returns {Array}
|
||||
*/
|
||||
getRootNodes: function() {
|
||||
return $(this).treegrid('getSetting', 'getRootNodes').apply(this, [$(this).treegrid('getTreeContainer')]);
|
||||
},
|
||||
/**
|
||||
* Method return all nodes of tree.
|
||||
*
|
||||
* @returns {Array}
|
||||
*/
|
||||
getAllNodes: function() {
|
||||
return $(this).treegrid('getSetting', 'getAllNodes').apply(this, [$(this).treegrid('getTreeContainer')]);
|
||||
},
|
||||
/**
|
||||
* Mthod return true if element is Node
|
||||
*
|
||||
* @returns {String}
|
||||
*/
|
||||
isNode: function() {
|
||||
return $(this).treegrid('getNodeId') !== null;
|
||||
},
|
||||
/**
|
||||
* Mthod return id of node
|
||||
*
|
||||
* @returns {String}
|
||||
*/
|
||||
getNodeId: function() {
|
||||
if ($(this).treegrid('getSetting', 'getNodeId') === null) {
|
||||
return null;
|
||||
} else {
|
||||
return $(this).treegrid('getSetting', 'getNodeId').apply(this);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Method return parent id of node or null if root node
|
||||
*
|
||||
* @returns {String}
|
||||
*/
|
||||
getParentNodeId: function() {
|
||||
return $(this).treegrid('getSetting', 'getParentNodeId').apply(this);
|
||||
},
|
||||
/**
|
||||
* Method return parent node or null if root node
|
||||
*
|
||||
* @returns {Object[]}
|
||||
*/
|
||||
getParentNode: function() {
|
||||
if ($(this).treegrid('getParentNodeId') === null) {
|
||||
return null;
|
||||
} else {
|
||||
return $(this).treegrid('getSetting', 'getNodeById').apply(this, [$(this).treegrid('getParentNodeId'), $(this).treegrid('getTreeContainer')]);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Method return array of child nodes or null if node is leaf
|
||||
*
|
||||
* @returns {Object[]}
|
||||
*/
|
||||
getChildNodes: function() {
|
||||
return $(this).treegrid('getSetting', 'getChildNodes').apply(this, [$(this).treegrid('getNodeId'), $(this).treegrid('getTreeContainer')]);
|
||||
},
|
||||
/**
|
||||
* Method return depth of tree.
|
||||
*
|
||||
* This method is needs for calculate indent
|
||||
*
|
||||
* @returns {Number}
|
||||
*/
|
||||
getDepth: function() {
|
||||
if ($(this).treegrid('getParentNode') === null) {
|
||||
return 0;
|
||||
}
|
||||
return $(this).treegrid('getParentNode').treegrid('getDepth') + 1;
|
||||
},
|
||||
/**
|
||||
* Method return true if node is root
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isRoot: function() {
|
||||
return $(this).treegrid('getDepth') === 0;
|
||||
},
|
||||
/**
|
||||
* Method return true if node has no child nodes
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isLeaf: function() {
|
||||
return $(this).treegrid('getChildNodes').length === 0;
|
||||
},
|
||||
/**
|
||||
* Method return true if node last in branch
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isLast: function() {
|
||||
if ($(this).treegrid('isNode')) {
|
||||
var parentNode = $(this).treegrid('getParentNode');
|
||||
if (parentNode === null) {
|
||||
if ($(this).treegrid('getNodeId') === $(this).treegrid('getRootNodes').last().treegrid('getNodeId')) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
if ($(this).treegrid('getNodeId') === parentNode.treegrid('getChildNodes').last().treegrid('getNodeId')) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* Method return true if node first in branch
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isFirst: function() {
|
||||
if ($(this).treegrid('isNode')) {
|
||||
var parentNode = $(this).treegrid('getParentNode');
|
||||
if (parentNode === null) {
|
||||
if ($(this).treegrid('getNodeId') === $(this).treegrid('getRootNodes').first().treegrid('getNodeId')) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
if ($(this).treegrid('getNodeId') === parentNode.treegrid('getChildNodes').first().treegrid('getNodeId')) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* Return true if node expanded
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isExpanded: function() {
|
||||
return $(this).hasClass('treegrid-expanded');
|
||||
},
|
||||
/**
|
||||
* Return true if node collapsed
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isCollapsed: function() {
|
||||
return $(this).hasClass('treegrid-collapsed');
|
||||
},
|
||||
/**
|
||||
* Return true if at least one of parent node is collapsed
|
||||
*
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
isOneOfParentsCollapsed: function() {
|
||||
var $this = $(this);
|
||||
if ($this.treegrid('isRoot')) {
|
||||
return false;
|
||||
} else {
|
||||
if ($this.treegrid('getParentNode').treegrid('isCollapsed')) {
|
||||
return true;
|
||||
} else {
|
||||
return $this.treegrid('getParentNode').treegrid('isOneOfParentsCollapsed');
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Expand node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
expand: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
if (!$this.treegrid('isLeaf') && !$this.treegrid("isExpanded")) {
|
||||
$this.trigger("expand");
|
||||
$this.trigger("change");
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Expand all nodes
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
expandAll: function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('getRootNodes').treegrid('expandRecursive');
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Expand current node and all child nodes begin from current
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
expandRecursive: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('expand');
|
||||
if (!$this.treegrid('isLeaf')) {
|
||||
$this.treegrid('getChildNodes').treegrid('expandRecursive');
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Collapse node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
collapse: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
if (!$this.treegrid('isLeaf') && !$this.treegrid("isCollapsed")) {
|
||||
$this.trigger("collapse");
|
||||
$this.trigger("change");
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Collapse all nodes
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
collapseAll: function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('getRootNodes').treegrid('collapseRecursive');
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Collapse current node and all child nodes begin from current
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
collapseRecursive: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
$this.treegrid('collapse');
|
||||
if (!$this.treegrid('isLeaf')) {
|
||||
$this.treegrid('getChildNodes').treegrid('collapseRecursive');
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Expand if collapsed, Collapse if expanded
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
toggle: function() {
|
||||
var $this = $(this);
|
||||
if ($this.treegrid('isExpanded')) {
|
||||
$this.treegrid('collapse');
|
||||
} else {
|
||||
$this.treegrid('expand');
|
||||
}
|
||||
return $this;
|
||||
},
|
||||
/**
|
||||
* Rendering node
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
render: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
|
||||
if ($this.treegrid('isOneOfParentsCollapsed')) {
|
||||
$this.hide();
|
||||
} else {
|
||||
$this.show();
|
||||
}
|
||||
if (!$this.treegrid('isLeaf')) {
|
||||
$this.treegrid('renderExpander');
|
||||
$this.treegrid('getChildNodes').treegrid('render');
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Rendering expander depends on node state
|
||||
*
|
||||
* @returns {Node}
|
||||
*/
|
||||
renderExpander: function() {
|
||||
return $(this).each(function() {
|
||||
var $this = $(this);
|
||||
var expander = $this.treegrid('getSetting', 'getExpander').apply(this);
|
||||
if (expander) {
|
||||
|
||||
if (!$this.treegrid('isCollapsed')) {
|
||||
expander.removeClass($this.treegrid('getSetting', 'expanderCollapsedClass'));
|
||||
expander.addClass($this.treegrid('getSetting', 'expanderExpandedClass'));
|
||||
} else {
|
||||
expander.removeClass($this.treegrid('getSetting', 'expanderExpandedClass'));
|
||||
expander.addClass($this.treegrid('getSetting', 'expanderCollapsedClass'));
|
||||
}
|
||||
} else {
|
||||
$this.treegrid('initExpander');
|
||||
$this.treegrid('renderExpander');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
$.fn.treegrid = function(method) {
|
||||
if (methods[method]) {
|
||||
return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method) {
|
||||
return methods.initTree.apply(this, arguments);
|
||||
} else {
|
||||
$.error('Method with name ' + method + ' does not exists for jQuery.treegrid');
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Plugin's default options
|
||||
*/
|
||||
$.fn.treegrid.defaults = {
|
||||
initialState: 'expanded',
|
||||
saveState: false,
|
||||
saveStateMethod: 'cookie',
|
||||
saveStateName: 'tree-grid-state',
|
||||
expanderTemplate: '<span class="treegrid-expander"></span>',
|
||||
indentTemplate: '<span class="treegrid-indent"></span>',
|
||||
expanderExpandedClass: 'treegrid-expander-expanded',
|
||||
expanderCollapsedClass: 'treegrid-expander-collapsed',
|
||||
treeColumn: 0,
|
||||
getExpander: function() {
|
||||
return $(this).find('.treegrid-expander');
|
||||
},
|
||||
getNodeId: function() {
|
||||
var template = /treegrid-([A-Za-z0-9_-]+)/;
|
||||
if (template.test($(this).attr('class'))) {
|
||||
return template.exec($(this).attr('class'))[1];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getParentNodeId: function() {
|
||||
var template = /treegrid-parent-([A-Za-z0-9_-]+)/;
|
||||
if (template.test($(this).attr('class'))) {
|
||||
return template.exec($(this).attr('class'))[1];
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getNodeById: function(id, treegridContainer) {
|
||||
var templateClass = "treegrid-" + id;
|
||||
return treegridContainer.find('tr.' + templateClass);
|
||||
},
|
||||
getChildNodes: function(id, treegridContainer) {
|
||||
var templateClass = "treegrid-parent-" + id;
|
||||
return treegridContainer.find('tr.' + templateClass);
|
||||
},
|
||||
getTreeGridContainer: function() {
|
||||
return $(this).closest('table');
|
||||
},
|
||||
getRootNodes: function(treegridContainer) {
|
||||
var result = $.grep(treegridContainer.find('tr'), function(element) {
|
||||
var classNames = $(element).attr('class');
|
||||
var templateClass = /treegrid-([A-Za-z0-9_-]+)/;
|
||||
var templateParentClass = /treegrid-parent-([A-Za-z0-9_-]+)/;
|
||||
return templateClass.test(classNames) && !templateParentClass.test(classNames);
|
||||
});
|
||||
return $(result);
|
||||
},
|
||||
getAllNodes: function(treegridContainer) {
|
||||
var result = $.grep(treegridContainer.find('tr'), function(element) {
|
||||
var classNames = $(element).attr('class');
|
||||
var templateClass = /treegrid-([A-Za-z0-9_-]+)/;
|
||||
return templateClass.test(classNames);
|
||||
});
|
||||
return $(result);
|
||||
},
|
||||
//Events
|
||||
onCollapse: null,
|
||||
onExpand: null,
|
||||
onChange: null
|
||||
|
||||
};
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -10,7 +10,7 @@
|
|||
<link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
|
||||
<!-- bootstrap-table 表格插件样式 -->
|
||||
<link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
|
||||
<link th:href="@{/ajax/libs/jqTreeGrid/jquery.treegrid.css}" rel="stylesheet"/>
|
||||
<link th:href="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.css}" rel="stylesheet"/>
|
||||
<link th:href="@{/css/animate.css}" rel="stylesheet"/>
|
||||
<link th:href="@{/css/style.css}" rel="stylesheet"/>
|
||||
<link th:href="@{/css/checkbox.css}" rel="stylesheet"/>
|
||||
|
|
@ -31,8 +31,7 @@
|
|||
<script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
|
||||
<script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>
|
||||
<!-- jquery-validate 表单树插件 -->
|
||||
<script th:src="@{/ajax/libs/jqTreeGrid/jquery.treegrid.min.js}"></script>
|
||||
<script th:src="@{/ajax/libs/jqTreeGrid/jquery.treegrid.extension.js}"></script>
|
||||
<script th:src="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.js}"></script>
|
||||
<!-- jquery-export 表格导出插件 -->
|
||||
<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js}"></script>
|
||||
<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/tableExport.js}"></script>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
field: 'status',
|
||||
title: '状态',
|
||||
align: "center",
|
||||
formatter: function(item, index) {
|
||||
formatter: function(value, item, index) {
|
||||
return $.table.selectDictLabel(datas, item.status);
|
||||
}
|
||||
},
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(row, index) {
|
||||
formatter: function(value, row, index) {
|
||||
if (row.parentId != 0) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.deptId + '\')"><i class="fa fa-edit">编辑</i></a> ');
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
title: '菜单名称',
|
||||
field: 'menuName',
|
||||
width: '20%',
|
||||
formatter: function(row, index) {
|
||||
formatter: function(value, row, index) {
|
||||
if (row.icon == null || row == "") {
|
||||
return row.menuName;
|
||||
} else {
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
field: 'menuType',
|
||||
width: '10%',
|
||||
align: "center",
|
||||
formatter: function(item, index) {
|
||||
formatter: function(value, item, index) {
|
||||
if (item.menuType == 'M') {
|
||||
return '<span class="label label-success">目录</span>';
|
||||
}
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
title: '可见',
|
||||
width: '10%',
|
||||
align: "center",
|
||||
formatter: function(row, index) {
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, row.visible);
|
||||
}
|
||||
},
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
title: '操作',
|
||||
width: '20%',
|
||||
align: "center",
|
||||
formatter: function(row, index) {
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.menuId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-info btn-xs ' + addFlag + '" href="#" onclick="$.operate.add(\'' + row.menuId + '\')"><i class="fa fa-plus"></i>新增</a> ');
|
||||
|
|
|
|||
Loading…
Reference in New Issue