[JavaScript知识库]Layui 树形复选框获取值赋值，复选树形菜单

Layui 树形复选框赋值取值

效果图标

实现

前端
html

	<!-- 授权菜单 -->
	<form class="layui-form" id="role_menu_form"  action="" lay-filter="role_menu_form" style="padding:10px;display: none;">
		<fieldset class="layui-elem-field layui-field-title" style="color:#89b586;">
		  <legend>授权菜单</legend>
		</fieldset>
		<input type="text" name="rid" class="layui-input" style="display: none">
		<div class="layui-form-item">
			<div id="menu_tree" class="demo-tree"></div>
		</div>
		<br>
		<div class="layui-form-item" style="text-align: center;">
			<a class="layui-btn lay-submit-btn" lay-submit="" lay-filter="roleMenuForm">立即提交</a>
			<a class="layui-btn layui-btn-primary lay-close-btn">关闭</a>
		</div>
	</form>

关键：<div id="menu_tree" class="demo-tree"></div>

js-展示

tree.render({
	elem: '#menu_tree'
	,data: res.data // 这里的res.data是接口返回的数据
	,showCheckbox: true  //是否显示复选框
	,id: 'menu'
});

js-提交

	// 提交角色菜单
	form.on('submit(roleMenuForm)', function(data) {
		var rid = data.field.rid;
		var checkData = tree.getChecked('menu');
	    var mids = [];
	    getTreeValue(checkData, mids);// 获取树形选中值
	    getAjax(interUrl.saveRoleMenu, {mids: mids.join(","), rid: rid}, 'post', function (res) {
	        if (res.success) {
	            layer.closeAll();
	        }
	        showTips(res.msg);// 自定义提示
	    })
	    return false;
	})
	
/**
 * 获取树形选中的值-----------------------------------------------------------
 */
function getTreeValue(list, mids){
	$(list).each(function (i, o) {
    	mids.push(o.id);
    	getTreeValue(o.children, mids);
    });
}

后端
java

	@Override
	public Result<?> selectRoleMenuTree(Integer rid) {
		List<MenuDtoResp> mList = mdao.selectRoleMenu(rid);
		List<Map<String,Object>> list = new ArrayList<>();
		for(MenuDtoResp m : mList) {
			if(m.getParentId() == 0) {
				Map<String,Object> map = new HashMap<>();
				map.put("id", m.getMid());
				map.put("title", m.getMname());
				map.put("spread", true);
				List<Map<String,Object>> children = getMenuChildren(mList, m.getMid());
				if(children.size() < 1) { // 这是是没有子级的时候才判断是否选中，否则有子级的会子级全选
					map.put("checked", m.getRmstate() > 0 ? true :false);
				}
				map.put("children", children);
				list.add(map);
			}
		}
		return Result.success(list);
	}

	public List<Map<String,Object>> getMenuChildren(List<MenuDtoResp> mList, Integer pid){
		List<Map<String,Object>> list = new ArrayList<>();
		for(MenuDtoResp m : mList) {
			if(m.getParentId().equals(pid)) {
				Map<String,Object> map = new HashMap<>();
				map.put("id", m.getMid());
				map.put("title", m.getMname());
				map.put("checked", m.getRmstate() > 0 ? true :false);
				map.put("spread", true);
				map.put("children", getMenuChildren(mList, m.getMid()));
				list.add(map);
			}
		}
		return list;
	}