easyui修改以及datagrid dialog form控件使用

前言：今天学习的是三个控件
dialog控件：弹窗
基本方法：
oppen打开
close关闭
属性
closed:true
（更多可自行前往api查看）

form控件：表单
submit 提交表单
url：提交路径
sucess方法接收后台数据
load:将数据回写给表单

detagrid：数据表格
getSelected 获取表格一行数据
formatter表格列属性
reload刷新数据表格

这就是今天我们要讲的所有控件以及方法，上面是这些方法对应的用法
今天目标实现数据表格中的修改

首先我们给表格新增一列操作列将修改加入

$('#dg')
			.datagrid(
					{
    
						url : $("#ctx").val() + '/book.action?methodName=books',
						pagination : true,
						fitColumns : true,
						checkbox : true,
						toolbar : '#tb',
						columns : [ [
								{
    
									field : 'bid',
									title : 'id',
									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);' οnclick='xg()'>修改</a>"
											
									}
								}

						] ]
					})

看不懂得可以参照前面几次课的博客
第二部，点击修改弹出弹出框给修改一个点击事件
然后在弹出框中加入一个表单用来提交
将选中修改的数据回写到表单中去
最后提交到后台进行数据库修改，
在关闭弹出框，刷新表格数据
jsp页面弹窗以及表单代码

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

修改点击事件

function xg() {
    
//获取选中行数据
	var row = $('#dg').datagrid('getSelected');
	//打开弹窗
		$('#dd').dialog('open');
		//将数据给表单
		$('#ff').form('load', row);
}

表单提交

$('#ff').form('submit', {
    
//路径
		url: $("#ctx").val() + '/book.action?methodName=bookxg',
		success: function(data){
    
		//接收后台的值判断是否修改成功
			if(data==1){
    
				$('#dd').dialog('close')
				$('#dg').datagrid('reload')
			}
		}
	});

后端
（如果不懂建议看之前博客自定义mvc框架）
先写dao方法

	public void bookxg(Book b) throws Exception {
    
		super.executeUpdate("update t_mvc_book set bname=? ,price=? where bid=? ", b,
				new String[] {
     "bname", "price", "bid" });
	}

再写子控制器调用dao方法

	public String bookxg(HttpServletRequest req, HttpServletResponse resp) {
    
		try {
    
			bookdao.bookxg(book);
			ResponseUtil.writem(resp, 1);
		} catch (Exception e) {
    
			// TODO Auto-generated catch block
			try {
    
				ResponseUtil.writem(resp, 0);
			} catch (Exception e1) {
    
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}

			e.printStackTrace();

		}
		return null;
	}

运行结果