datagrid之修改

目录

课堂目标

一、操作（修改）列

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

 三、form（表单）控件的使用

---

课堂目标

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

2.form（表单）控件的使用

dialog控件与boostrap的模态框类似---》作用：弹框（不用界面的跳转）

---

一、操作（修改）列

 结合上节查询：https://blog.csdn.net/qq_54936371/article/details/120292324

 找到api中怎么给datagrid（表格数据添加一列）

 添加到book.js中：

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

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

 在api找到对应的用到userManger中  

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

 dialog继承window完全拓展自window窗口

 在窗口后面添加closed：true默认关闭

在js中添加在点击修改时弹出窗口

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

 点击时

 三、form（表单）控件的使用

 在userManger.jsp中加入表单

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

给dialog窗体绑定提交数据的按钮

在dialog窗体后面绑定buttons:'#btn'

写一个btn绑定

<div  id=btn>

 <a id="btn-edit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">修改</a>

</div>

给添加样式 

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

 

修改数据的回显

1.将选中的数据表格对应数据填写到表单中

2.对应的行数据rows填写到from控件

①选中的行的数据方法

  

var row= $('#dg').datagrid("getSelected");

*row：对应的行数据

 ②把选中的行数据填入表单

$('#ff').form('load',row);

 *注意：要与form表单的name属性相对应，否则无法回显数据

 运行结果：

*在选中行的时候必须要选中才可以修改，列如变成黄色的

提交数据

 dao方法

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

 action

public String edit(HttpServletRequest req, HttpServletResponse resp) {
    // TODO Auto-generated method stub
try {
    bookDao.edit(book);
} catch (Exception e) {
    e.printStackTrace();
}
return null;
}

 运行结果没有自动刷新和退出界面

ResponseUtil.writeJson(resp, 1);表示返回成功

ResponseUtil.writeJson(resp, 0);表示返回失败

如果返回成功调用data

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

}