如何实现243-layui区域树xmSelect的懒加载，叶子节点选择后自动追溯并展开父节点？
- 内容介绍
- 文章标签
- 相关推荐
本文共计661个文字，预计阅读时间需要3分钟。
javascriptvar regionData=[];var url=ctx + '/base/region/queryByAll';var rtnRegion=admin.syncReq(url, {parentId: 0});regionData=rtnRegion.data;active.renderRegionData(regionData, regionId);var regionSel=xmSelect.render({ el: '
var regionData = [];
var url = ctx+'/base/region/queryByAll';
var rtnRegion=admin.syncReq(url,{parentId:0});
regionData = rtnRegion.data;
active.renderRegionData(regionData,regionId);
var regionSel = xmSelect.render({
el: '#regionSel',
autoRow: true,
filterable: true,
model: {
label: {
block: {
//自定义渲染label, 默认渲染name, 回调参数(item, sels)
template: function (item, sels) {
var rtnLabel = '';
var parent = item.parent;
if(parent){
if(parent.parent){
rtnLabel=parent.parent.name+'/'
}
rtnLabel+=parent.name+'/';
}
rtnLabel+=item.name;
return rtnLabel;
},
},
},
//展示类型, 下拉框形式: absolute, 直接显示模式: relative
type: 'absolute',
},
tree: {
//是否显示树状结构
show: true,
//是否展示三角图标
showFolderIcon: true,
//是否显示虚线
showLine: false,
//间距
indent: 20,
//默认展开节点的数组, 为 true 时, 展开所有节点
expandedKeys: true,
//是否严格遵守父子模式
strict: false,
lazy: true,
load:function (item,cb) {
if(item.type==3){
cb([])
}else{
if(!item.children || item.children.length==0){
var _rtn=admin.syncReq(url,{parentId:item.id});
if(_rtn.data && _rtn.data.length>0){
var children = _rtn.data;
$.each(children,function (index,_item) {
if(_item.type==3){
_item.children = null;
}
var _parent = {name:item.name,id:item.id,type:item.type}
if(item.parent){
_parent = $.extend(_parent,{parent:item.parent});
}
_item = $.extend(_item,{ parent:_parent });
})
cb(children);
}
}else{
cb([])
}
}
}
},
height: '200px',
// radio:true,
// clickClose:true,
toolbar: {
show: true,
list: [ 'CLEAR' ]
},
data(){
return regionData;
},
on:function (data) {
setTimeout(function (){
var valueStr = regionSel.getValue("valueStr")
var nameStr = regionSel.getValue("nameStr")
$("[name=regionId]").val(valueStr);
$("[name=regionName]").val(nameStr);
},100)
}
});
if(regionId){
regionSel.setValue(regionId.split(","))
}
递归查找父级节点 的实现：
var active = {
//递归查找父级节点
//取节点，得id、pid
//比对顶级list，遍历，定义为n
//若pid=n.id，则n.children=[{parentId:pid}],结束
//若pid!=n.id，继续 goto X
//X: 查父节点1，得id1、pid1
//查父节点1.children=[{parentId:id1}]
//比对顶级list，遍历，定义为n,
//若pid1=n.id，则n.children=[{parentId:若pid1}],
// 同时遍历：n.children，定义为c,当c.id=查父节点1.id, 则c=查父节点1
// 结束
//若pid1!=n.id,继续 goto X
findParentNodesRecursion:function (treeData,pid){
var rtn = admin.syncReq(url,{id:pid});
var p1 = rtn.data[0];
var id1 = p1.id;
var pid1 = p1.parentId;
rtn = admin.syncReq(url,{parentId:id1});
p1.children = rtn.data;
for(var i=0;i<treeData.length;i++){
var n = treeData[i];
if(pid1==n.id){
rtn = admin.syncReq(url,{parentId:pid1});
n.children = rtn.data;
for(var j=0;j<n.children.length;j++){
var c = n.children[j];
if(c.id==p1.id){
c = p1;
n.children[j] = p1;
}
}
return;
}
}
active.findParentNodesRecursion(treeData,pid1)
},
findParentNodes:function (treeData,node){
var id = node.id;
var rtn = admin.syncReq(url,{id:id});
node = rtn.data[0];
var pid = node.parentId;
for(var i=0;i<treeData.length;i++){
var n = treeData[i];
if(pid==n.id){
rtn = admin.syncReq(url,{parentId:pid});
n.children = rtn.data;
return;
}
}
active.findParentNodesRecursion(treeData,pid);
},
renderRegionData:function (treeData,selIds){
if(!selIds){
return;
}
var idArr = selIds.split(",");
for(var i=0;i<idArr.length;i++){
var rid = idArr[i];
active.findParentNodes(treeData,{id:rid});
}
},
}
本文共计661个文字，预计阅读时间需要3分钟。
javascriptvar regionData=[];var url=ctx + '/base/region/queryByAll';var rtnRegion=admin.syncReq(url, {parentId: 0});regionData=rtnRegion.data;active.renderRegionData(regionData, regionId);var regionSel=xmSelect.render({ el: '
var regionData = [];
var url = ctx+'/base/region/queryByAll';
var rtnRegion=admin.syncReq(url,{parentId:0});
regionData = rtnRegion.data;
active.renderRegionData(regionData,regionId);
var regionSel = xmSelect.render({
el: '#regionSel',
autoRow: true,
filterable: true,
model: {
label: {
block: {
//自定义渲染label, 默认渲染name, 回调参数(item, sels)
template: function (item, sels) {
var rtnLabel = '';
var parent = item.parent;
if(parent){
if(parent.parent){
rtnLabel=parent.parent.name+'/'
}
rtnLabel+=parent.name+'/';
}
rtnLabel+=item.name;
return rtnLabel;
},
},
},
//展示类型, 下拉框形式: absolute, 直接显示模式: relative
type: 'absolute',
},
tree: {
//是否显示树状结构
show: true,
//是否展示三角图标
showFolderIcon: true,
//是否显示虚线
showLine: false,
//间距
indent: 20,
//默认展开节点的数组, 为 true 时, 展开所有节点
expandedKeys: true,
//是否严格遵守父子模式
strict: false,
lazy: true,
load:function (item,cb) {
if(item.type==3){
cb([])
}else{
if(!item.children || item.children.length==0){
var _rtn=admin.syncReq(url,{parentId:item.id});
if(_rtn.data && _rtn.data.length>0){
var children = _rtn.data;
$.each(children,function (index,_item) {
if(_item.type==3){
_item.children = null;
}
var _parent = {name:item.name,id:item.id,type:item.type}
if(item.parent){
_parent = $.extend(_parent,{parent:item.parent});
}
_item = $.extend(_item,{ parent:_parent });
})
cb(children);
}
}else{
cb([])
}
}
}
},
height: '200px',
// radio:true,
// clickClose:true,
toolbar: {
show: true,
list: [ 'CLEAR' ]
},
data(){
return regionData;
},
on:function (data) {
setTimeout(function (){
var valueStr = regionSel.getValue("valueStr")
var nameStr = regionSel.getValue("nameStr")
$("[name=regionId]").val(valueStr);
$("[name=regionName]").val(nameStr);
},100)
}
});
if(regionId){
regionSel.setValue(regionId.split(","))
}
递归查找父级节点 的实现：
var active = {
//递归查找父级节点
//取节点，得id、pid
//比对顶级list，遍历，定义为n
//若pid=n.id，则n.children=[{parentId:pid}],结束
//若pid!=n.id，继续 goto X
//X: 查父节点1，得id1、pid1
//查父节点1.children=[{parentId:id1}]
//比对顶级list，遍历，定义为n,
//若pid1=n.id，则n.children=[{parentId:若pid1}],
// 同时遍历：n.children，定义为c,当c.id=查父节点1.id, 则c=查父节点1
// 结束
//若pid1!=n.id,继续 goto X
findParentNodesRecursion:function (treeData,pid){
var rtn = admin.syncReq(url,{id:pid});
var p1 = rtn.data[0];
var id1 = p1.id;
var pid1 = p1.parentId;
rtn = admin.syncReq(url,{parentId:id1});
p1.children = rtn.data;
for(var i=0;i<treeData.length;i++){
var n = treeData[i];
if(pid1==n.id){
rtn = admin.syncReq(url,{parentId:pid1});
n.children = rtn.data;
for(var j=0;j<n.children.length;j++){
var c = n.children[j];
if(c.id==p1.id){
c = p1;
n.children[j] = p1;
}
}
return;
}
}
active.findParentNodesRecursion(treeData,pid1)
},
findParentNodes:function (treeData,node){
var id = node.id;
var rtn = admin.syncReq(url,{id:id});
node = rtn.data[0];
var pid = node.parentId;
for(var i=0;i<treeData.length;i++){
var n = treeData[i];
if(pid==n.id){
rtn = admin.syncReq(url,{parentId:pid});
n.children = rtn.data;
return;
}
}
active.findParentNodesRecursion(treeData,pid);
},
renderRegionData:function (treeData,selIds){
if(!selIds){
return;
}
var idArr = selIds.split(",");
for(var i=0;i<idArr.length;i++){
var rid = idArr[i];
active.findParentNodes(treeData,{id:rid});
}
},
}