datagrid之修改

思维导图

一、给操作绑定一个窗体

在jsp界面加入api代码

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"  
        data-options="iconCls:'icon-save',resizable:true,modal:true">  
    Dialog Content.   
</div>

在js文件中加入edit方法

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

在弹窗中加入表单

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" οnclick="submitForm()" style="width:80px">Submit</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()" style="width:80px">Clear</a>
    </div>
 
</div>

二、回显数据

修改需要数据展示(回显)，给dialog窗体绑定提交数据

public void edit( Book book) throws Exception {
 
// TODO Auto-generated method stub
 
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 {
 
 bookDao.edit(book);
 
//  修改成功返回1
 
 ResponseUtil.writeJson(resp, 1);
 
} catch (Exception e) {
 
e.printStackTrace();
 
try {
 
// 修改失败返回0
 
 ResponseUtil.writeJson(resp, 0);
 
} catch (Exception e2) {
 
e2.printStackTrace();
 
}
 
}
 
return null;
 
}

提交表单

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

 在js里判断，刷新

function edit(){
 
// 对话框的方法扩展自window（窗口）
 
$("#dd").dialog("open");
 
/*将选中的数据表格对应的数据填到表单中
1、datagrid控件获取对应行数据row
2、对应的行数据row填写到对应form控件*/
 
var row=$('#dg').datagrid("getSelected");
 
// 注意要与form表单的name属性相对应，否则无法回填数据
 
$('#ff').form('load',row);
 
}
 
// 提交修改数据
 
function submitForm(){
 
$('#ff').form('submit', {
 
url: $("#ctx").val()+'/book.action?methodName=edit',
 
success: function(data){
 
if(data==1){
 
$("#dd").dialog("close");
 
// 刷新
 
$("#dg").datagrid("reload");
 
}
 
}
 
});
 
}

展示效果