基于layUI的下拉复选框，添加界面传值和修改页面取值

首先我首先查找相关资料。找到了这网站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取值。

然后就能实现该功能了！