1.dialog控件
①.添加操作列（book.js文件）
②.usermanage写入dialog窗体然后添加form表单
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>书籍hhh</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/black/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/book.js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<div id="tb">
<input class="easyui-textbox" id="bname" name="bname" style="width:20%;padding-left: 10px" data-options="label:'书名:',required:true">
<a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
<!-- <a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a> -->
</div>
<table id="dg"></table>
<!-- 给dialog窗体-->
<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'">
<!-- 提交的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>
</body>
</html>③.把选中的数据绑定到form表单上
$(function(){
$('#dg').datagrid({
url:$("#ctx").val()+'/book.action?methodName=datagrid',
pagination:true,
fitColumns:true,
columns:[[
{field:'bid',title:'代码',width:100},
{field:'bname',title:'名称',width:100},
{field:'price',title:'价格',width:100},
{field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
return '<a href="javascript:void(0);" onclick="edit();">修改</a>';
}
}
]]
});
$("#btn-search").click(function(){
$('#dg').datagrid('load', {
bname: $("#bname").val(),
});
})
})
function edit(){
//dialog对话框窗口的方法扩展自window（窗口）
$("#dd").dialog("open")
/* 将选中的数据表格对应的数据填写到表单中
* 1.datagrid控件获取对应的数据
* 2.对应的行数据row填写到form控件
*
*/
var row=$('#dg').datagrid("getSelected");
//要与form表单的name属性相对应，否则无法填充数据
$('#ff').form('load',row);
}
function submitForm(){
$('#ff').form('submit', {
url:$("#ctx").val()+'/book.action?methodName=edit',
success: function(data){
if(data==1){
//修改成功就关闭窗体
$("#dd").dialog("close");
//刷新数据
$('#dg').datagrid('reload');
}
}
});
}④bookdao
package com.zy.dao;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
import com.zy.entity.Book;
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 {
String sql="update t_mvc_book set bname=?,price=? where bid=?";
super.executeUpdate(sql, book, new String[] {"bname","price","bid"});
}
public static void main(String[] args) throws Exception {
BookDao bookDao=new BookDao();
Book b=new Book();
PageBean pageBean=new PageBean();
List<Book> list = bookDao.list(b, pageBean);
ObjectMapper om=new ObjectMapper();
Map<String, Object> map=new HashMap<String, Object>();
map.put("total", pageBean.getTotal());
map.put("rows",list);
// System.out.println(om.writeValueAsString(map));
}
}
⑤.bookaction
package com.zy.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.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
import com.zy.dao.BookDao;
import com.zy.entity.Book;
public class BookAction extends ActionSupport implements ModelDriver<Book>{
private Book book=new Book();
private BookDao bookDao=new BookDao();
public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {
BookDao bookDao=new BookDao();
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Book> list = bookDao.list(book, pageBean);
ObjectMapper om=new ObjectMapper();
/*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));
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,0);
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
public Book getModel() {
return book;
}
}
运行结果：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
