复选框的级联操作

复选框的级联操作：
选中一个节点后，该节点下的所有子节点均置为选中；选择其他节点后，该节点取消选中，重新选中需要的节点。
以下举个栗子：
以医院管理平台的所挂科室和指定医生为例，数据量较少，因此每个子节点只有一个数据，关键点可以实现。使用SSM框架进行编写，代码不完善，仅作解释。

1.前端页面

1.1

首先给复选框加相应的id和name，此处的οnclick="loadDoctor()"为在选中所挂科室信息后，将加载该科室节点下的子节点的信息------指定医生的姓名，如有需要，可添加其他相关信息。

	<tr>
        <td width="10%" class="tableleft">所挂科室</td>
        <td><select id="dep" name="depId" onclick="loadDoctor()"></select></td>
    </tr>
    <tr>
        <td width="10%" class="tableleft">指定医生</td>
        <td><select id="doc" name="doctor"></select></td>
    </tr>

1.2前台主要代码

先获取选中的科室编号，再根据科室编号查询对应的医生子节点。

	function queryKeShi(){
        $.ajax({
            type:"GET",
            url:"/DD/keshi/list",
            data:"",
            success:function (vo){
                let list=vo.pageInfo.list;
                for (let i=0;i<list.length;i++){
                    let obj=list[i];
                    let depName=obj.depName;
                    let depId=obj.depId;
                    $("#dep").append(
                        '<option value="'+depId+'">'+depName+'</option>'
                    );
                }
            }
        })
    }
    function loadDoctor(){
        let myselect=document.getElementById("dep");
        let index=myselect.selectedIndex ;
        let depId=myselect.options[index].value;
        //alert("21"+depId);
        queryDoctor(depId);
    }
    function  queryDoctor(depId){
        //清空select下拉框
        $("#doc").empty();
        //alert("21"+depId);
        $.ajax({
            type:"GET",
            url:"/DD/"+depId,
            data:"",
            success:function (vo){
                let list=vo.pageInfo.list;
                for (let i=0;i<list.length;i++){
                    let obj=list[i];
                    let dName=obj.dName;
                    let dId=obj.dId;
                    $("#doc").append(
                        '<option value="'+dId+'">'+dName+'</option>'
                    );
                }
            }
        });
    }

2.后台部分

2.1Service层代码

QueryRegisterVO 类主要用于获取前端输入的值。

@Service
public class RegisterService {
    @Resource
    private DoctorMapper doctorMapper;
    @Resource
    private DepartmentMapper departmentMapper;
	@Transactional(propagation = Propagation.REQUIRED,readOnly = true)
	    public List<Department> queryKeShi(QueryRegisterVO vo){
	        DepartmentExample departmentExample = new DepartmentExample();
	        //创建存放条件的容器
	        DepartmentExample.Criteria criteria = departmentExample.createCriteria();
	        //用于获取前端输入的值，并对数据库进行查询
	        if (vo.getdKeshi() != null){
	            criteria.andDepIdEqualTo(vo.getDepId());
	        }
	        List<Department> list = departmentMapper.selectByExample(null);
	        return list;
	    }
	
	    @Transactional(propagation = Propagation.REQUIRED,readOnly = true)
	    public List<Doctor> queryDoctor(QueryRegisterVO vo) {
	        DoctorExample doctorExample = new DoctorExample();
	        DoctorExample.Criteria criteria = doctorExample.createCriteria();
	        if (vo.getDepId() != null){
	            criteria.andDepIdEqualTo(vo.getDepId());
	        }
	        List<Doctor> list = doctorMapper.selectByExample(doctorExample);
	        return list;
	    }

2.2Controller层

主要有前端获取数据的访问路径和封装的返回结果。

@Controller
@RequestMapping("DD")
@ResponseBody
public class DDController {
    @Resource
    private RegisterService registerService;

    @RequestMapping("keshi/list")
    public ResultVO<Department> queryKeShi(QueryRegisterVO vo){
        PageInfo<Department> departmentPageInfo = new PageInfo<>(registerService.queryKeShi(vo));
        System.out.println("51"+departmentPageInfo);
        return new ResultVO<>(departmentPageInfo);
    }

    @RequestMapping(value = "{depId}",method = RequestMethod.GET)
    public ResultVO<Doctor> queryDoctor(QueryRegisterVO vo){
        PageInfo<Doctor> doctorPageInfo = new PageInfo<>(registerService.queryDoctor(vo));
        return new ResultVO<>(doctorPageInfo);
    }
}