Easyui tree实现省市区数据显示和回显功能

李堇

于 2021-07-20 15:59:51 发布

阅读量611

点赞数

分类专栏：前段

本文链接：https://blog.csdn.net/weixin_31172555/article/details/118937247

版权

前段专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需要为市场人员分配所属管辖区域，因为管理平台使用的前段框架为easyUI，所以使用easyUI 的tree组件来完成对应的功能。

该功能的实现主要点是省市区的查询（全国省市区数据大概2800多个，需要优化查询逻辑）和后续编辑业务人员信息时，之前所选的区域的回显问题。

页面代码：

<tr>
    <td align ="right">区域：</td>
    <td >
        <input id="distNames" name="distNames" class="easyui-textbox" data-options="multiline:true,validType:'length[0,600]'" style="width:220px; height: 70px">
        <a href="#" id="sa" class="easyui-linkbutton">选择</a>
        <div id="win4" class="easyui-window" title="选择区域" style="width:600px;height:400px"
						        data-options="iconCls:'icon-save',modal:true,closed:true,minimizable:false,maximizable:false,collapsible:false,raggable:false,shadow:true">
            <ul id="tt4" style="margin-left:10px"></ul>
        </div>
    </td>
</tr>

js代码：

$("#sa").click(function(){
		//判断代理级别和代理机构是否已经选择
		var flag = true;
		if(flag == true) {
			$("#win4").window('open');
			$("#tt4").tree({
				url:'../../trMarketMember/queryTreeData.do',
				queryParams : {
			    },
				animate:true,
		        lines: true,
		        checkbox: true, //显示复选框
		        showLoading:true,
		        onCheck: function (node) {//选中复选框后触发该方法
		        	var nodes = $("#tt4").tree('getChecked',['checked']);
					var distNames = "";
					var distIds ="";
					nodes.forEach(function (item,i) {
						if($('#tt4').tree('isLeaf',item.target)){
							distNames += item.text + " ";
							distIds +=item.id+",";
						}
					})
					$("#distNames").textbox("setValue",distNames);
					$("#distIds").val(distIds);
		        },
		        onBeforeExpand: function (node) {
		        	$("#tt4").tree('options').queryParams = {"id" : 2};
		        },
		        onLoadSuccess: function (node, data) {//数据加载完成后触发回显方法
		            $('#tt4 .tree-icon').css("background", "url(../../images/insppoint.png) no-repeat center center");//修改默认的图标
		            $('#tt4 .tree-icon').css("background-size", "8px 8px");//修改图标大小
		            setTimeout(function(){//延时回显数据，等待渲染后再回显数据
		            	var ds = $("#distIds").val();
//		            	alert(ds);
		            	if(ds != null && ds != "" && ds.length>0) {
		            		var dids = ds.substring(0,ds.length-1).split(",");
		            		dids.forEach(function (did,i) {
			            		var node1 = $('#tt4').tree('find', did);//找到id为”tt“这个树的节点id为”1“的对象
				                $('#tt4').tree('check', node1.target);//设置选中该节点
							})
		            	}
		            },2000);
		        }
			})
		}
	})

实现结果