datagrid修改

前言：给大家讲解datagrid的修改

不会就看aqi(说明书)、demo(案例)，只要把思路理清了，做出效果很容易了

码字不易，点个关注

转载请说明！

开发工具:eclipse

---

思维导图:

---

一、明确目标

 1、 要用dialog、form、datagrid控件写出修改效果

二、思路以及代码实现

思路

1、将修改加入到数据表格中。

2、点击修改之后要弹出一个对话框

3、点击弹出框之后里面是一个form表单

4、datagrid控件获取对应到行数据row

5、之后就是将row数据回显到表格中

6、提交之后要将弹出框关闭以及无刷新datagrid数据表格。

实现代码

 将修改加入到数据表格中，在book.js中最后一行的最后一个属性之后加以下代码

{
			field : '操作',
			title : '操作',
			width : 100,
			align : 'right',formatter: function(value,row,index){
				return '<a href="javascript:void(0);"onclick="edit();">修改</a>';
			}

		} 

点击修改之后要弹出一个对话框。userManage界面弹出框

<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>

 book.js（是在点击修改之后弹出的对话框）

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

 点击弹出框之后里面是一个form表单（将form表单嵌入到弹出框中）

  <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>

datagrid控件获取对应到行数据row

var row = $('#dg').datagrid("getSelected");

将row数据回显到表格中

$('#ff').form('load',row);

 

提交之后要将弹出框关闭以及无刷新datagrid数据表格, 最后一步需要在book.action中返回出一个值，然后通过返回值（也就是说看是否调用了修改方法）来判断是否要将弹出框关闭以及无刷新datagrid数据表格

dao

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

public String edit(HttpServletRequest req, HttpServletResponse resp) {
		try {
			dao.edit(book);
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, 0);
			} catch (IOException e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}

 book.js

function submitForm() {
	$('#ff').form('submit', {
		url: $("#ctx").val() + '/book.action?methodName=edit',
		success: function(data){
			//alert(data);
			if(data==1){
				$("#dd").dialog("close");
				$('#dg').datagrid('reload');
			}
		}
	});

}

运行结果如下：

 

 

 点击submit提交按键，关闭弹出框，刷新数据

到这里就结束了，我依旧是那个学IT的小学生 

欢迎大佬指点