QiYuAdmin-部门列表和增加部门初稿

简介

zTree展现部门列表
添加部门表单变更
添加部门功能

具体

zTree展现部门列表

今天总感觉项目的头像太不美观，决定了找一个让我身心愉悦的头像，所以。



zTree是一个很强大的树，从毕业就开始用它，一直没有换过，比较直接、暴力。现在多了一个皮肤metro皮肤，看着很好。



总体布局还没有出来，但是心里面有了计划了，左边是一棵树，右边我打算这样做，上面是部门的基础信息，下面是部门下面的人员，这样设计是不是很直观明了。

前端滴代码

var initDepTree=function () {
//初始化树的配置参数
var setting = {
view: {
showLine: true,
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
data: {
simpleData: {
enable: true
}
},
check: {
enable: false,//在节点前显示checkbox
chkboxType: {"Y": "", "N": ""}//父节点和字节不级联
},
edit: {
enable: true
}
};
$depTree = $.fn.zTree.init($("#"+depId), setting, depData);
}

var addHoverDom=function(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
QiYuComponents.layerOpen("增加部门",'800px','350px',"dep/add/view?depId="+treeNode.id)
});
};

var removeHoverDom=function(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

后端滴代码（Controller、Service、Mapper）

Controller

@RequestMapping(value = "/json/list",method = RequestMethod.GET)
public ResponseJson depJsonData() throws Exception{
return QiYuUtil.getResponseJson("查询成功",true,JSONArray.toJSON(depService.getDepZtreeData()));
}

1
2
3
4


1
2
3
4
Service

@Override
public List<Map<String, String>> getDepZtreeData() throws Exception {
return depMapper.selectDepZtreeData();
}

1
2
3
4


1
2
3
4
Mapper

<select id="selectDepZtreeData" resultType="java.util.Map">
SELECT id,PARENT_ID AS pId,DEP_NAME AS name FROM SYS_DEP ORDER BY ORDER_NUMBER ASC
</select>

1
2
3


1
2
3
这里用到了，阿里的fastjson，非常方便的将list转为json了，so easy

JSONArray.toJSON(depService.getDepZtreeData())

用谷歌的gson也行，都非常方便，站在巨人的肩膀上，舒服又放心，爽歪歪。

增加部门表单样式变更

之前选择的样式是用户的添加表单，QiYuAdmin-用户增删改，但是我想了一下，用户的那种方式不是很实用，外观感觉还行，但是一个属性占用一行，太占空间了，所以我又重新弄了一下。



这样可以吧，这样就可以放很多属性了，想扩展直接在下面做就行了。

代码如下

<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3">部门名称</label>
<div class="col-md-7 col-sm-7">
<input type="text" class="form-control" name="depName" placeholder="请输入部门名称">
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3">部门编码</label>
<div class="col-md-7 col-sm-7">
<input type="text" class="form-control" name="depCode" placeholder="请输入部门编码">
</div>
</div>
</div>
<!--/span-->
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
注意：以上我用到了BootStrap的栅格系统

屏幕大于(≥992px) ，使用col-md-* 而不是col-sm-*

如果屏幕大于(≥768px)，小于<=992px，使用col-sm-* 而不是col-md-*，所以就不用怕长度小的时候换行了，这样完美。

增加部门功能

部门添加的代码和用户的大同小异，就是提交表单，用了BootstrapValidate插件，此处不做赘述。

结语

还没有弄完，先按照这个思路弄吧。争取快点能把项目部署到阿里云上面，买的最低配，速度好慢，等弄完我把项目的静态资源放到ngix上面，或者我找找看有啥免费好用的cdn。找cdn的话这个应该是个苦力活吧。