管辖城市权限控制

最近有一个小功能

公司管理分子公司的管辖所使用。

废话少说直接上图

管辖地区。细节如下：

1、 如果有人选中不允许进行选择（全选不会将他选中）
但需要选中不可选，并且文字置灰

2、编辑时进行自动回显示

3、控制全选省时，如果有被选择的市不列入选择中。

该效果整合了前端的H-UI框架。

废话少说，CRUD只贴 U的代码。

JAVA代码：

@RequestMapping(value = "/{id}", method = RequestMethod.GET)    public String update(ModelMap model,@PathVariable("id") Integer id){        try{            //查询出所有被占领的的 -- 》  省、城市            List<SubCompanyArea> areaList = (List<SubCompanyArea>) subCompanyAreaService.selectList(null);            //查询出自己拥有的 --》 省、城市            List<SubCompanyArea> beanareaList = (List<SubCompanyArea>) subCompanyAreaService.selectList(id);            //查询出所有的省、市            List<ProvinceCityVO> cityList = cityService.getProvinceAndCity();            //根据所有省市进行循环 将不可用状态的城市进行标记            for (ProvinceCityVO vo: cityList) {                for (SubCompanyArea areaVO : areaList) {                    if(areaVO.getCityCode() == vo.getCityCode()){                        //如果关联表中存在。 将状态设置成不可用                        vo.setAvailable(1);                    }                }            }            model.addAttribute("cityList",cityList);            model.addAttribute("beanareaList",beanareaList);            model.addAttribute("proList",provinceService.queryProvince());            model.addAttribute("bean",subCompanyService.selectById(id));        }catch(Exception e){            e.printStackTrace();        }        return "subcompany/subcompany";    }

HTML代码 - 》 这里使用了 velocity

整体思路

1、首先循环所有省
2、在循环所有城市-》根据状态确定哪些可以

<ul id="Huifold1" class="Huifold" >                    <!--第一层循环所有省 市-->                    #foreach($proList in $proList)                    <li class="item">                        <!--<p>$!proList.provinceName</p>-->                        <!--显示省-->                        <h4>$!proList.provinceName<b>+</b></h4>                        <div class="info">                            #set($k=0)                            <!--第二层循环所有选中的城市    -->                            #foreach($cityList in $cityList)                            <!--判断第一个相等的城市前面，加全选-->                            #if($!$proList.provinceCode ==  $!cityList.proCode)                            #set($k=$k+1)                            #if($k == 1)                            <input type="checkbox" name="cityCode1" value="-1"  onclick="javascript:check(this,'cityCode_$!cityList.proCode')">全选                            #end                            <!--循环所有城市、根据自己有的进行选中 此处设置变量 标记是否是自己的-->                            <!--然后根据状态进行设置不可用， 此处标记一下。 如果不可用。 还需要判断一下是否是自己的-->                            <input type="checkbox"                                   #set($falg = 0)                                   #foreach($beanareaList in $beanareaList)                                       #if($beanareaList.cityCode == $cityList.cityCode)                                           checked="checked"                                           value="$!cityList.cityCode"                                           name="cityCode_$!cityList.proCode"                                           #set($falg = 1)                                       #end                                   #end                                   #if($cityList.available)                                        #if( $falg == 0 )                                           disabled = "disabled"                                           checked="checked"                                           value = "-1"                                        #end                                   #else                                        name="cityCode_$!cityList.proCode"                                        value="$!cityList.cityCode"                                   #end                                   >                                #if($cityList.available)                                    #if( $falg == 0 )                                        <span style="color: #7D7D7D">$!cityList.cityName</span>                                    #else                                        <span>$!cityList.cityName</span>                                    #end                                #else                                    <span>$!cityList.cityName</span>                                #end                            #else                            #end                            #end                        </div>                    </li>                    #end                </ul>

JS

全选当前省的所有城市

function check(obj,name){        if(obj.checked) {            $("input[name='" + name + "']").prop('checked', true)        }else{            $("input[name='" + name + "']").prop('checked', false)        }    }

js 提交表单的验证 这里使用了JQ Validator

var validator =  $("#form-admin-add").validate({            rules:{                companyName:{                    required:true,                    maxlength:30                },                companyPerson:{                    required:true,                    maxlength:10                },                companyPhone:{                    required:true,                    maxlength:11                },                companyType:{                    required:true,                }            }        });        $("#submit").click(function() {            if(validator.form()){ //若验证通过，则调用修改方法                //提交表单                var areas="";                $("input:checkbox:checked").each(function(i){                    if($(this).val() != -1){                        areas += $(this).val() + ",";                    }                })                if(areas == 0){                    layer.msg('请至少选择一个地区!',{icon:1,time:1000});                    return false;                }                areas = areas.substring(0,areas.length-1);                $("#areas").val(areas);//                layer.msg('添加成功!',{icon:1,time:1000});            }        });

以上就OK啦。