准备工作
一、实体对象SysDept
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;
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;
}
}
二、Controller绑定页面return “sys/dept_list”
@Controller
@RequestMapping("/dept/")
public class SysDeptController {
// 绑定页面return "sys/dept_list"
// 为什么此方法类型为String？因为这是绑定一个url
@RequestMapping("doDeptListUI")
public String doDeptListUI(){
return "sys/dept_list";
}
}
三、添加点击事件start.html
$(function(){
/* $("#load-log-id").click(function(){
var url="log/doLogListUI.do";
//load函数为一个特殊的ajax函数
$("#mainContentId").load(url);
}) */
/*$("#load-menu-id").click(function(){
var url="menu/doMenuListUI.do";
//load函数为一个特殊的ajax函数
$("#mainContentId").load(url);
})*/
doLoadUI("load-log-id","log/doLogListUI");
doLoadUI("load-menu-id","menu/doMenuListUI");
doLoadUI("load-dept-id","dept/doDeptListUI");
});
// 发现两个方法大量代码重复，可提取
function doLoadUI(id,url) {
$("#"+id).click(function(){
//load函数为一个特殊的ajax函数
$("#mainContentId").load(url,function () {
//初始化对象 如果有数据，移除
$("#mainContentId").removeData();
});
});
}
检测一下吧：
问题：数据呈现失败。由此，进行数据呈现的代码实现。
服务器端实现数据呈现
一、Dao【这是一个接口】
public interface SysDeptDao {
//一、呈现数据功能
List<Map<String,Object>> findObjects();
}
二、mapper.xml
<select id="findObjects" resultType="map">
-- select c.*,p.name parentName
-- from sys_menus c left join sys_menus p
-- on c.parentId=p.id
select c.*,(
select p.name
from sys_depts p
where c.parentId=p.id
) parentName
from sys_depts c
</select>
三、Service
public interface SysDeptService {
//一、呈现数据功能
List<Map<String,Object>> findObjects();
}
@Service
public class SysDeptServiceImpl implements SysDeptService {
// 绑定Dao
@Autowired
private SysDeptDao sysDeptDao;
// 信息呈现功能 业务逻辑
@Override
public List<Map<String, Object>> findObjects() {
return sysDeptDao.findObjects();
}
}
四、Controller
@Controller
@RequestMapping("/dept/")
public class SysDeptController {
// Controller绑定Service
@Autowired
private SysDeptService sysDeptService;
// 绑定页面return "sys/dept_list"
// 为什么此方法类型为String？因为这是绑定一个url
@RequestMapping("doDeptListUI")
public String doDeptListUI(){
return "sys/dept_list";
}
@RequestMapping("doFindObjects")
@ResponseBody
public JsonResult doFindObjects(){
return new JsonResult(sysDeptService.findObjects());
}
}
客户端实现-呈现
<script type="text/javascript">
/**
* 初始化表格的列
*/
var columns = [
{
field : 'selectItem',
radio : true
},
{
title : 'ID',
field : 'id',
visible : false,
align : 'center',
valign : 'middle',
width : '80px'
},
{
title : '名称',
field : 'name',
align : 'center',
valign : 'middle',
sortable : true,
width : '130px'
},
{
title : '上级机构',
field : 'parentName',
align : 'center',
valign : 'middle',
sortable : true,
width : '100px'
},
{
title : '排序号',
field : 'sort',
align : 'center',
valign : 'middle',
sortable : true,
width : '70px'
}
];
$(function(){
doGetObjects();
})
//1.页面展示功能
function doGetObjects(){
//1.构建treeTable对象
var tableId="gridTreeTable";
var url="dept/doFindObjects";
var table= new TreeTable(
tableId,
url,
columns //上面定义的columns= =
);
//设置从哪一列展开内容(默认是第一列)
table.setExpandColumn(2);//可以不写
//初始化table对象(底层发ajax异步请求访问服务端)
table.init();
}
</script>
检测一下吧：
CURD篇之删除：
核心业务 查询此部门有没有对应的子元素，有没有员工，有则不允许删除
一、Dao
// 查询此部门有没有对应的子元素，有没有员工，有则不允许删除
int getChildCount(Integer id); //按id传
// 删除功能
int deleteObjects(Integer id); //按id传
二、mapper.xml
<!--基于菜单id统计子菜单的个数-->
<select id="getChildCount" resultType="int">
select count(*)
from sys_depts
where parentId=#{id}
</select>
<!--基于子菜单查询后，符合操作规定进行删除-->
<delete id="deleteObject">
delete from sys_depts where id=#{id}
</delete>
三、Service
// 查询此部门有没有对应的子元素，有没有员工，有则不允许删除
// 删除功能
int deleteObject(Integer id); //按id传
// 删除 有子不删 没子删掉
@Override
public int deleteObject(Integer id) {
// 1.合法性验证
if(id==null||id<=0){
throw new ServiceException("数据不合法："+id);
}
// 2.判定有没有子 ，没有子--删
int childCount=sysDeptDao.getChildCount(id);
if(childCount>0){
throw new ServiceException("此元素有子元素，不可被删除");
}
int rows = sysDeptDao.deleteObject(id);
if(rows==0){
throw new ServiceException("此信息可能已经不存在");
}
return rows;
}
四、Controller
@RequestMapping("doDeleteObject")
@ResponseBody
public JsonResult doDeleteObject(Integer id){
sysDeptService.deleteObject(id);
return new JsonResult("Delete Ok");
}
五、前端页面实现
.input-group-btn
.btn-delete
$(function(){
doGetObjects(); //显示
//删
$(".input-group-btn").on("click",".btn-delete",doDeleteObject);
})
//2.删除操作
function doDeleteObject(){
// 获取选中的id
var id=doGetCheckedId(); //获取选中记录的id值
if(!id){alert("没有选中id！");return;} //没有获取到id
// 异步提交删除数据
var url="dept/doDeleteObject"; //①地址
// --传id
var params={"id":id}; //②按什么传？id
// post //③post
$.post(url,params,function (result) {
if(result.state==1){ //如果删除成功
doGetObjects(); //显示数据
alert(result.message); //响应
}else {
alert(result.message); //响应
}
})
}
//获取选中记录的id值
function doGetCheckedId() {
//bootstrapTreeTable是treeGrid插件内部定义的jquery扩展函数
//getSelections为扩展函数内部要调用的一个方法
// 1.获取选中记录
var selections=$("#gridTreeTable") //找的是table-id
.bootstrapTreeTable("getSelections");
// 2.对选中记录进行判定
if(selections.length==1){
return selections[0].id;
}
}
检验一下吧！
