关于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 }));
}
注:自己代码记录