[JavaScript知识库]Easyui之datagrid修改实现

?

1.在表格上加一列操作列

在js文件中加入下面代码

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

可以看到：

?页面中多了修改列。

现在还需要给修改添加点击事件edit()，弹出修改窗体，并且完成数据回显

2.给修改操作绑定一个弹窗

2.1.在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="#" class="easyui-linkbutton" 
			onclick="submitForm()" style="width: 80px">Submit</a>
			<a href="#" class="easyui-linkbutton"
				onclick="clearForm()" style="width: 80px">Clear</a>
		</div>

	</div>

2.2.在js文件中加入edit方法（关键）

function edit() {
    $('#dd').dialog("open");
}

于是?

?2.3实现数据回显

Easyui中，datagrid数据表格有得到选中行的方法。所以

function edit(){//修改的点击事件
	$("#dd").dialog("open");
	var row=$('#dg').datagrid("getSelected")
    $('#ff').form('load',row);

}

2.4表单的提交

在Easyui中，通过js代码实现表单提交和清空，

先给按钮添加点击事件，上面的已经添加好了，submitForm()和clearForm()

function clearForm(){//对话框表单的清空事件
	$('#ff').form('reset')
}

function submitForm(){//对话框表单的提交事件
	$('#ff').form('submit',{  
	    url:$('#myWeb').val()+"/book.action?methodName=edit",    
	    success:function(data){
	       if(data==1){
	    	   $("#dd").dialog("close")//窗口关闭
	    	   $("#dg").datagrid("reload")//数据刷新
	       }else{
	    	   alert('修改失败')
	    	   $("#dd").dialog("close")
	    	   $("#dg").datagrid("reload")
	       }
	    }    
	}); 
}

记得关闭窗口和刷新数据表格