QiYuAdmin-部门列表和增加部门初稿
2017-04-04 23:42
169 查看
简介
清明三天,陪着家人玩了2天,体力有点透支,今天实在太累,休息一天,晚上乘着媳妇和孩子睡觉的时间把部门管理的功能做了一点,如下: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(); };
后端滴代码(Controller、Service、Mapper)
Controller@RequestMapping(value = "/json/list",method = RequestMethod.GET) public ResponseJson depJsonData() throws Exception{ return QiYuUtil.getResponseJson("查询成功",true,JSONArray.toJSON(depService.getDepZtreeData())); }
Service
@Override public List<Map<String, String>> getDepZtreeData() throws Exception { return depMapper.selectDepZtreeData(); }
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>
这里用到了,阿里的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>
注意:以上我用到了BootStrap的栅格系统
屏幕大于(≥992px) ,使用col-md-* 而不是col-sm-*
如果屏幕大于(≥768px),小于<=992px,使用col-sm-* 而不是col-md-*,所以就不用怕长度小的时候换行了,这样完美。
增加部门功能
部门添加的代码和用户的大同小异,就是提交表单,用了BootstrapValidate插件,此处不做赘述。
结语
还没有弄完,先按照这个思路弄吧。争取快点能把项目部署到阿里云上面,买的最低配,速度好慢,等弄完我把项目的静态资源放到ngix上面,或者我找找看有啥免费好用的cdn。找cdn的话这个应该是个苦力活吧。相关文章推荐
- QiYuAdmin-部门列表和增加部门初稿
- QiYuAdmin-部门增删改查
- QiYuAdmin-BootStrapTable增加通用的搜索功能(Metronic实战)
- 小程序学习用demo:收支账单;增加账单及列表(适用1221)
- SpringMVC+Spring+MyBatis 的综合练习 9 (增加查询员工信息时带有部门信息)
- nginx增加ssl支持 - 编译时参数详情列表
- Django Admin - 将model的Add(增加功能去掉)
- ecshop商品列表页面增加按销量排序
- 金笛JDMAIL邮件服务器首创内嵌部门邮件列表
- Exchange2007邮件列表根据部门来创建动态通讯组
- SSH-基础篇-前端(列表,增加,修改)
- QiYuAdmin-用户增删改查
- Qt中的多线程技术(列表总结比较,多线程创建和销毁其实是有开销的,只是增加了用户体验而已)
- QiYuAdmin-结合FastDFS实现bootstrap-fileinput上传
- horizon源码修改_增加计算节点列表 并可查看某计算节点下所有的虚拟机
- 关于兼容ie8的圆角和select下拉列表-初稿
- laravel-admin列表排序在使用了$grid->model()->latest()后$grid其它加上sortable()可排序的列在排序时不起作用
- ECSHOP后台商品列表中增加商品属性的显示方法
- 最新分页存储过程(增加了选择字段列表、排序方式参数)
- SharePoint客户端开发:增加用户信息到用户信息列表