treegrid进阶——部门树形结构展开后对人员进行分类排列
需求分析
老大说以前的项目要加个流程模块，前端界面左边展示部门列表右边展示节点信息，就是这个样子的：部门列表的下一级展示人员分类，人员分类的下一级才展示部门员工。
下面我就分享一下左边这个树形结构是怎么实现的，准确的来说这也不算是treegrid进阶，是一个需求，后台的逻辑复杂了些。
前端代码
<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" th:href="@{/treegrid/jquery.treegrid.css}">
<link rel="stylesheet" th:href="@{/bootstrap.min.css}">
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/treegrid/jquery.treegrid.min.js}"></script>
<script th:src="@{/treegrid/jquery.treegrid.bootstrap3.js}"></script>
<script th:src="@{/treegrid/jquery.treegrid.extension.js}"></script>
<script th:src="@{/treegrid/tree.table.js}"></script>
<link rel="stylesheet" th:href="@{/css/metroStyle.css}" type="text/css">
<script type="text/javascript" th:src="@{/js/jquery.ztree.all.min.js}"></script>
<link rel="shortcut icon " type="images/x-icon"
th:href="@{/images/favicon.ico}">
</head>
<body>
<div class="panel admin-panel" style="width: 400px;float: left;">
<table id="menuTable" data-mobile-responsive="true"
data-click-to-select="true">
<thead>
<tr>
<th data-field="selectItem" data-checkbox="true"></th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
var Menu = {
id: "menuTable",
table: null,
layerIndex: -1
};
/**
* 初始化表格的列
*/
Menu.initColumn = function () {
var columns = [
{
field: 'selectItem',
radio: true
},
{
title: '部门列表',
field: 'departmentName',
align: 'center',
valign: 'middle',
sortable: true,
width: '250px',
formatter: function (item, index) {
var type = item.departmentName.toString();
var typeStr = type.slice(-1);
if (typeStr === "0") {
return typeStr = "审核人员";
}
if (typeStr === "1") {
return typeStr = "协同人员";
}
if (typeStr === "2") {
return typeStr = "一般人员";
}else{
return item.departmentName;
}
}
}]
return columns;
};
$(function () {
var colunms = Menu.initColumn();
var table = new TreeTable(Menu.id, "/getDeptList", colunms);
table.setExpandColumn(0);
table.setIdField("departmentId");
table.setCodeField("departmentId");
table.setParentCodeField("parentId");
table.setExpandAll(false);
table.set("serviceId", "-1");
table.init();
Menu.table = table;
});
$("#menuTable").on("check.bs.table", function () { //点击radio触发事件
var arrselections = $("#menuTable").bootstrapTable('getSelections');
console.log(arrselections[0].Id);
});
$('#menuTable').on('click-row.bs.table', function (e,row,$element) {
alert("111");
});
var settingss = {
view: {
selectedMulti: false
},
check: {
enable: false
},
data: {
simpleData: {
enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式
idKey: "departmentId", //节点数据中保存唯一标识的属性名称
pIdKey: "parentId", //节点数据中保存其父节点唯一标识的属性名称
rootPId: -1
//用于修正根节点父节点数据，即 pIdKey 指定的属性值
},
key: {
name: "departmentName" //zTree 节点数据保存节点名称的属性名称 默认值："name"
}
},
edit: {
enable: false, //如果enable为flase，那么树就不能移动了
showRemoveBtn: false, //是否显示树的删除按钮
showRenameBtn: false, //是否显示数的重命名按钮
}
};
function getMenuId() {
var selected = $('#menuTable').bootstrapTreeTable('getSelections');
if (selected.length < 1) {
alert("请选择一条记录");
return;
} else {
return selected[0].id;
}
}
</script>
</html>
代码效果截图：
css、js找不到的请下方留言
后台逻辑
通读前端代码发现实现树形结构需要三个字段departmentId、parentId、departmentName，下面只需后台把拼接好json传给前端即可
后端实体：
Department
public class Department {
private Integer departmentId;
private Integer parentId;
private String departmentName;
//get、set方法自行实现
}
Staff
public class Staff implements Serializable {
private Integer staffId;
//根据数值判断员工的类型
//0表示审核人员
//1表示协同人员
//2表示一般人员
//注意：新增时最好departmentId+userType的形式进行数据存储，
//这样可以避免展示部门列表时会出现一些重复数据
private Integer userType;//员工类型
private Integer departmentId;
private String userName;
//get、set方法自行实现
}
ListController
@Controller
public class ListController{
@Resource
private ListService listService;
@ResponseBody
@RequestMapping("/getDeptList")
public List<Map<String,Object>> getDeptList(Integer menuId){
List<Map<String,Object>> list = listService.getDeptList(menuId);
return list;
}
}
ListService
public interface ListService{
List<Map<String, Object>> getDeptList(Integer menuId);
}
ListserviceImpl
@Service
public class ListserviceImpl implements ListService {
@Resource
private DepartmentMapper departmentMapper;
@Resource
private StaffMapper staffMapper;
@Override
public List<Map<String, Object>> getDeptList(Integer menuId) {
DepartmentExample departmentExample = new DepartmentExample();
List<Department> dept = departmentMapper.selectByExample(departmentExample);
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
for (int i = 0; i < dept.size(); i++) {
HashMap<String, Object> hashMap = new HashMap<String, Object>();
hashMap.put("departmentId", dept.get(i).getDepartmentId());
hashMap.put("parentId", dept.get(i).getParentId());
hashMap.put("departmentName", dept.get(i).getDepartmentName());
list.add(hashMap);
}
StaffExample staffExample = new StaffExample();
List<Staff> staff = staffMapper.selectByExample(staffExample);
for (int i = 0; i < staff.size(); i++) {
HashMap<String, Object> hashMap = new HashMap<String, Object>();
hashMap.put("departmentId", staff.get(i).getUserType());
hashMap.put("parentId", staff.get(i).getDepartmentId());
hashMap.put("departmentName", staff.get(i).getUserType());
list.add(hashMap);
}
for (int j = 0; j < staff.size(); j++) {
HashMap<String, Object> hashMap = new HashMap<String, Object>();
hashMap.put("departmentId", staff.get(j).getStaffId());
hashMap.put("parentId", staff.get(j).getUserType());
hashMap.put("departmentName", staff.get(j).getUserName());
list.add(hashMap);
}
//list去重
removeDuplicate(list);
return list;
}
public static void removeDuplicate(List<Map<String, Object>> list) {
for (int i = 0; i < list.size() - 1; i++) {
for (int j = list.size() - 1; j > i; j--) {
if (list.get(j).equals(list.get(i))) {
list.remove(j);
}
}
}
}
}
这样的方法会出现数据重复的问题，最后把list去重即可。
1508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
