首先我首先查找相关资料。找到了这网站https://hnzzmsf.github.io/example/example_v4.html#select_value,里面介绍的很详细,我主要用到了多级联动,例子如下:
查看代码后得知,只要我返回为这个类型的json格式就能展示出以上效果。例子给出的json格式为:
arr: [
{
"name"
:
"北京"
,
"value"
: 1,
"children"
: [
{
"name"
:
"北京市1"
,
"value"
: 12,
"children"
: [
{
"name"
:
"朝阳区1"
,
"value"
: 13,
"children"
: []},
{
"name"
:
"朝阳区2"
,
"value"
: 14,
"children"
: []},
{
"name"
:
"朝阳区3"
,
"value"
: 15,
"children"
: []},
{
"name"
:
"朝阳区4"
,
"value"
: 16,
"children"
: []},
]},
{
"name"
:
"北京市2"
,
"value"
: 17,
"children"
: []},
{
"name"
:
"北京市3"
,
"value"
: 18,
"children"
: []},
{
"name"
:
"北京市4"
,
"value"
: 19,
"children"
: []},
]
},
{
"name"
:
"天津"
,
"value"
: 2,
"children"
: [
{
"name"
:
"天津市1"
,
"value"
: 51,
"children"
: []},
]
},
]
于是我创建了实体类backJson.java和Children.java,因为他这个是两个值,加一个List数组格式的。所以才有了children.java.
backJson.java代码:public class BackJson implements Serializable {
private String name;
private String value;
private Children[] children;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
public Children[] getChildren() {
return children;
}
public void setChildren(Children[] children) {
this.children = children;
}
}
Children.java代码:
public class Children {
private String name;
private String value;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
首先我先向我的增加页面传我这个要返回的JSON格式。也就是类似于例子的JSON格式、代码如下:
List<TccglzxHjPark> parkList = tccglzxHjParkService.selectAllParks();
List<LogicRegion> logicRegions = logicRegionService.selectLogicRegions(null);
List<SectionInfo> sectionInfos = sectionInfoService.selectList();
BackJson backJson1 = new BackJson();
backJson1.setName("停车场");
backJson1.setValue("1");
Children[] carr = new Children[parkList.size()];
if (parkList.size() > 0) {
for (int i = 0; i < parkList.size(); i++) {
Children c = new Children();
c.setName(parkList.get(i).getNAME());
c.setValue(String.valueOf(parkList.get(i).getShu_id()));
carr[i] = c;
}
backJson1.setChildren(carr);
} else {
backJson1.setChildren(null);
}
BackJson backJson2 = new BackJson();
backJson2.setName("电子围栏");
backJson2.setValue("2");
Children[] carr2 = new Children[logicRegions.size()];
if (logicRegions.size() > 0) {
for (int i = 0; i < logicRegions.size(); i++) {
Children c = new Children();
c.setName(logicRegions.get(i).getRegionname());
c.setValue(String.valueOf(logicRegions.get(i).getId()));
carr2[i] = c;
}
backJson2.setChildren(carr2);
} else {
backJson2.setChildren(null);
}
BackJson backJson3 = new BackJson();
backJson3.setName("加气站");
backJson3.setValue("3");
Children[] carr3 = new Children[sectionInfos.size()];
if (sectionInfos.size() > 0) {
for (int i = 0; i < sectionInfos.size(); i++) {
Children c = new Children();
c.setName(sectionInfos.get(i).getSectionName());
c.setValue(String.valueOf(sectionInfos.get(i).getSectionId()));
carr3[i] = c;
}
backJson3.setChildren(carr3);
} else {
backJson3.setChildren(null);
}
ArrayList<String> al = new ArrayList<String>();
al.add(JSONObject.toJSONString(backJson1));
al.add(JSONObject.toJSONString(backJson2));
al.add(JSONObject.toJSONString(backJson3));
mv.addObject("jsonData", al);
然后在修改页面初始化的时候直接获取这个值就可以了。var jsonData = ${jsonData};
然后根据你的id赋值。
<div class="layui-inline layui-form-item">
<label class="layui-form-label">应用场所:</label>
<div class="layui-input-inline" style="width:503px;">
<select name="city" xm-select="select1" >
<option value="">请选择, 此处是联动多选</option>
</select>
</div>
</div>
JS直接初始化里面写:
layui.formSelects.data('select1', 'local', {
arr:jsonData,
linkage: true
});
就能出现我添加界面。在传值点击确定传值时,代码如下:
var demo=JSON.stringify(formSelects.value('select1', 'nameStr'));
var demoResult= demo.replace(/\"/g, "");
PlaceInfo.electricFenceAllList = demoResult;
以上为添加界面,下面为修改页面的代码;
在添加页面中我在我后台字段传的值为汉字,修改页面是需要value值,所以我新建了一个字段,向它传值传入了数组:
var demoValue=JSON.stringify(formSelects.value('select1', 'valStr'));
var demoValueResult= demoValue.replace(/\"/g, "");
PlaceInfo.sectionlist = demoValueResult;
汉字用于显示,值用于后台编辑页面取值。
编辑页面也需要跟添加功能一样,需要获取全部的JSON。只需要把上述返回JSON代码粘进去就可以,并且传值的时候需要获取value(以下皆用sectionList代替该词汇),然后初始化获取该值
var groups = data.sectionlist;
var result = groups.split(",");//因为是字符串,需要转化为数组
layui.formSelects.value('select1', result); 根据div中的ID取值。
然后就能实现该功能了!