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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

逍遥弄

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值