jquery.treegrid.extension.js第三方组件使用
(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的
//16行
var _main_div = $("");
target.before(_main_div);
_main_div.append(target);
target.addClass("table table-hover treegrid-table table-bordered");
if (options.striped) {
target.addClass('table-striped');
}
// 工具条在外层包装一下div，样式用的bootstrap-table的
if(options.toolbar){
var _tool_div = $("");
var _tool_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 = $('正在努力地加载数据中，请稍候…… 没有记录 '+xhr.responseText+' options：声明的一个变量，在方法内给赋值成为了对象；
点击查询按钮后出现的div嵌套循环
原因：
每次执行_main_div 变量的时候都会创建新的div且会追加到options对象中造成的div循环嵌套如图所示：
清空之前的div有两种方式，
一：remove掉所有的div，再重新获取查询后的结果，不过弊端比较多
二：修改当前js文件使其不再创建新的div标签，也就是在页面进行改动选取class元素进行操作
修改如下：
//16行
var _main_div = $(".fixed-table-container");
// target.before(_main_div);
// _main_div.append(target);
target.addClass("table table-hover treegrid-table table-bordered");
if (options.striped) {
target.addClass('table-striped');
}
// 工具条在外层包装一下div，样式用的bootstrap-table的
// if(options.toolbar){
// var _tool_div = $("");
// var _tool_left_div = $("");
// _tool_left_div.append($(options.toolbar));
// _tool_div.append(_tool_left_div);
// _main_div.before(_tool_div);
// }完成后的页面显示效果为：
阿里产品购买活动优惠劵链接:
https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=bsu7swvn&utm_source=bsu7swvn