目录
课堂目标
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');//刷新
}
}
});}