easyui combotree（树形下拉框）使用收获总结

easyui combotree使用收获总结

easyui官网有简单的实例，但是项目中需要加载全国的区域，一次性加载容易造成页面加载过慢和卡死，所以需要动态加载

最后效果

textarea 显示效果

首先是引入jquery和easyui的js

页面上需要渲染的控件

<input id="selAdminRegion" name="selAdminRegion" value="">

加载combotree的js
cascabeCheck这个参数，我设置了false，但是无效，原因未知
onBeforeExpand节点展开时触发，动态加载在此处实现
loadFilter筛选显示值

//获取树形图区域function loadRegionTree() {//动态加载$('#selAdminRegion').combotree({url: "/Project/GetThreeRegionTree?parentRegionCode=",width: '583',multiple: true,//增加复选框checkbox: true,cascabeCheck: false,//选中父节点，是否选中子节点loadFilter: function (data) {return data;},formatter: function (node) {return node.text;//显示文字内容},onChange: function (node) {//点击事件，给隐藏内容赋值setAdminRegion();},onBeforeExpand: function (node) {if (node.children === null || node.children === undefined) {$('#selAdminRegion').combotree('tree').tree('options').url = '/ExpertSelection/MyProject/GetThreeRegionTree?parentRegionCode=' + node.id;}},onLoadSuccess: function (data) {//多选框赋值，如果选择了二、三级菜单，菜单第一次加载的是一级菜单，会直接显示二三级的编码，所以赋值显示内容为空$('#selAdminRegion').combotree('setText', "");}});}

如果已有选中值的话，加载需要给下拉框赋值，多选框赋值使用setValues参数，值为数组

    //设置下拉框选中function setComBoxChecks() {var treeCheckStr = $("#AdministrativeRegion").val();var treeCheckList = treeCheckStr.split(';');var checkTreesStr = "";for (var i = 0; i < treeCheckList.length; i++) {checkTreesStr = checkTreesStr + "," + treeCheckList[i];}var subLength = checkTreesStr.length;checkTreesStr = checkTreesStr.substring(1, subLength);var checkTreeArr = checkTreesStr.split(',');//多选框赋值$('#selAdminRegion').combotree('setValues', checkTreeArr);}

我的是重新给了个textarea 把区域名称显示在此处
js字符串给textarea 换行时，换行符为\r\n
给下拉框的文本框赋值
$(’#selAdminRegion’).combotree(‘setText’, “”);

<textarea  type="text" cols="80" rows="6" id="txtAreaNames" readonly="readonly" ></textarea>

//设置所在行政区域function setAdminRegion() {var getTreeChecks = $('#selAdminRegion').combobox('getValues'); //获取多选var getTreeCheckStr = getTreeChecks.toString().replace(/,/gm, ";");//获取的下拉框选择值为英文逗号分割，替换为英文分号setRegionCodes(getTreeCheckStr);//取新的隐藏控件值var adminRegions = $("#AdministrativeRegion").val();//给多行输入框赋值$.post("/Project/GetRegionNamesByRegionCodes", { regions: adminRegions }, function (data) {//多选框赋值，如果选择了二、三级菜单，菜单第一次加载的是一级菜单，所以会直接显示二三级的编码，所以重新赋值$('#selAdminRegion').combotree('setText', "");//\r\n textarea换行符$("#txtAreaNames").val(data.replace(/"/gm, "").replace(/;/gm, "\r\n"));}, "text");}

因为是动态加载，如果已经编辑过，再次修改时，只会默认加载第一级区域，之前选中的二三级区域，未展开父节点时，是不会被获取为选中项的，所以只有在确认当前原有节点已被展开，并且选中状态为未选中时，才被替换

//设置选中项的id值，赋给隐藏控件function setRegionCodes(getTreeCheckStr) {var adminRegions = $("#AdministrativeRegion").val();var regionArr = adminRegions.split(';');//因为是动态加载，已存在但是节点未展开的区域，获取所有选中节点时，获取不到，所以这里处理for (var i = 0; i < regionArr.length; i++) {debugger;//获取id为110101的节点var currentNode = $('#selAdminRegion').combotree('tree').tree('find', regionArr[i]);//如果从节点获取不到，证明当前节点未展开或不存在，依然保存当前节点if (currentNode == null || currentNode == undefined) {//如果该节点已存在在字符串中，不再添加if (getTreeCheckStr.indexOf(regionArr[i]) == -1) {getTreeCheckStr = getTreeCheckStr + ";" + regionArr[i];}}}$("#AdministrativeRegion").val(getTreeCheckStr);}

后端代码
获取区域节点信息

     /// <summary>/// 获取三级区域菜单/// </summary>/// <returns></returns>public ActionResult GetThreeRegionTree(string parentRegionCode = ""){List<TreeRegionOne> treeOneList = new List<TreeRegionOne>();var treeListModel = Sys_RegionServer.GetRegionChildList(parentRegionCode);foreach (var oneTreeItem in treeListModel){TreeRegionOne treeOne = new TreeRegionOne();treeOne.id = Convert.ToInt32(oneTreeItem.Value);//下拉框value值treeOne.text = oneTreeItem.Text;//显示文本treeOne.state = "open";//显示的是文件夹样式还是文档样式，也就是是否最后一级//是否有子节点var childList = Sys_RegionServer.GetRegionChildList(oneTreeItem.Value);if (childList != null && childList.Count() > 0){treeOne.state = "closed";}treeOneList.Add(treeOne);}return Json(treeOneList);}

这里是展示在textarea中的区域名称

     /// <summary>/// 根据区域编码返回拼接好的完整区域字符串/// </summary>/// <param name="regions"></param>public ActionResult GetRegionNamesByRegionCodes(string regions = ""){string regionNamesStr = GetRegionNameStrByRegionCodes(regions);return Json(regionNamesStr, JsonRequestBehavior.AllowGet);}/// <summary>/// 根据区域编码返回拼接好的完整区域字符串/// </summary>/// <param name="regions"></param>public string GetRegionNameStrByRegionCodes(string regions = ""){string regionNamesStr = "";string[] regionCodes = regions.Split(';');foreach (var regionItem in regionCodes){string currentStr = "";string currentRegionName = Sys_RegionServer.GetRegionName(regionItem);//拼接当前节点currentStr += currentRegionName;Sys_Region parentRegionModel = Sys_RegionServer.GetParentRegionByRegionCode2(regionItem);if (parentRegionModel != null){//拼接父级节点currentStr = parentRegionModel.RegionName + "-" + currentStr;Sys_Region topRegionModel = Sys_RegionServer.GetParentRegionByRegionCode2(parentRegionModel.RegionCode);if (topRegionModel != null){//区域一共三级，拼接顶级节点currentStr = topRegionModel.RegionName + "-" + currentStr;}}currentStr = ";" + currentStr;regionNamesStr += currentStr;}if (!string.IsNullOrWhiteSpace(regionNamesStr)){regionNamesStr = regionNamesStr.Substring(1, regionNamesStr.Length - 1);}return regionNamesStr;}

加一个注意点
在使用aspx页面渲染combotree时，url路径一定要是一般处理程序的路径，而不能直接写.cs里的方法，不然可能combotree的样式无法加载，就只是一个普通的文本框。

参考链接
easyui官网：
https://www.jeasyui.net/plugins/170.html
如何让easyui combox默认选中多项及一些主要参数：
https://www.cnblogs.com/Archosaur/archive/2013/01/21/EasyUI-ComBox-setValues.html
默认节点选中：
https://blog.csdn.net/sat472291519/article/details/53584719
easyui的tree节点的获取和选中：
https://www.136.la/tech/show-382487.html
jquery 获取easyui combobox选中的值、赋值：
https://www.cnblogs.com/xbblogs/p/6076371.html
combobox筛选显示值：
https://blog.csdn.net/lindiwo/article/details/75043428

easyui combotree（树形下拉框）使用收获总结相关推荐

EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
在开发过程中遇到的小案例效果展示未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...
【combotree】easyui的combotree(树形下拉框)使用总结
2019独角兽企业重金招聘Python工程师标准>>> 引言最近由于工作的需要,需要使用到下拉树,就是我们有一个输入框,用户要输入东西,但是输入的东西是从我们那个之中选的,为了防止 ...
easyui复杂表单_jQuery EasyUI 表单 – 创建树形下拉框（ComboTree） | 菜鸟教程
jQuery EasyUI 表单 - 创建树形下拉框树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法
easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...
iview 下拉select样式_Vue.js相关：iview实现select tree树形下拉框的示例代码
Vue.js相关:iview实现select tree树形下拉框的示例代码发布于 2020-3-16| 复制链接摘记: 本文介绍了iview实现select tree树形下拉框的示例代码,分享给大 ...
treeselect只选了分支节点全选_vue Treeselect 树形下拉框:获取选中节点的ids和lables操作...
API: https://vue-treeselect.js.org/#events 1.ids: 即value 1.lable: 需要用到方法:@select(node,instanceId) 和 ...
jquery easyui 多选下拉框的实现
为什么80%的码农都做不了架构师?>>> jquery easyui 多选下拉框的实现修改官方提供的demo实例,本来是单选的,让她编程多选,完成了勾选和去勾选的所有功能. ...
JavaScript树形下拉框
js库地址:https://github.com/hzwy23/Hselect 这个JS文件是对select标签的一个扩展,使得select能够支持树形下拉框 1.依赖关系: 使用这段js代码之前,请 ...
element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...

easyui combotree（树形下拉框）使用收获总结

easyui combotree使用收获总结

easyui combotree（树形下拉框）使用收获总结相关推荐

最新文章

热门文章