分析：
1.选择什么样的修改方式？
①从数据库中查询呈现到页面【数据库->页面–复杂】
②从页面上获取呈现信息导入到表单上呈现【页面->页面–性能更佳】
2.如何将页面上的信息拿到？
选中的checked对象拿到当前行对象
3.tr如何绑定数据？
找到tr对象创建的位置，或者渲染数据的位置，使用data
一、页面操作–MenuList.html
$(function(){
doGetObjects();
// 按钮事件注册--删除按钮
$(".input-group-btn")
.on("click",".btn-delete",doDeleteObject) //删除
.on("click",".btn-add,.btn-update",doLoadEditUI)//添加菜单.btn-add、修改菜单操作.btn-update
});
function doLoadEditUI() {
var title;
if($(this).hasClass("btn-add")){
title="添加菜单信息";
}else{
//1.设置标题
title="修改菜单信息";
// 2.获取选中当前行记录 (从tr对象中获取
// var rowData=????
// 3.重新绑定对象到mainContentId对象
// $("#mainContentId").data("rowData",rowData);
}
为什么是mainContentId对象？以为你最外层是他，从其中取到的数据要被替换到最外层显示。
问：如何获取tr？
显示的是treegrid，是写好的。先进源代码，绑定再获取。
找到treegrid
特殊技能：读懂源代码！进行修改！
把debugger的注释取消
效果：每执行一次箭头，显示一行内容
找到包含tr的tbody
1.menu.list
//菜单添加操作
function doLoadEditUI() {
var title;
if($(this).hasClass("btn-add")){
title="添加菜单信息";
}else{
//菜单修改操作
//1.设置标题
title="修改菜单信息";
// 2.获取选中当前行记录 (从tr对象中获取
var rowData=$("tbody input[type='radio']:checked").parents("tr").data("rowData");
console.log("list.rowData",rowData);//为什么是 list.rowData？只是一个输出提示
// 3.重新绑定对象到mainContentId对象
$("#mainContentId").data("rowData",rowData);
}
// 2.加载异步编辑页面
var url="menu/doMenuEditUI";
$("#mainContentId").load(url,function () {
$(".box-title").html(title);
}); //假如mainContentId上有内容，则移除，变为新内容
}
2.menu.edit
$(function () {
$(".form-horizontal")
.on("click",".load-sys-menu",doLoadZtreeNodes); //显示菜单树
$("#menuLayer")
.on("click",".btn-cancel",doHideTree) //给树取消显示函数
.on("click",".btn-confirm",doSetSelectNode);// 设置选中节点
//保存与取消----添加操作.btn-save
$(".box-footer")
.on("click",".btn-save",doSaveOrUpdate)
.on("click",".btn-cancel",doCancel);
//修改操作：绑定按行读取事件
var rowData=$("#mainContentId").data("rowData");
console.log("edit.rowData",rowData);
});
测试：两次拿到的结果一样。
$(function () {
$(".form-horizontal")
.on("click",".load-sys-menu",doLoadZtreeNodes); //显示菜单树
$("#menuLayer")
.on("click",".btn-cancel",doHideTree) //给树取消显示函数
.on("click",".btn-confirm",doSetSelectNode);// 设置选中节点
//保存与取消----添加操作.btn-save
$(".box-footer")
.on("click",".btn-save",doSaveOrUpdate)
.on("click",".btn-cancel",doCancel);
//修改操作：绑定按行读取事件
var rowData=$("#mainContentId").data("rowData");
console.log("edit.rowData",rowData);
if(rowData){
doInitEditFormData(rowData);
}
});
//修改操作--初始化表单数据
function doInitEditFormData(rowData) {
$("form input[value='"+rowData.type+"']").prop("checked"),
$("#nameId").val(rowData.name),
$("#urlId").val(rowData.url),
$("#sortId").val(rowData.sort),
$("#permissionId").val(rowData.permission),
$("#parentId").data("parentId",rowData.parentId);
$("#parentId").val(rowData.parentName);
// val()取值 val("")赋值
}
bug：每一次修改，都插入了一条新数据，旧数据还在
服务端实现：
1.Dao
// 菜单修改操作
int updateObject(SysMenu entity);
2.Mapper.xml
<!--修改菜单-->
<update id="updateObject" parameterType="com.jt.sys.SysMenu">
update sys_menus
set
name=#{name},
type=#{type},
sort=#{sort},
url=#{url},
permission=#{permission},
parentId=#{parentId},
modifiedUser=#{modifiedUser},
modifiedTime=now()
where id=#{id}
</update>
3.Service
// 修改菜单操作
int updateObject(SysMenu entity);
// 修改菜单
@Override
public int updateObject(SysMenu entity) {
// 验证信息合法性
if(entity==null){
throw new IllegalArgumentException("保存的对象为空");
}
// ①不允许重复
if(StringUtils.isEmpty(entity.getPermission())) {
throw new IllegalArgumentException("权限标识不能为空");
}
// 扩展 ②基于用户输入的Permission查询是否重复【很多】
if(StringUtils.isEmpty(entity.getName())){
throw new IllegalArgumentException("菜单名不能为空");
}
// 保存数据
int rows = sysMenuDao.updateObject(entity); //按行数返回
if(rows==0){
throw new ServiceException("此记录可能已经不存在");
}
// 返回结果
return rows;
}
4.Controller
// 修改菜单信息入库
@RequestMapping("doUpdateObjects")
@ResponseBody
public JsonResult doUpdateObjects(SysMenu entity){
sysMenuService.saveObject(entity);
return new JsonResult("Update Ok!");
}
5.前端
//添加菜单---保存操作--或 修改操作
function doSaveOrUpdate() {
// 获取表单内容
var params=doGetEditFormData();
//判断是否为修改
var rowData=$("#mainContentId").data("rowData"); //绑定按行读取
// 假如是修改还需要向服务端传递一个id
if(rowData){params.id=rowData.id;}
// 异步提交
var insertUrl="menu/doSaveObjects";
var updateUrl="menu/doUpdateObjects";
//判定
var url=rowData?updateUrl:insertUrl;
//验证
console.log("edit.params:",params);
$.post(url,params,function(result){
if(result.state==1){ //如果添加成功了
alert(result.message); //显示成功信息
doCancel(); //退出添加页面
}else {
alert(result.message); //添加失败 显示失败信息
}
})
}
