datagrid之修改

目标：

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

2、form控件的使用

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

1、首先需要对数据表格进行添加修改的列的操作

        利用API中datagrid控件进行插入

js文件中添加：

columns:[[    

        {field:'bid',title:'id',width:100},    

        {field:'bname',title:'名称',width:200},    

        {field:'price',title:'价格',width:100},    

        {field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){

return '<a href="javascript:void(0);">修改</a>'

}

}    

    ]]

如图：

2、点击修改，弹出修改窗口

        从API中找到模式窗口代码放入jsp中，

        红色字体为：设置窗口一开始是关闭的

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"   

        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">   

    Dialog Content.    

</div> 

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

{field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){

return '<a href="javascript:void(0);" onclick="edit();">修改</a>'

}

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

function edit(){

// 对话框的方法扩展自window（窗口）

$("#dd").dialog("open");

}

二、form控件的使用

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

<!-- 给dialog窗体绑定提交数据的按钮 -->

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

展示效果：

 3、修改需要数据展示（回显）以及提交表单

①、我们需要写修改的方法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"});

}

子控制器：

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;

}

②、在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");

}

}

});

}

最终结构：

 这期内容结束~