关于layui的x-select多选下拉的交互

关于layui的x-select多选下拉的交互

部分前端代码:
前端
部分前端代码:
//改动开始----------------------------------------------

    var streetdate = [];
    var communitydate = [];
    form.on('select(level)', function (data) {
        LevelValue(data.value);
        initTransfer();
    });
     
    function LevelValue(value) { 
        $(".hide_h").hide();
        switch (value) {
            case "":
            case "1":
                streetdate = [];
                communitydate = [];
                break
            case "2": //社区
                $("#IsStreet").show();
                communitydate = [];
                var sdata = GetStreetOrCommunity(2,1);
                xstreet.update({
                    data: sdata,
                    autoRow: true,
                });
                var getData = transfer.getData('SchoolZoneTransfer'); //获取右侧数据
                var str = "";
                $.each(getData, function (index, item) {
                    str += item.value + ",";
                });
                if (str != "" && str.length > 0) {
                    str = str.substr(0, str.length - 1);
                    var cdata = GetStreetOrCommunity(1, 13, str);
                    xstreet.setValue(cdata);
                    var str1 = "";
                    $.each(cdata, function (index, item) {
                        str1 += item.value + ",";
                    });
                    if (str1 != "" && str1.length > 0) {
                        str1 = str1.substr(0, str1.length - 1);
                        ChangeStreetOrCommunity(2, 2, str1)
                    }
                }
                break
            case "3": //小区
                $("#IsStreet").show();
                $("#IsCommunity").show();
                var sdata = GetStreetOrCommunity(2,1);
                xstreet.update({
                    data: sdata,
                    autoRow: true,
                })
                var cdata = GetStreetOrCommunity(3,1);
                xcommunity.update({
                    data: cdata,
                    autoRow: true,
                })
                var getData = transfer.getData('SchoolZoneTransfer'); //获取右侧数据
                var str = "";
                $.each(getData, function (index, item) {
                    str += item.value + ",";
                });
                if (str != "" && str.length > 0) {
                    str = str.substr(0, str.length - 1);
                    var cdata = GetStreetOrCommunity(2, 14, str);
                    xcommunity.setValue(cdata);
                    var str1 = "";
                    $.each(cdata, function (index, item) {
                        str1 += item.value + ",";
                    });
                    if (str1 != "" && str1.length > 0) {
                        str1 = str1.substr(0, str1.length - 1);
                        ChangeStreetOrCommunity(3, 12, str1);
                        var cdata = GetStreetOrCommunity(1, 13, str1);
                        xstreet.setValue(cdata);
                    }
                }
                debugger
                break
            default:
                break;
        }
    }
    var xstreet = xmSelect.render({
        el: '#xm_street',
        filterable: true,
        name: 'Street',
        toolbar: {
            show: true,
        },
        filterMethod: function (val, item, index, prop) {
            if (val == item.value) {//把value相同的搜索出来
                return true;
            }
            if (item.name.indexOf(val) != -1) {//名称中包含的搜索出来
                return true;
            }
            return false;
        },
        on: function (data) {
            var Levelval = $("#ZoneLevel").val();
            //arr:  当前多选已选中的数据
            var arr = data.arr;
            var str="";
            $.each(arr, function (index, item) {
                str += item.value+","; 
            });
            if (str != "" && str.length>0) {
                str = str.substr(0, str.length - 1);
            }
            switch (Levelval) {
                case "2":
                case 2:
                    if (str != "" && str.length > 0) {
                        ChangeStreetOrCommunity(2, 2,str)
                    }
                    else {
                        ChangeStreetOrCommunity(2,0, str)
                    }
                    break;
                case "3":
                case 3:
                    if (str != "" && str.length > 0) {
                        ChangeStreetOrCommunity(3, 3, str)
                        var cdata = GetStreetOrCommunity(3, 11, str);
                        xcommunity.update({
                            data: cdata,
                            autoRow: true,
                        })
                    }
                    else {
                        ChangeStreetOrCommunity(3, 0, str)
                    }
                    break;
                default:
                    break;
            }
        },
        data: streetdate
    })
    var xcommunity = xmSelect.render({
        el: '#xm_community',
        filterable: true,
        name: 'Community',
        toolbar: {
            show: true,
        },
        filterMethod: function (val, item, index, prop) {

            if (val == item.value) {//把value相同的搜索出来
                return true;
            }
            if (item.name.indexOf(val) != -1) {//名称中包含的搜索出来
                return true;
            }
            return false;
        },
        on: function (data) {
            //arr:  当前多选已选中的数据
            var arr = data.arr;
            var str = "";
            $.each(arr, function (index, item) {
                str += item.value + ",";
            });
            if (str != "" && str.length > 0) {
                str = str.substr(0, str.length - 1);
            }
            if (str != "" && str.length > 0) {
                ChangeStreetOrCommunity(3, 12, str);
                var cdata = GetStreetOrCommunity(1, 13, str);
                xstreet.setValue(cdata);
                //var selectstreet = xstreet.getValue('valueStr');
                //if (selectstreet == "" || selectstreet.length==0) {
                    
                //}
            }
            else {
                ChangeStreetOrCommunity(3, 0, str)
            }
        },
        data: communitydate
    })
    initTransfer();
    var ZoneLevel = $("#ZoneLevel").val();
    LevelValue(ZoneLevel);
    //获取多选下拉的下拉集合值
    function GetStreetOrCommunity(zoneLevelval, isparent, condition) {
        var result = [];
        $.ajax({
            url: '@Url.Action("_GetSchoolZoneParent")',
            data: { schoolGuid: $("#SchoolGuid").val(), zoneLevel: zoneLevelval, isparent: isparent, condition: condition},
            type: 'post',
            async: false,
            success: function (data) {
                result = data;
            }, error: function () {
                layer.msg('网络出错,请稍后重试!', { time: 2000, icon: 5 });
            }
        });
        return result;
    }
    //下拉值变动事件给下面穿梭框赋值
    function ChangeStreetOrCommunity(zoneLevelval, isparent, condition) {
         $.ajax({
             url: '@Url.Action("_GetSchoolZone")',
             data: { schoolGuid: $("#SchoolGuid").val(), zoneLevel: zoneLevelval, isparent: isparent, condition: condition},
             type: 'post',
             success: function (data) {
                 var transferData = data.streetZone || [];
                 //var transferValue = data.selectZone || [];
                 transfer.reload('SchoolZoneTransfer',{
                     data: transferData,
                     //value: transferValue,
                     parseData: function (res) {
                         return {
                             "value": res.zoneCode,  //数据值
                             "title": res.zoneName //数据标题
                         }
                     }
                 });
                },error: function () {
                    layer.msg('网络出错,请稍后重试!', { time: 2000, icon: 5 });
                }
    });

    }
    //改动结束-------------------------------------------------------------

部分后端代码返回json:

[HttpPost]
        public ActionResult _GetSchoolZoneParent(string schoolGuid, int zoneLevel = 0, int isparent = 0, string condition = "")
        {
            ISchoolZoneBll bll = GetService<ISchoolZoneBll>();
            var streetZone = bll.GetStreetZone(schoolGuid, zoneLevel, isparent, condition).Data;
            return Json(streetZone.Select(p => new { name = p.ZoneName, value = p.ZoneCode }));
        }

注:自己代码记录

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值