243-layui 区域树xmSelect懒加载,且叶子节点有选择时,自动追溯父节点,并展开选中

		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});
				}
			},
		}

相关文章