datagrid之修改

 一、dialog（对话框窗口）控件的使用

 利用API中datagrid控件进行插入（book.js） ,修改成需要的样子

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

 效果

 

 在js修改列中添加点击事件

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

 同时需要写点击事件的方法：

 function edit(){
 
// 对话框的方法扩展自window（窗口）
 
$("#dd").dialog("open");
 
}

 二、form控件的使用

  1、从API中获取form控件在界面写窗体的样式

<!-- 弹窗 -->
<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>

 效果

 

 2.修改需要数据展示（回显）,给dialog窗体绑定提交数据

 BookDao写修改方法

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

  3,.最后在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");
 
}
 
}
 
});
 
}

 效果