Skip to content

G
guns-vip
Commit a67e09cf by cyf783
Options

1、插件名由treegridData变更为bootstrapTreeTable 

2、添加加载loading提示
3、添加指定根节点配置--setRootCodeValue
parent 9d2c761c
Showing with 40 additions and 26 deletions
src/main/webapp/static/js/common/tree-table-object.js
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
*/ */
(function () { (function () {
var BSTreeTable = function (bstableId, url, columns) { var BSTreeTable = function (bstableId, url, columns) {
this.btInstance = null; //jquery和treegridData绑定的对象 this.btInstance = null; //jquery和bootstrapTreeTable绑定的对象
this.bstableId = bstableId; this.bstableId = bstableId;
this.url = Feng.ctxPath + url; this.url = Feng.ctxPath + url;
this.method = "post"; this.method = "post";
...@@ -26,16 +26,16 @@ ...@@ -26,16 +26,16 @@
init: function () { init: function () {
var tableId = this.bstableId; var tableId = this.bstableId;
this.btInstance = this.btInstance =
$('#'+tableId).treegridData({ $('#'+tableId).bootstrapTreeTable({
id: this.id,// 选取记录返回的值 id: this.id,// 选取记录返回的值
code: this.code,// 用于设置父子关系 code: this.code,// 用于设置父子关系
parentCode: this.parentCode,// 用于设置父子关系 parentCode: this.parentCode,// 用于设置父子关系
rootCodeValue: this.rootCodeValue,//设置根节点code值----可指定根节点，默认为null,"",0,"0"
type: this.method, //请求数据的ajax类型 type: this.method, //请求数据的ajax类型
url: this.url, //请求数据的ajax的url url: this.url, //请求数据的ajax的url
ajaxParams: this.data, //请求数据的ajax的data属性 ajaxParams: this.data, //请求数据的ajax的data属性
expandColumn: this.expandColumn,//在哪一列上面显示展开按钮,从0开始 expandColumn: this.expandColumn,//在哪一列上面显示展开按钮,从0开始
striped: true, //是否各行渐变色 striped: true, //是否各行渐变色
bordered: true, //是否显示边框
expandAll: this.expandAll, //是否全部展开 expandAll: this.expandAll, //是否全部展开
columns: this.columns, //列数组 columns: this.columns, //列数组
toolbar: "#" + this.toolbarId,//顶部工具条 toolbar: "#" + this.toolbarId,//顶部工具条
...@@ -68,6 +68,12 @@ ...@@ -68,6 +68,12 @@
this.parentCode = parentCode; this.parentCode = parentCode;
}, },
/** /**
* 设置根节点code值----可指定根节点，默认为null,"",0,"0"
*/
setRootCodeValue: function (rootCodeValue) {
this.rootCodeValue = rootCodeValue;
},
/**
* 设置是否默认全部展开 * 设置是否默认全部展开
*/ */
setExpandAll: function (expandAll) { setExpandAll: function (expandAll) {
...@@ -110,9 +116,9 @@ ...@@ -110,9 +116,9 @@
*/ */
refresh: function (parms) { refresh: function (parms) {
if (typeof parms != "undefined") { if (typeof parms != "undefined") {
this.btInstance.treegridData('refresh', parms.query);// 为了兼容bootstrap-table的写法 this.btInstance.bootstrapTreeTable('refresh', parms.query);// 为了兼容bootstrap-table的写法
} else { } else {
this.btInstance.treegridData('refresh'); this.btInstance.bootstrapTreeTable('refresh');
} }
} }
}; };
......
src/main/webapp/static/js/plugins/jquery-treegrid/extension/jquery.treegrid.extension.js
(function($) { (function($) {
"use strict"; "use strict";
$.fn.treegridData = function(options, param) { $.fn.bootstrapTreeTable = function(options, param) {
// 如果是调用方法 // 如果是调用方法
if (typeof options == 'string') { if (typeof options == 'string') {
return $.fn.treegridData.methods[options](this, param); return $.fn.bootstrapTreeTable.methods[options](this, param);
} }
// 如果是初始化组件 // 如果是初始化组件
options = $.extend({}, $.fn.treegridData.defaults, options || {}); options = $.extend({}, $.fn.bootstrapTreeTable.defaults, options || {});
// 是否有radio或checkbox // 是否有radio或checkbox
var hasSelectItem = false; var hasSelectItem = false;
var target = $(this); var target = $(this);
...@@ -16,7 +16,10 @@ ...@@ -16,7 +16,10 @@
var _main_div = $("<div class='fixed-table-container'></div>"); var _main_div = $("<div class='fixed-table-container'></div>");
target.before(_main_div); target.before(_main_div);
_main_div.append(target); _main_div.append(target);
target.addClass("table-hover treegrid-table"); target.addClass("table table-hover treegrid-table table-bordered");
if (options.striped) {
target.addClass('table-striped');
}
// 工具条在外层包装一下div，样式用的bootstrap-table的 // 工具条在外层包装一下div，样式用的bootstrap-table的
if(options.toolbar){ if(options.toolbar){
var _tool_div = $("<div class='fixed-table-toolbar'></div>"); var _tool_div = $("<div class='fixed-table-toolbar'></div>");
...@@ -27,14 +30,17 @@ ...@@ -27,14 +30,17 @@
} }
// 得到根节点 // 得到根节点
target.getRootNodes = function(data) { target.getRootNodes = function(data) {
// 指定Root节点值
var _root = options.rootCodeValue?options.rootCodeValue:null
var result = []; var result = [];
$.each(data, function(index, item) { $.each(data, function(index, item) {
// 这里兼容几种常见Root节点写法 // 这里兼容几种常见Root节点写法
if (!item[options.parentCode] // 默认的几种判断
|| item[options.parentCode] == '0' var _defaultRootFlag = item[options.parentCode] == '0'
|| item[options.parentCode] == 0 || item[options.parentCode] == 0
|| item[options.parentCode] == null || item[options.parentCode] == null
|| item[options.parentCode] == '') { || item[options.parentCode] == '';
if (!item[options.parentCode] || (_root?(item[options.parentCode] == options.rootCodeValue):_defaultRootFlag)){
result.push(item); result.push(item);
} }
// 添加一个默认属性，用来判断当前节点有没有被显示 // 添加一个默认属性，用来判断当前节点有没有被显示
...@@ -59,13 +65,6 @@ ...@@ -59,13 +65,6 @@
} }
}); });
}; };
target.addClass('table');
if (options.striped) {
target.addClass('table-striped');
}
if (options.bordered) {
target.addClass('table-bordered');
}
// 绘制行 // 绘制行
target.renderRow = function(tr,item){ target.renderRow = function(tr,item){
$.each(options.columns, function(index, column) { $.each(options.columns, function(index, column) {
...@@ -91,6 +90,15 @@ ...@@ -91,6 +90,15 @@
} }
// 加载数据 // 加载数据
target.load = function(parms){ target.load = function(parms){
var _tbody = target.find("tbody");
// 添加加载loading
var _loading = '<tr><td colspan="'+options.columns.length+'" style="height:50px"><div style="display: block;line-height:50px;text-align: center;">正在努力地加载数据中，请稍候……</div></td></tr>'
if(_tbody[0]){
_tbody.html(_loading);
}else{
target.html(_loading);
}
debugger;
$.ajax({ $.ajax({
type : options.type, type : options.type,
url : options.url, url : options.url,
...@@ -171,7 +179,7 @@ ...@@ -171,7 +179,7 @@
}; };
// 组件方法封装........ // 组件方法封装........
$.fn.treegridData.methods = { $.fn.bootstrapTreeTable.methods = {
// 返回选中记录的id（返回的id由配置中的id属性指定） // 返回选中记录的id（返回的id由配置中的id属性指定）
// 为了兼容bootstrap-table的写法，统一返回数组，这里只返回了指定的id // 为了兼容bootstrap-table的写法，统一返回数组，这里只返回了指定的id
getSelections : function(target, data) { getSelections : function(target, data) {
...@@ -197,10 +205,11 @@ ...@@ -197,10 +205,11 @@
// 组件的其他方法也可以进行类似封装........ // 组件的其他方法也可以进行类似封装........
}; };
$.fn.treegridData.defaults = { $.fn.bootstrapTreeTable.defaults = {
id : 'id',// 选取记录返回的值 id : 'id',// 选取记录返回的值
code : 'code',// 用于设置父子关系 code : 'code',// 用于设置父子关系
parentCode : 'parentId',// 用于设置父子关系 parentCode : 'parentId',// 用于设置父子关系
rootCodeValue: null,//设置根节点code值----可指定根节点，默认为null,"",0,"0"
data : [], // 构造table的数据集合 data : [], // 构造table的数据集合
type : "GET", // 请求数据的ajax类型 type : "GET", // 请求数据的ajax类型
url : null, // 请求数据的ajax的url url : null, // 请求数据的ajax的url
...@@ -208,7 +217,6 @@ ...@@ -208,7 +217,6 @@
expandColumn : null,// 在哪一列上面显示展开按钮 expandColumn : null,// 在哪一列上面显示展开按钮
expandAll : true, // 是否全部展开 expandAll : true, // 是否全部展开
striped : false, // 是否各行渐变色 striped : false, // 是否各行渐变色
bordered : false, // 是否显示边框
columns : [], columns : [],
toolbar: null,//顶部工具条 toolbar: null,//顶部工具条
expanderExpandedClass : 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标 expanderExpandedClass : 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标
......
src/main/webapp/static/modular/system/dept/dept.js
...@@ -25,7 +25,7 @@ Dept.initColumn = function () { ...@@ -25,7 +25,7 @@ Dept.initColumn = function () {
* 检查是否选中 * 检查是否选中
*/ */
Dept.check = function () { Dept.check = function () {
var selected = $('#' + this.id).treegridData('getSelections'); var selected = $('#' + this.id).bootstrapTreeTable('getSelections');
if(selected.length == 0){ if(selected.length == 0){
Feng.info("请先选中表格中的某一记录！"); Feng.info("请先选中表格中的某一记录！");
return false; return false;
......
src/main/webapp/static/modular/system/menu/menu.js
...@@ -31,7 +31,7 @@ Menu.initColumn = function () { ...@@ -31,7 +31,7 @@ Menu.initColumn = function () {
* 检查是否选中 * 检查是否选中
*/ */
Menu.check = function () { Menu.check = function () {
var selected = $('#' + this.id).treegridData('getSelections'); var selected = $('#' + this.id).bootstrapTreeTable('getSelections');
if (selected.length == 0) { if (selected.length == 0) {
Feng.info("请先选中表格中的某一记录！"); Feng.info("请先选中表格中的某一记录！");
return false; return false;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment