一、datagrid修改
1、思路
①、将修改加入到数据表格中。
②、点击修改之后要弹出一个对话框
③、点击弹出框之后里面是一个form表单
④、datagrid控件获取对应到行数据row
⑤、之后就是将row数据回显到表格中
⑥、提交之后要将弹出框关闭以及无刷新datagrid数据表格
2、增加修改超链接
{field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
return '<a href="javascript:void(0);" onclick="edit();">修改</a>'
}
}
3、打开form表单窗口
①、弹窗在window(窗口)
div id="dd" class="easyui-dialog" title="编辑窗体"
style="width: 500px; height: 200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">
</div>
②、edit()点击修改出现弹窗
注意:edit()方法一定要写到$(function(){})外面去
function edit() {
// dialog框窗口的方法扩展自window(窗口),
// $(#win).window("open");
// 联想到$(#dd).dialog("open");
$("#dd").dialog("open");
}
③、写form表单,给dialog窗体绑定提交数据的按钮
<!-- 提交的from表单 -->
<form id="ff" action="" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="bname" style="width:100%" data-options="label:'书名:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="price" style="width:100%"
data-options="label:'价格:',required:true">
</div>
<input type="hidden" id="book_id" name="bid" value="">
</form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
</div>
</div>
4、回显数据
①、将选中的数据表格对应数据填写到表单中即可
function edit() {
// dialog框窗口的方法扩展自window(窗口),
// $(#win).window("open");
// 联想到$(#dd).dialog("open");
$("#dd").dialog("open");
/*
* 将选中的数据表格对应的数据填写到表单中
* 1.datagrid控件获取对应的行数据row
* 2.对应的行数据row填写到form控件
*/
var row=$('#dg').datagrid("getSelected");
// 注意:要与form表单的name属性相对应,否则无法回显填数据·
$('#ff').form('load',row);
}
5、修改
①、BookDao 中增加修改方法
package com.ysq.dao;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ysq.entity.Book;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class BookDao extends BaseDao<Book> {
// 查询
public List<Book> list(Book book, PageBean pageBean) throws Exception {
String bname=book.getBname();
String sql="select * from t_mvc_book where 1=1";
if(StringUtils.isNotBlank(bname)) {
sql+=" and bname like'%"+bname+"%'";
}
return super.executeQuery(sql, Book.class, pageBean);
}
// 修改
public void edit(Book book) throws Exception {
super.executeUpdate("update t_mvc_book set bname=?,price=? where bid=?", book, new String[] {"bname","price","bid"});
}
}
②、BookAction 增加修改
package com.ysq.web;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ysq.dao.BookDao;
import com.ysq.entity.Book;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class BookAction extends ActionSupport implements ModelDriver<Book>{
private Book book=new Book();
private BookDao bookDao=new BookDao();
public Book getModel() {
return book;
}
// 查询
public String datagrid(HttpServletRequest req, HttpServletResponse resp) {
BookDao bookDao=new BookDao();
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
try {
List<Book> list = bookDao.list(book, pageBean);
ObjectMapper om=new ObjectMapper();
// json数组
// Map<String, Object> map=new HashMap<String, Object>();
// map.put("total", pageBean.getTotal());
// map.put("rows", list);
// 链式编程
ResponseUtil.writeJson(resp, new R()
.data("total", pageBean.getTotal())
.data("rows", list));
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
// 修改
public String edit(HttpServletRequest req, HttpServletResponse resp) {
try {
bookDao.edit(book);
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, 1);
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
return null;
}
}
③、修改按钮的提交方法
function submitForm() {
$('#ff').form('submit', {
url:$("#ctx").val()+'/book.action?methodName=edit',
success: function(data){
if(data==1){
$("#dd").dialog("close");
$('#dg').datagrid('reload');
}
}
});
}
6、页面展示
①、回显
②、修改后