一、实体对象
public class SysDept implements Serializable {
private static final long serialVersionUID = 2533357694095578718L;
private Integer id;
private String name;
private Integer parentId;
private Integer sort;
private String note;
private Date createdTime;
private Date modifiedTime;
private String createdUser;
private String modifiedUser;
@Override
public String toString() {
return "SysDept{" +
"id=" + id +
", name='" + name + '\'' +
", parentId=" + parentId +
", sort=" + sort +
", note='" + note + '\'' +
", createdTime=" + createdTime +
", modifiedTime=" + modifiedTime +
", createdUser='" + createdUser + '\'' +
", modifiedUser='" + modifiedUser + '\'' +
'}';
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getParentId() {
return parentId;
}
public void setParentId(Integer parentId) {
this.parentId = parentId;
}
public Integer getSort() {
return sort;
}
public void setSort(Integer sort) {
this.sort = sort;
}
public String getNote() {
return note;
}
public void setNote(String note) {
this.note = note;
}
public Date getCreatedTime() {
return createdTime;
}
public void setCreatedTime(Date createdTime) {
this.createdTime = createdTime;
}
public Date getModifiedTime() {
return modifiedTime;
}
public void setModifiedTime(Date modifiedTime) {
this.modifiedTime = modifiedTime;
}
public String getCreatedUser() {
return createdUser;
}
public void setCreatedUser(String createdUser) {
this.createdUser = createdUser;
}
public String getModifiedUser() {
return modifiedUser;
}
public void setModifiedUser(String modifiedUser) {
this.modifiedUser = modifiedUser;
}
}
二、Dao
// 添加功能
int insertObject(SysDept entity);
三、mapper.xml
<!--添加信息-->
<insert id="insertObject" parameterType="com.jt.sys.SysDept">
insert into sys_depts
(name,parentId,sort,note,createdTime,modifiedTime,createdUser,modifiedUser)
values
(#{name},#{parentId},#{sort},#{note},now(),now(),#{createdUser},#{modifiedUser})
</insert>
四、Service
// 添加功能
int saveObject(SysDept entity); //按对象传 返回值int条记录
// 添加 功能
@Override
public int saveObject(SysDept entity) {
// 合法性验证
if(entity==null){
throw new ServiceException("保存对象不能为空");
}
// 部门名不能为空
if(StringUtils.isEmpty(entity.getName())){
throw new ServiceException("部门名不能为空");
}
// 调用方法
int rows = sysDeptDao.insertObject(entity);
return rows;
}
五、Controller
// 插入
@RequestMapping("doSaveObject")
@ResponseBody
public JsonResult doSaveObject(SysDept entity){
sysDeptService.saveObject(entity);
return new JsonResult("Save Ok");
}
//添加菜单编辑页面
@RequestMapping("doDeptEditUI")
public String doDeptEditUI(){
return "sys/dept_edit";//为什么是string类型？因为是绑定页面，传递一个url
}
六、前端数据呈现
.input-group-btn
.btn-add
//3.添加操作
function doSaveOrUpdate() {
// ①设定页面标题
var title;
if($(this).hasClass("btn-add")){
title="添加部门";
}else if($(this).hasClass("btn-update")){
title="修改部门";
//………………
}
//②异步提交
var url="dept/doDeptEditUI"; //去Controller绑定添加页面
$("#mainContentId").load(url,function () {
$(".box-title").html(title);
}); //假如mainContentId上有内容，则移除，变为新内容
测试一下
保存和取消功能
.box-footer
.btn-save
.btn-cancel
一、dept_list.html
$(function(){
doGetObjects(); //显示
//删
$(".input-group-btn")
.on("click",".btn-delete",doDeleteObject) //删除
.on("click",".btn-add,.btn-update",doLoadEditUI) //添加或修改
})
//3.添加操作
function doLoadEditUI() {
// ①设定页面标题
var title;
if($(this).hasClass("btn-add")){
title="添加部门";
}else if($(this).hasClass("btn-update")){
title="修改部门";
//………………
}
//②异步提交
var url="dept/doDeptEditUI"; //去Controller绑定添加页面
$("#mainContentId").load(url,function () {
$(".box-title").html(title);
}); //假如mainContentId上有内容，则移除，变为新内容
}
二、dept_edit.html
$(function () {
$(".box-footer").on("click",".btn-save",doSaveOrUpdate) //保存
.on("click",".btn-cancel",doCancel); //取消
})
//保存或更新
function doSaveOrUpdate() {
//1.获取表单数据
var params=doGetEditFormData();
// 按行读取数据
var rowData=$("#mainContentId").data("rowData");
if(rowData){ //如果按行拿到了数据
params.id=rowData.id;//把拿到对象的id给当前对象id
}
//2.定义url
var insertUrl = "dept/doSaveObject.do";
var updateUrl = "dept/doUpdateObject.do";
var url=rowData?updateUrl:insertUrl;
//3.异步提交数据
$.post(url,params,function (result) {
if(result.state==1){
alert(result.message);
doCancel(); //保存后取消显示
}else {
alert(result.message);
}
})
}
function doCancel() {
// var url="dept/doDeptListUI";
$("#mainContentId").load("dept/doDeptListUI",function () { //绑定页面的同时
$("#mainContentId").removeData(); //初始化数据
$("#parentId").removeData(); //初始化数据
})
}
//获取表单数据
function doGetEditFormData() {
var params={
//左：数据库字段 右：前端id 获取用.val() 赋值用val("")
name:$("#nameId").val(),
note:$("#noteId").val(),
sort:$("#sortId").val(),
parentId:$("#parentId").data("parentId")
}
return params;
}
测验一下吧：
遇到问题：上级菜单的树状结构呈现
一、实体
Node已经存在。
二、Dao
// 上级部门树结构呈现功能
// 查询ztree呈现数据时需要的菜单信息 用List封装
List<Node> findZtreeDeptNodes();
三、mapper.xml
<!--查询菜单节点信息 呈现到ztree-->
<select id="findZtreeDeptNodes" resultType="com.jt.common.vo.Node">
select id,name,parentId
from sys_depts
</select>
四、Service
// 上级部门树结构呈现功能
// 查询ztree呈现数据时需要的菜单信息 用List封装
List<Node> findZtreeDeptNodes();
@Override
public List<Node> findZtreeDeptNodes() {
return sysDeptDao.findZtreeDeptNodes();
}
五、Controller
// 上级部门树结构
@RequestMapping("doFindZtreeDeptNodes")
@ResponseBody
public JsonResult doFindZtreeDeptNodes(){
return new JsonResult(sysDeptService.findZtreeDeptNodes());
}
六、页面呈现
var zTree;
//初始化zTree时会用到
var setting = {
data : {
simpleData : {
enable : true,
idKey : "id", //节点数据中保存唯一标识的属性名称
pIdKey : "parentId", //节点数据中保存其父节点唯一标识的属性名称
rootPId : null //根节点id
}//json 格式javascript对象
}
}//json 格式的javascript对象
$(function () {
//加载上级部门树结构
$(".form-horizontal")
.on("click",".load-sys-dept",doLoadZtreeNodes); //展示树结构
$(".box-footer").on("click",".btn-save",doSaveOrUpdate) //保存
.on("click",".btn-cancel",doCancel); //取消
$("#treeLayer")
.on("click",".btn-confirm",doSetSelectNode) //确定按钮
.on("click",".btn-cancel",doHideTree); //隐藏树结构
})
//上级菜单的确定按钮 --不太懂
function doSetSelectNode() {
// 获取选中节点
var nodes=zTree.getSelectedNodes();
if(nodes.length==0){
return;
}
var node=nodes[0];
console.log(node);
// 将对象内容填充到表单
$("#parentId").data("parentId",node.id);
$("#parentId").val(node.name);
//隐藏树对象
doHideTree();
}
//隐藏树结构
function doHideTree() {
$("#treeLayer").css("display","none");
}
//树结构显示 --不太懂
function doLoadZtreeNodes() {
// 修改原隐藏css样式
$("#treeLayer").css("display","block");
// 显示树结构的页面
var url="dept/doFindZtreeDeptNodes";
//异步加载数据,并初始化数据
$.getJSON(url,function (result) {
if(result.state==1){
//使用init函数需要先引入ztree对应的js文件
zTree=$.fn.zTree.init($("#zTreeId"),setting,result.data);// zTreeId和setting都在最上面
}else {
alert(result.message);
}
})
}
检测一下吧:
