一、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 blocke1.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、页面展示

①、回显

②、修改后

datagrid之修改相关推荐

datagrid 之修改
一.datagrid修改今天是修改然后看看今天的目的: 查看API.demo 1.思路: 2.增加修改超链接 3.打开form表单窗口 ①.弹窗在window(窗口) <div i ...
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修改

4、回显数据

5、修改

6、页面展示

datagrid之修改相关推荐

最新文章

热门文章