项目中需求的是查询条件机构是带层级关系,可多选,还需要根据用户的权限级别筛选不同的机构。为了实现需求,想的就是用树来做了。一开始用的是zTree,不过zTree的风格样式和系统界面不太搭。找了很多,最后呢,找了一个前端框架quickui(个人认为,还不错,组件丰富,功能齐全),里面有一个组件http://www.uileader.com/quickui_doc/component/form/selectMulti,封装的也是zTree,不过功能界面还是不错的。
图片是项目展现效果,登录的不同用户,拥有的权限也不同。在这呢,记录一下实现过程,大家有更好的实现,或者正文中有不当之处,希望留言交流。
前端
<!--树形多选下拉框-->
<!--quickui和easyui一样,可以通过class属性渲染-->
<div class="selectTree" id="comCode" name="comCode" multiMode="true" selectedValue="${params.comCode}" keepDefaultStyle="true" boxHeight="200" url="${ctx}/dim/com/getQuickComMap" allSelectable="true"></div>
<!--用于回显数据-->
<input type="hidden" id="v_comCode" name="v_comCode" value="${params.v_comCode }"/>
<!--加载用户的机构等级,控制数据筛选-->
<input type="hidden" id="comLevel" value="${comLevel}"/>
//获取用户的机构级别
var comLevel = $("#comLevel").val();
//监听下拉框选择
$("#comCode").bind("change",function(){
//获取组件的zTree,selectTree2_tree为渲染生成的treeid
//之前直接通过页面div原始节点获取不到,不知道为什么(有待探索)
var zTree = $.fn.zTree.getZTreeObj("selectTree2_tree");
//获取已选择的节点
var nodes = $(this).data("selectedNodes");
if (nodes.length > 0) {
var values = [];
for(var i=0;i<nodes.length;i++){
var id = nodes[i].id;
var node = zTree.getNodeByParam("id",id);
//myFlag是自定义的一个节点属性
var level = node.myFlag;
//以下是控制用户的选择权限
if(level < comLevel){
continue;
}
if(null != level && '2' == level){
if(!node.getCheckStatus().half){
values.push(node.id+level);
break;
}
}else if(null != level && '3' == level){
if(!node.getCheckStatus().half){
values.push(node.id+level);
}
}else if(null != level && '4' == level){
if(!node.getParentNode().getCheckStatus().half){
continue;
}
if(!node.getCheckStatus().half){
values.push(node.id+level);
}
}else if(null != level && '5' == level){
if(node.getParentNode().getCheckStatus().half){
values.push(node.id+level);
}
}
}
$("input:hidden[name='v_comCode']").val(values.join(","));
}else{
$("input:hidden[name='v_comCode']").val('');
}
});
后端
1.实体类
/**
* @ClassName: Select
* @Description:保存选择框数据
* @author: mayi
* @date: 2018年1月4日 下午7:46:21
*
*/
public class Select implements Serializable {
private static final long serialVersionUID = 1L;
private String id;//节点id
private String name;//节点name
private String parentId;//父节点id
//设置数据的clickExpand:true,这样点击展开子节点,然后设置组件allSelectable="true"。这样点击会展开并全选子节点。
private boolean clickExpand;
private String myFlag;//自定义标志
private boolean open;
private boolean nocheck;
private String title;
...getter setter
}
2.数据查询
/***
* 查询机构树层级 省 地 县支 团队
* @return
*/
@RequestMapping(value="/getQuickComMap")
@ResponseBody
public Map<String, List<Select>> getQuickComMap(){
Params params = getParams();
params.put("comCode", getCurrentUser().getDeptID());
List<Select> list = companyService.getQuickComMap(params);
Map<String,List<Select>> map = new HashMap<String, List<Select>>();
map.put("treeNodes", list);
return map;
}
//设置查询参数
public List<Select> getQuickComMap(Params params){
Company userCompany = companyDao.findForOne(params);
String comLevel = companyDao.getComlevlByComcode(params.getString("comCode"));
//通过用户机构代码,填入机构参数
if("3".equals(comLevel)){ //地市用户
params.put("cityCode", userCompany.getCityCode());
}else if("4".equals(comLevel)){ //县支用户
params.put("cityCode", userCompany.getCityCode());
params.put("countyCode", userCompany.getCountyCode());
}else if("5".equals(comLevel)){ //团队用户
params.put("cityCode", userCompany.getCityCode());
params.put("countyCode", userCompany.getCountyCode());
params.put("groupCode", userCompany.getGroupCode());
}
return companyDao.getQuickComMap(params);
}
3.mapper
<select id="getQuickComMap" parameterType="params" resultType="com.sinosoft.bi.web.dim.entity.Select">
SELECT ID,NAME,MYFLAG,CLICKEXPAND,PARENTID FROM(
SELECT COMCODE ID,
COMALIAS NAME,
COMLEVEL MYFLAG,
'true' CLICKEXPAND,
'' PARENTID
FROM D_COMPANY
WHERE COMLEVEL = 2
UNION ALL
SELECT COMCODE ID,
COMALIAS NAME,
COMLEVEL MYFLAG,
'true' CLICKEXPAND,
PROVINCECODE PARENTID
FROM D_COMPANY
WHERE COMLEVEL = 3
<if test="cityCode != null and cityCode != ''">
AND CITYCODE = #{cityCode}
</if>
UNION ALL
SELECT COMCODE ID,
COMALIAS NAME,
COMLEVEL MYFLAG,
'true' CLICKEXPAND,
CITYCODE PARENTID
FROM D_COMPANY
WHERE COMLEVEL = 4
<if test="cityCode != null and cityCode != ''">
AND CITYCODE = #{cityCode}
</if>
<if test="countyCode != null and countyCode != ''">
AND COUNTYCODE = #{countyCode}
</if>
UNION ALL
SELECT COMCODE ID,
COMALIAS NAME,
COMLEVEL MYFLAG,
'false' CLICKEXPAND,
COUNTYCODE PARENTID
FROM D_COMPANY
WHERE COMLEVEL = 5
<if test="cityCode != null and cityCode != ''">
AND CITYCODE = #{cityCode}
</if>
<if test="countyCode != null and countyCode != ''">
AND COUNTYCODE = #{countyCode}
</if>
<if test="groupCode != null and groupCode != ''">
AND GROUPCODE = #{groupCode}
</if>
) ORDER BY MYFLAG,ID
</select>