treeGird的实现1,由于不能用附件,所以将就着看一下

分享 未结 48 8095
interlij
interlij 2018-2-28
悬赏:20飞吻
GIT下载地址
http://220.163.113.209/root/layui_treeGridDEMO

/**
请命名成treeGrid.js
@Name:layui.treeGrid 树表格操作
@Author:luonianqing
@License:public,
首先感谢Layui的原码分项,本源码是在table.js的基面上改进的,如有BUG,请直接在FLY上留言,代码存在冗余,因为看得不够细,没时间,项目需要,Layui没有,我就写了
去除了排序,因为树型不支持表头排序
去除了全选,因为没有意义,不支持分页,因为也没有意义,也支除了记录条数限制,下级分支有多少条就展示多少条,只支持动态数据,不支持静态
增加了行选功能.即只要单击,其它的全不选,只有结点会被选中,双击展开
增加了treeDataCache,因为树是多级目录关系
不支持,树枝选择,下面全部被选中,也许将来会支持,现在满足项目需求即可

*/
layui.define(['laytpl', 'layer', 'form'], function(exports){
"use strict";
var treeDataCache;
var $ = layui.$
,laytpl = layui.laytpl
,layer = layui.layer
,form = layui.form
,hint = layui.hint()
,device = layui.device()
//外部接口
,treeGrid = {
config: {
checkName: 'LAY_CHECKED' //是否选中状态的字段名
,indexName: 'LAY_TABLE_INDEX' //下标索引名
} //全局配置项
,cache: {} //数据缓存
,index: layui.treeGrid ? (layui.treeGrid.index + 10000) : 0

//设置全局项
,set: function(options){
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}

//事件监听
,on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}

//操作当前实例
,thisTable = function(){
var that = this
,options = that.config
,id = options.id;

id && (thisTable.config[id] = options);

return {
reload: function(options){
that.reload.call(that, options);
}
,config: options
}
}

//字符常量
,MOD_NAME = 'treeGrid', ELEM = '.layui-table', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled', NONE = 'layui-none'

,ELEM_VIEW = 'layui-table-view', ELEM_HEADER = '.layui-table-header', ELEM_BODY = '.layui-table-body', ELEM_MAIN = '.layui-table-main', ELEM_FIXED = '.layui-table-fixed', ELEM_FIXL = '.layui-table-fixed-l', ELEM_FIXR = '.layui-table-fixed-r', ELEM_TOOL = '.layui-table-tool', ELEM_PAGE = '.layui-table-page', ELEM_SORT = '.layui-table-sort', ELEM_EDIT = 'layui-table-edit', ELEM_HOVER = 'layui-table-hover'

//thead区域模板
,TPL_HEADER = function(options){
var rowCols = '{{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}}';

options = options || {};
return ['<table cellspacing="0" cellpadding="0" border="0" class="layui-table" '
,'{{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}>'
,'<thead>'
,'{{# layui.each(d.data.cols, function(i1, item1){ }}'
,'<tr>'
,'{{# layui.each(item1, function(i2, item2){ }}'
,'{{# if(item2.fixed && item2.fixed !== "right"){ left = true; } }}'
,'{{# if(item2.fixed === "right"){ right = true; } }}'
,function(){
if(options.fixed && options.fixed !== 'right'){
return '{{# if(item2.fixed && item2.fixed !== "right"){ }}';
}
if(options.fixed === 'right'){
return '{{# if(item2.fixed === "right"){ }}';
}
return '';
}()
,'<th data-field="{{ item2.field||i2 }}" {{# if(item2.minWidth){ }}data-minwidth="{{item2.minWidth}}"{{# } }} '+ rowCols +' {{# if(item2.unresize){ }}data-unresize="true"{{# } }}>'
,'<div class="layui-table-cell laytable-cell-'
,'{{# if(item2.colspan > 1){ }}'
,'group'
,'{{# } else { }}'
,'{{d.index}}-{{item2.field || i2}}'
,'{{# if(item2.type !== "normal"){ }}'
,' laytable-cell-{{ item2.type }}'
,'{{# } }}'
,'{{# } }}'
,'" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}>'
,'{{# if(item2.type === "checkbox"){ }}' //复选框
,''
,'{{# } else { }}'
,'<span>{{item2.title||""}}</span>'
,'{{# } }}'
,'</div>'
,'</th>'
,(options.fixed ? '{{# }; }}' : '')
,'{{# }); }}'
,'</tr>'
,'{{# }); }}'
,'</thead>'
,'</table>'].join('');
}

//tbody区域模板
,TPL_BODY = ['<table cellspacing="0" cellpadding="0" border="0" class="layui-table" '
,'{{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}>'
,'<tbody></tbody>'
,'</table>'].join('')

//主模板
,TPL_MAIN = ['<div class="layui-form layui-border-box {{d.VIEW_CLASS}}" lay-filter="LAY-table-{{d.index}}" style="{{# if(d.data.width){ }}width:{{d.data.width}}px;{{# } }} {{# if(d.data.height){ }}height:{{d.data.height}}px;{{# } }}">'

,'{{# if(d.data.toolbar){ }}'
,'<div class="layui-table-tool"></div>'
,'{{# } }}'

,'<div class="layui-table-box">'
,'{{# var left, right; }}'
,'<div class="layui-table-header">'
,TPL_HEADER()
,'</div>'
,'<div class="layui-table-body layui-table-main">'
,TPL_BODY
,'</div>'

,'{{# if(left){ }}'
,'<div class="layui-table-fixed layui-table-fixed-l">'
,'<div class="layui-table-header">'
,TPL_HEADER({fixed: true})
,'</div>'
,'<div class="layui-table-body">'
,TPL_BODY
,'</div>'
,'</div>'
,'{{# }; }}'

,'{{# if(right){ }}'
,'<div class="layui-table-fixed layui-table-fixed-r">'
,'<div class="layui-table-header">'
,TPL_HEADER({fixed: 'right'})
,'<div class="layui-table-mend"></div>'
,'</div>'
,'<div class="layui-table-body">'
,TPL_BODY
,'</div>'
,'</div>'
,'{{# }; }}'
,'</div>'

,'<style>'
,'{{# layui.each(d.data.cols, function(i1, item1){'
,'layui.each(item1, function(i2, item2){ }}'
,'.laytable-cell-{{d.index}}-{{item2.field||i2}}{ '
,'{{# if(item2.width){ }}'
,'width: {{item2.width}}px;'
,'{{# } }}'
,' }'
,'{{# });'
,'}); }}'
,'</style>'
,'</div>'].join('')

,_WIN = $(window)
,_DOC = $(document)

//构造器
,Class = function(options){
var that = this;
that.index = ++treeGrid.index;
that.config = $.extend({}, that.config, treeGrid.config, options);
that.render();
};

//默认配置
Class.prototype.config = {
limit: 10 //每页显示的数量
,loading: true //请求数据时,是否显示loading
,cellMinWidth: 60 //所有单元格默认最小宽度
};

//表格渲染
Class.prototype.render = function(){
var that = this
,options = that.config;

options.elem = $(options.elem);
options.where = options.where || {};
options.id = options.id || options.elem.attr('id');

//请求参数的自定义格式
options.request = $.extend({}, options.request)

//响应数据的自定义格式
options.response = $.extend({
statusName: 'code'
,statusCode: 0
,msgName: 'msg'
,dataName: 'data'
,countName: 'count'
}, options.response);
if(!options.elem[0]) return that;
that.setAre1;
options.height = _WIN.height() - that.fullHeightGap;
}
};

//表格重载
Class.prototype.reload = function(options){
var that = this;
if(that.config.data && that.config.data.constructor === Array) delete that.config.data;
that.config = $.extend({}, that.config, options);
that.render();
};

//获得数据
Class.prototype.pullData = function(curr, loadIndex){
var that = this
,options = that.config
,request = options.request
,response = options.response;
that.startTime = new Date().getTime(); //渲染开始时间
var parentId=0;
if(options.url){ //Ajax请求
if(options.refresh)
{

var refreshId=options.refresh.parentNodeId;
var jsonArray =$.parseJSON("{\""+options.paramName+"\":"+refreshId+"}");
options.refresh=jsonArray;
parentId=refreshId;
}
var params = {};
$.ajax({
type: options.method || 'get'
,url: options.url
,data: $.extend(params,options.refresh, options.where)
,dataType: 'json'
,success: function(res){
if(res[response.statusName] != response.statusCode){
that.renderForm();
return that.layMain.html('<div class="'+ NONE +'">'+ (res[response.msgName] || '返回的数据状态异常') +'</div>');
}
//console.log(options);
that.renderDat0][index.split("_")[1]]) return;
if(thisData[index.split("_")[0]][index.split("_")[1]].constructor === Array)
return;
else {
thisData[index.split("_")[0]][index.split("_")[1]][options.checkName]=checked;
}

};
//获取cssRule
Class.prototype.getCssRule = function(field, callback){
var that = this
,style = that.elem.find('style')[0]
,sheet = style.sheet || style.styleSheet || {}
,rules = sheet.cssRules || sheet.rules;
layui.each(rules, function(i, item){
if(item.selectorText === ('.laytable-cell-'+ that.index +'-'+ field)){
return callback(item), true;
}
});
};

//铺满表格主体高度
Class.prototype.fullSize = function(){
var that = this
,options = that.config
,height = options.height, bodyHeight;

if(that.fullHeightGap){
height = _WIN.height() - that.fullHeightGap;
if(height < 135) height = 135;
that.elem.css('height', height);
}

//tbody区域高度
bodyHeight = parseFloat(height) - parseFloat(that.layHeader.height()) - 1;
if(options.toolbar){
bodyHeight = bodyHeight - that.layTool.outerHeight();
}
that.layMain.css('height', bodyHeight);
};

//获取滚动条宽度
Class.prototype.getScrollWidth = function(elem){
var width = 0;
if(elem){
width = elem.offsetWidth - elem.clientWidth;
} else {
elem = document.createElement('div');
elem.style.width = '100px';
elem.style.height = '100px';
elem.style.overflowY = 'scroll';

document.body.appendChild(elem);
width = elem.offsetWidth - elem.clientWidth;
document.body.removeChild(elem);
}
return width;
};

//滚动条补丁
Class.prototype.scrollPatch = function(){
var that = this
,layMainTable = that.layMain.children('table')
,scollWidth = that.layMain.width() - that.layMain.prop('clientWidth') //纵向滚动条宽度
,scollHeight = that.layMain.height() - that.layMain.prop('clientHeight') //横向滚动条高度
,getScrollWidth = that.getScrollWidth(that.layMain[0]) //获取主容器滚动条宽度,如果有的话
,outWidth = layMainTable.outerWidth() - that.layMain.width(); //表格内容器的超出宽度

//如果存在自动列宽,则要保证绝对填充满,并且不能出现横向滚动条
if(that.autoColNums && outWidth < 5 && !that.scrollPatchWStatus){
var th = that.layHeader.eq(0).find('thead th:last-child')
,field = th.dat0){
var patchElem = $('<th class="layui-table-patch"><div class="layui-table-cell"></div></th>'); //补丁元素
patchElem.find('div').css({
width: scollWidth
});
that.layHeader.eq(0).find('thead tr').append(patchElem)
}
} else {
that.layHeader.eq(0).find('.layui-table-patch').remove();
}

//固定列区域高度
var mainHeight = that.layMain.height()
,fixHeight = mainHeight - scollHeight;
that.layFixed.find(ELEM_BODY).css('height', layMainTable.height() > fixHeight ? fixHeight : 'auto');

//表格宽度小于容器宽度时,隐藏固定列
that.layFixRight[outWidth > 0 ? 'removeClass' : 'addClass'](HIDE);

//操作栏
that.layFixRight.css('right', scollWidth - 1);
};

//事件处理
Class.prototype.events = function(){
var that = this
,options = that.config
,_BODY = $('body')
,dict = {}
,th = that.layHeader.find('th')
,resizing
,ELEM_CELL = '.layui-table-cell'
,filter = options.elem.attr('lay-filter');

//拖拽调整宽度
th.on('mousemove', function(e){
var othis = $(this)
,oLeft = othis.offset().left
,pLeft = e.clientX - oLeft;
if(othis.attr('colspan') > 1 || othis.dat0][index.split("_")[1]] || {}) : {}
,type: 'one'
});
});
that.elem.on('click', 'i.layui-tree-head', function()
{
var othis = $(this)
,index = othis.parents('tr').eq(0).dat0][index.split("_")[1]];
var levelField=options.levelField
,paramName=options.paramName
,paramValue=options.paramValue
,scopeField=options.scopeField;
var tempValue=data[paramValue];
$.ajax({
type: options.method || 'get'
,url: options.url
,data: paramName+"="+tempValue
,dataType: 'json'
,success: function(res){
if(res[response.statusName] != response.statusCode){
that.renderForm();
return that.layMain.html('<div class="'+ NONE +'">'+ (res[response.msgName] || '返回的数据状态异常') +'</div>');
}
that.renderDat0][index.split("_")[1]][options.checkName]=true;

}
else
{
var otherItemId=item.id.substring("tableCheckBox".length,item.id.length);
item.checked = false;
treeGrid.cache[that.key][otherItemId.split("_")[0]][otherItemId.split("_")[1]][options.checkName]=false;
}
});
that.renderForm();
layui.event.call(this, MOD_NAME, 'checkbox('+ filter +')', {
checked: true
,data: treeGrid.cache[that.key] ? (treeGrid.cache[that.key][index.split("_")[0]][index.split("_")[1]] || {}) : {}
,type: 'one'
});

}

});
that.elem.on('dblclick', 'td', function()
{
var othis = $(this)
,index = othis.parents('tr').eq(0).dat0][index.split("_")[1]];
var levelField=options.levelField
,paramName=options.paramName
,paramValue=options.paramValue
,scopeField=options.scopeField;
var tempValue=data[paramValue];
$.ajax({
type: options.method || 'get'
,url: options.url
,data: paramName+"="+tempValue
,dataType: 'json'
,success: function(res){
if(res[response.statusName] != response.statusCode){
that.renderForm();
return that.layMain.html('<div class="'+ NONE +'">'+ (res[response.msgName] || '返回的数据状态异常') +'</div>');
}
that.renderDat0][index.split("_")[1]];

data[field] = value; //更新缓存中的值

layui.event.call(this, MOD_NAME, 'edit('+ filter +')', {
value: value
,data: data
,field: field
});
}).on('blur', '.'+ELEM_EDIT, function(){
var templet
,othis = $(this)
,field = othis.parent().dat0 || othis.append(select);
} else { //输入框
var input = $('<input class="layui-input '+ ELEM_EDIT +'">');
input[0].value = othis.dat0 || othis.append(input);
input.focus();
}
return;
}

//如果出现省略,则可查看更多
if(elemCell.find('.layui-form-switch,.layui-form-checkbox')[0]) return; //限制不出现更多(暂时)

if(Math.round(elemCell.prop('scrollWidth')) > Math.round(elemCell.outerWidth())){
that.tipsIndex = layer.tips([
'<div class="layui-table-tips-main" style="margin-top: -'+ (elemCell.height() + 16) +'px;'+ function(){
if(options.size === 'sm'){
return 'padding: 4px 15px; font-size: 12px;';
}
if(options.size === 'lg'){
return 'padding: 14px 15px;';
}
return '';
}() +'">'
,elemCell.html()
,'</div>'
,'<i class="layui-icon layui-table-tips-c">ဆ</i>'
].join(''), elemCell[0], {
tips: [3, '']
,time: -1
,anim: -1
,maxWidth: (device.ios || device.android) ? 300 : 600
,isOutAnim: false
,skin: 'layui-table-tips'
,success: function(layero, index){
layero.find('.layui-table-tips-c').on('click', function(){
layer.close(index);
});
}
});
}
});

//工具条操作事件
that.layBody.on('click', '*[lay-event]', function(){
var othis = $(this)
,index = othis.parents('tr').eq(0).dat0][index.split("_")[1]];

layui.event.call(this, MOD_NAME, 'tool('+ filter +')', {
data: treeGrid.clearCacheKey(data)
,event: othis.attr('lay-event')
,tr: tr
,del: function(){
treeGrid.cache[that.key][index] = [];
tr.remove();
that.scrollPatch();
}
,update: function(fields){
fields = fields || {};
layui.each(fields, function(key, value){
if(key in data){
var templet, td = tr.children('td[data-field="'+ key +'"]');
data[key] = value;
that.eachCols(function(i, item2){
if(item2.field == key && item2.templet){
templet = item2.templet;
}
});
td.children(ELEM_CELL).html(
templet ? laytpl($(templet).html() || value).render(data) : value
);
td.data('content', value);
}
});
}
});
tr.addClass(ELEM_CLICK).siblings('tr').removeClass(ELEM_CLICK);
});

//同步滚动条
that.layMain.on('scroll', function(){
var othis = $(this)
,scrollLeft = othis.scrollLeft()
,scrollTop = othis.scrollTop();

that.layHeader.scrollLeft(scrollLeft);
that.layFixed.find(ELEM_BODY).scrollTop(scrollTop);

layer.close(that.tipsIndex);
});

_WIN.on('resize', function(){ //自适应
that.fullSize();
that.scrollPatch();
});
};

//初始化
treeGrid.init = function(filter, settings){
settings = settings || {};
var that = this
,elemTable = filter ? $('table[lay-filter="'+ filter +'"]') : $(ELEM + '[lay-data]')
,errorTips = 'Table element property lay-data configuration item has a syntax error: ';

//遍历数据表格
elemTable.each(function(){
var othis = $(this), treeGridData = othis.attr('lay-data');
try{
treeGridData = new Function('return '+ treeGridData)();
} catch(e){
hint.error(errorTips + treeGridData)
}
var cols = [], options = $.extend({
elem: this
,cols: []
,data: []
,skin: othis.attr('lay-skin') //风格
,size: othis.attr('lay-size') //尺寸
,even: typeof othis.attr('lay-even') === 'string' //偶数行背景
}, treeGrid.config, settings, treeGridData);

filter && othis.hide();

//获取表头数据
othis.find('thead>tr').each(function(i){
options.cols[i] = [];
$(this).children().each(function(ii){
var th = $(this), itemData = th.attr('lay-data');

try{
itemData = new Function('return '+ itemData)();
} catch(e){
return hint.error(errorTips + itemData)
}

var row = $.extend({
title: th.text()
,colspan: th.attr('colspan') || 0 //列单元格
,rowspan: th.attr('rowspan') || 0 //行单元格
}, itemData);

if(row.colspan < 2) cols.push(row);
options.cols[i].push(row);
});
});

//获取表体数据
othis.find('tbody>tr').each(function(i1){
var tr = $(this), row = {};
//如果定义了字段名
tr.children('td').each(function(i2, item2){
var td = $(this)
,field = td.data('field');
if(field){
return row[field] = td.html();
}
});
//如果未定义字段名
layui.each(cols, function(i3, item3){
var td = tr.children('td').eq(i3);
row[item3.field] = td.html();
});
options.data[i1] = row;
});
treeGrid.render(options);
});

return that;
};
treeGrid.refreshNode = function(id, parentId,options){
$("#treeHead"+parentId).attr("isexport","false");
$("#treeHead"+parentId).click();
};
//表格选中状态
treeGrid.checkStatus = function(id){
var nums = 0
,invalidNum = 0
,arr = []
,data = treeGrid.cache[id] || [];
//计算全选个数
layui.each(data, function(i, item)
{
layui.each(item, function(j, itemTemp)
{
if (itemTemp.constructor === Array) {
invalidNum++; //无效数据,或已删除的
return;
}
if (itemTemp[treeGrid.config.checkName]) {
nums++;
arr.push(treeGrid.clearCacheKey(itemTemp));
}
});
});
return {
data: arr //选中的数据
,isAll: data.length ? (nums === (data.length - invalidNum)) : false //是否全选
};
};

//表格重载
thisTable.config = {};
treeGrid.reload = function(id, options){
var config = thisTable.config[id];
options = options || {};
if(!config) return hint.error('The ID option was not found in the treeGrid instance');
if(options.data && options.data.constructor === Array) delete config.data;
return treeGrid.render($.extend(true, {}, config, options));
};

//核心入口
treeGrid.render = function(options){
var inst = new Class(options);
return thisTable.call(inst);
};

//清除临时Key
treeGrid.clearCacheKey = function(data){
data = $.extend({}, data);
delete data[treeGrid.config.checkName];
delete data[treeGrid.config.indexName];
return data;
};

//自动完成渲染
treeGrid.init();

exports(MOD_NAME, treeGrid);
});
在layAll.js中增加调用

//内置模块
,modules = {
layer: 'modules/layer' //弹层
,laydate: 'modules/laydate' //日期
,laypage: 'modules/laypage' //分页
,laytpl: 'modules/laytpl' //模板引擎
,layim: 'modules/layim' //web通讯
,layedit: 'modules/layedit' //富文本编辑器
,form: 'modules/form' //表单集
,upload: 'modules/upload' //上传
,tree: 'modules/tree' //树结构
,treeGrid: 'modules/treeGrid' //treeGrid --------------------------------------------------------------这行
,table: 'modules/table' //表格
,element: 'modules/element' //常用元素操作
,util: 'modules/util' //工具块
,flow: 'modules/flow' //流加载
,carousel: 'modules/carousel' //轮播
,code: 'modules/code' //代码修饰器
,jquery: 'modules/jquery' //DOM库(第三方)

,mobile: 'modules/mobile' //移动大模块 | 若当前为开发目录,则为移动模块入口,否则为移动模块集合
,'layui.all': '../layui.all' //PC模块合并版
};
相关JSON 请注意一定要有level字段只支持动态,
第一层 示例
{
"code": 0,
"msg": "",
"data": [{
"id": 517,
"baseCode": "700",
"keyName": "评委会导航",
"keyShortName": "评委会",
"keyValue": "评委会导航",
"typeValue": "0",
"note": "评委会树",
"sort": 1995.0000,
"isPublic": true,
"parentId": 0,
"level": 1,
"allClassId": "0,",
"isLeaf": false,
"isLock": true,
"lockPass": "goodghost",
"loaded": false,
"expanded": true
}],
"success": true
}
第二层示例

{
"code": 0,
"msg": "",
"data": [{
"id": 518,
"baseCode": "701",
"keyName": "云南省",
"keyShortName": "云南省",
"keyValue": "01",
"typeValue": "0",
"note": "云南省",
"sort": 0.0000,
"isPublic": true,
"parentId": 517,
"level": 2,
"allClassId": "0,517,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}],
"success": true
}
第二层
{
"code": 0,
"msg": "",
"data": [{
"id": 520,
"baseCode": "7010",
"keyName": "昆明市",
"keyShortName": "",
"keyValue": "010",
"typeValue": "0",
"note": "",
"sort": 666.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 912,
"baseCode": "7011",
"keyName": "曲靖市",
"keyShortName": "曲靖市",
"keyValue": "011",
"typeValue": "0",
"note": "辖2个市辖区、6个县,代管1个县级市。市人民政府驻麒麟区文昌街78号。",
"sort": 665.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 913,
"baseCode": "7012",
"keyName": "玉溪市",
"keyShortName": "玉溪",
"keyValue": "012",
"typeValue": "0",
"note": "辖2个市辖区、4个县、3个自治县。市人民政府驻红塔区聂耳路。",
"sort": 664.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 914,
"baseCode": "7013",
"keyName": "保山市",
"keyShortName": "保山",
"keyValue": "013",
"typeValue": "0",
"note": "辖1个市辖区、3个县,代管1个县级市。市人民政府驻隆阳区同仁街。",
"sort": 663.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 915,
"baseCode": "7014",
"keyName": "昭通市",
"keyShortName": "昭通",
"keyValue": "昭通",
"typeValue": "0",
"note": "辖1个市辖区、10个县。市人民政府驻昭阳区崇义街。",
"sort": 662.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 916,
"baseCode": "7015",
"keyName": "丽江市",
"keyShortName": "丽江",
"keyValue": "丽江",
"typeValue": "0",
"note": "辖1个市辖区、2个县、2个自治县。市人民政府驻古城区玉雪大道。",
"sort": 661.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 917,
"baseCode": "7016",
"keyName": "普洱市",
"keyShortName": "普洱",
"keyValue": "普洱",
"typeValue": "0",
"note": "辖1个市辖区、9个自治县。市人民政府驻思茅区普洱大道。",
"sort": 660.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 918,
"baseCode": "7017",
"keyName": "临沧市",
"keyShortName": "临沧",
"keyValue": "临沧",
"typeValue": "0",
"note": "辖1个市辖区、4个县、3个自治县。市人民政府驻临翔区世纪路。",
"sort": 659.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 919,
"baseCode": "7018",
"keyName": "文山壮族苗族自治州",
"keyShortName": "文山",
"keyValue": "文山",
"typeValue": "0",
"note": "辖1个县级市、8个县。自治州人民政府驻文山市开化街道。",
"sort": 658.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 920,
"baseCode": "7019",
"keyName": "红河哈尼族彝族自治州",
"keyShortName": "红河",
"keyValue": "红河自治州",
"typeValue": "0",
"note": "辖4个县级市、6个县、3个自治县。自治州人民政府驻蒙自市天马路。",
"sort": 657.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 921,
"baseCode": "7020",
"keyName": "西双版纳傣族自治州",
"keyShortName": "西双版纳",
"keyValue": "西双版纳",
"typeValue": "0",
"note": "辖1个县级市、2个县。自治州人民政府驻景洪市宣慰大道。",
"sort": 656.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 922,
"baseCode": "7021",
"keyName": "楚雄彝族自治州",
"keyShortName": "楚雄",
"keyValue": "楚雄",
"typeValue": "0",
"note": "辖1个县级市、9个县。自治州人民政府驻楚雄市丰胜路。",
"sort": 655.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 923,
"baseCode": "7022",
"keyName": "大理白族自治州",
"keyShortName": "大理",
"keyValue": "大理",
"typeValue": "0",
"note": "辖1个县级市、8个县、3个自治县。自治州人民政府驻大理市宾川路。",
"sort": 654.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 924,
"baseCode": "7023",
"keyName": "德宏傣族景颇族自治州",
"keyShortName": "德宏",
"keyValue": "德宏",
"typeValue": "0",
"note": "辖2个县级市、3个县。自治州人民政府驻芒市勇罕街。",
"sort": 653.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 925,
"baseCode": "7024",
"keyName": "怒江傈傈族自治州",
"keyShortName": "怒江",
"keyValue": "怒江",
"typeValue": "0",
"note": "辖2个县、2个自治县。自治州人民政府驻泸水县人民路。",
"sort": 652.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}, {
"id": 926,
"baseCode": "7025",
"keyName": "迪庆藏族自治州",
"keyShortName": "迪庆",
"keyValue": "迪庆",
"typeValue": "0",
"note": "辖1个县、1个自治县,代管1个县级市。自治州人民政府驻香格里拉市长征大道",
"sort": 651.0000,
"isPublic": true,
"parentId": 518,
"level": 3,
"allClassId": "0,517,518,",
"isLeaf": false,
"isLock": false,
"lockPass": "",
"loaded": false,
"expanded": true
}],
"success": true
}
前端代码:
<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table> //声名


layui.use(['element', 'layer', 'form', 'upload', 'treeGrid'], function () { .......

var treeGrid = layui.treeGrid; //很重要

var treeTable = treeGrid.render({
elem: '#treeTable'
,id:'treeTable' //这一行一定需要,和上一行不一样,这个是需要用来作数据修改和定位的
,levelField:'level' //表示树的级别字段,从1开始,从数据Json传回时必须是1,2,3,4,5...
,paramName:'parentId' //表示树向下展开时向后端传弟的参数名称,值就是作用的paramValue
,paramValue:'id' //表示树向下展开时向后端传弟的参数名称,一定是{url}+{paramName}={paramValue},现在就是{url}+parentId={id}
,scopeField:'baseCode' //表示树的图标作用在哪个字段前面,并表示父亲需向下传递的参数,一定是{url}+{parentParame}={baseCode},该字段一定要显示
,url: '/web/dictTree/getDataByParentId'
,cols: [[
{checkbox: true, fixed: true}
,{field:'baseCode', title: '编号', width:140}
,{field:'id', title: 'ID', width:80}
,{field:'keyName', width:140 ,title: '键名称'}
,{field:'keyShortName', width:140 ,title: '键简称'}
,{field:'keyValue', width:140 ,title: '键值'}
,{field:'typeValue', width:140 ,title: '类型值'}
,{field:'note', width:140 ,title: '备注'}
,{field:'sort', width:100 ,title: '排序',fixed: 'right'}
,{field:'isPublic', width:100 ,title: '状态',templet: '#isPublicTpl',fixed: 'right'}
]]
,limit:300
,page: false
,height: 'full-200'
});
然后,,刷新方法
 treeGrid.refreshNode("titleTable",'517');



经测试能用.得到选中的记录方法自己参考Table.

var checkStatus = treeGrid.checkStatus('treeTable');
var data = checkStatus.data;
console.log(data)
回帖