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

逍遥弄

于 2021-07-11 16:24:15 发布

559

文章标签： easyui c# .net mvc jquery

本文链接：https://blog.csdn.net/weixin_44311648/article/details/118654862

版权

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