datagrid 之修改

一、datagrid修改

今天是修改然后看看今天的目的：

查看API、demo

1、思路：

2、增加修改超链接

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'">   内容（存放form表单区域）</div>

②、edit()修改事件（记得edit()方法一定要写到$(function(){})外面去）

function edit() {//dialog对话框窗口的方法扩展自window（窗口）//$("#win").window("open");//联想到$("#dd").dialog("open");//打开窗口$("#dd").dialog("open");
}

③、写form表单，给dialog窗体绑定提交数据的按钮

<%@ 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>存放书籍页面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/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> <!-- 弹窗 在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'"><!--  弹窗在window（窗口）中 window的属性 closed:true关闭窗口1、打开存放form的窗口；2、写form表单；给dialog窗体绑定提交数据的按钮 ；3、回显数据；（对于datagrid而言，以及窗体而言，在同一个jsp，可以不走后台直接填写，对于以前而言，这样就可以少写一个方法，少请求一下后台）把数据填写有两个操作：①、先获取（点击edit（在book.js中）实现的）②、在填写-->  <!-- 提交的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>

4、回显数据

①、在同一个jsp，将选中的数据表格对应数据填写到表单中即可

function edit() {//dialog对话框窗口的方法扩展自window（窗口）//$("#win").window("open");//联想到$("#dd").dialog("open");//打开窗口$("#dd").dialog("open");/*** 将选中的数据表格对应数据填写到表单中* 1、datagrid控件（方法中的getSelected）获取对应的数据row* 2、对应的行数据row填写到form控件*///1、datagrid控件（方法中的getSelected）获取对应的数据rowvar row=$('#dg').datagrid('getSelected');// 2、对应的行数据row填写到form控件(方法中的load)//注意：要与form表单的name属性相对应，否则无法回显；$('#ff').form('load',row);
}

5、修改

①、BookDao 中增加修改方法

package com.mwy.dao;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mwy.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 sql="select * from t_mvc_book where 1=1";String bname=book.getBname();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"});}}

②、BookAction 增加修改

判断是否关闭窗口

ResponseUtil.writeJson(resp, 1);

package com.mwy.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.mwy.dao.BookDao;
import com.mwy.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 bd=new BookDao();//增加public String datagrid(HttpServletRequest req, HttpServletResponse resp) throws Exception {//选中内容想try:Ctrl+Shift+zBookDao bd=new BookDao();PageBean pageBean=new PageBean();pageBean.setRequest(req);List<Book> list = bd.list(book, pageBean);ResponseUtil.writeJson(resp, new R().data("total", pageBean.getTotal()).data("rows", list));//       System.out.println(om.writeValueAsString(map));return null;}//修改public String edit(HttpServletRequest req, HttpServletResponse resp) {try {bd.edit(book);//1：是确认；0：是取消ResponseUtil.writeJson(resp, 1);} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, 0);} catch (Exception e1) {e1.printStackTrace();}}return null;}@Overridepublic Book getModel() {// TODO Auto-generated method stubreturn book;};
}

③、submitForm()方法（对应确认修改按钮）

//提交要写submitForm()的方法（在userManage.jsp的表单按钮上）
function submitForm() {//填写form表单的提交方法（form表单方法中）$('#ff').form('submit', {url: $("#ctx").val()+'/book.action?methodName=edit',success: function(data){/*** 有两个缺陷* 1、窗口没有关闭* 2、数据没有刷新*/if(data==1){//1：是确认，然后关闭窗口$("#dd").dialog("close");//再刷新数据（datagrid的方法里面reload）var row=$('#dg').datagrid('reload');}}});
}

6、代码

①、userManage.jsp所有代码

<%@ 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>存放书籍页面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/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> <!-- 弹窗 在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'"><!--  弹窗在window（窗口）中 window的属性 closed:true关闭窗口1、打开存放form的窗口；2、写form表单；给dialog窗体绑定提交数据的按钮 ；3、回显数据；（对于datagrid而言，以及窗体而言，在同一个jsp，可以不走后台直接填写，对于以前而言，这样就可以少写一个方法，少请求一下后台）把数据填写有两个操作：①、先获取（点击edit（在book.js中）实现的）②、在填写4、修改①、关闭窗口②、刷新数据--><!-- 提交的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>

②、book.js所有代码

$(function() {/*** 在easyUI中，点击下一页上一页等默认的分页效果，携带参数是page\rows* bootstrap,点击下一页上一页等默认的分页效果，携带参数是page\offset*/$('#dg').datagrid({    url:$("#ctx").val()+'/book.action?methodName=datagrid',    pagination:true,fitColumns:true,toolbar: '#tb',columns:[[    {field:'bid',title:'id',width:100},    {field:'bname',title:'名称',width:100},    {field:'price',title:'价格',width:100} ,//datagrid中的列属性{field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){//onclick="edit(); 添加修改事件return '<a href="javascript:void(0);" onclick="edit();">修改</a>';}}]]    }); $("#btn-search").click(function(){$('#dg').datagrid('load', {    bname: $("#bname").val()  });  });
})//记得edit()方法一定要写到$(function(){})外面去function edit() {//dialog对话框窗口的方法扩展自window（窗口）//$("#win").window("open");//联想到$("#dd").dialog("open");//打开窗口$("#dd").dialog("open");/*** 将选中的数据表格对应数据填写到表单中* 1、datagrid控件（方法中的getSelected）获取对应的数据row* 2、对应的行数据row填写到form控件*///1、datagrid控件（方法中的getSelected）获取对应的数据rowvar row=$('#dg').datagrid('getSelected');// 2、对应的行数据row填写到form控件(方法中的load)//注意：要与form表单的name属性相对应，否则无法回显；$('#ff').form('load',row);
}//提交要写submitForm()的方法（在userManage.jsp的表单按钮上）
function submitForm() {//填写form表单的提交方法（form表单方法中）$('#ff').form('submit', {url: $("#ctx").val()+'/book.action?methodName=edit',success: function(data){/*** 有两个缺陷* 1、窗口没有关闭* 2、数据没有刷新*/if(data==1){//1：是确认，然后关闭窗口$("#dd").dialog("close");//再刷新数据（datagrid的方法里面reload）var row=$('#dg').datagrid('reload');}   }});
}

7、结果界面

①、回显

②、修改后

今天到这里就结束了

注意：看API、demo很重要

datagrid 之修改相关推荐

datagrid之修改
一.datagrid修改 1.思路 ①.将修改加入到数据表格中. ②.点击修改之后要弹出一个对话框 ③.点击弹出框之后里面是一个form表单 ④.datagrid控件获取对应到行数据row ⑤.之后就 ...
easyui之datagrid动态修改列
easyui datagrid 定义列的方式通常是: [html] view plaincopy print? $('#grid').datagrid({columns:[[ {field:'f1', ...
easyui datagrid oncheck 修改行样式_100 种 PPT 图表样式送给你
你好,这里是诺灰屋我是诺灰距离上一篇推文,已有近一个月的时间没有给大家写推送了. 这期间,我一直在进行数据图表方面知识的网络调研.甚至于在知网上找了几篇论文来看,当然,内容很枯燥,不实用. 同时, ...
easyui datagrid单独修改某列的值
此时心中毫无波澜,只觉得好饿废话不多说,先看效果图: 代码: <th field="departmentId" width="150px" sortab ...
easy-ui datagrid弹框显示选中行数据
1.CarUpdate.jsp (代码参考) <%@ page language="java" import="java.util.*" pageEnco ...
学习笔记之DataGrid
1.datagrid选定比较底下的行时,为什么总是刷新一下,然后就滚动到了最上面,刚才选定的行因屏幕的关系就看不到了在page_load 中 page.smartNavigation=true 2. ...
ASP.NET(C#)常用代码30例
作者:freejanker 日期:2006-07-17 字体大小: 小中大 ASP.NET程序中常用的三十三种代码 1. 打开新的窗口并传送参数: 传送参数: response.write(&q ...
ASP.NET程序中常用的三十三种代码(转载)
asp.net程序中最常用的三十三种编程代码,为初学者多多积累经验,为高手们归纳总结,看了觉得很有价值~,大家不妨参考下! 1. 打开新的窗口并传送参数: 传送参数: response.write(& ...
领悟Web设计模式(转)
领悟Web设计模式本文发表在<程序春秋>2004年1期摘要本文介绍了在.NET框架下应用Web设计模式改进WebForm程序设计的一些基本方法及要点. 关键字设计模式,ASP.NE ...

datagrid 之修改

一、datagrid修改

查看API、demo

1、思路：

2、增加修改超链接

3、打开form表单窗口

4、回显数据

5、修改

6、代码

7、结果界面

datagrid 之修改相关推荐

最新文章

热门文章

datagrid 之修改

一、datagrid修改

查看API、demo

​​​​​​1、思路：

2、增加修改超链接

3、打开form表单窗口

4、回显数据

5、修改

6、代码

7、结果界面

datagrid 之修改相关推荐

最新文章

热门文章

1、思路：