前言:今天学习的是三个控件
dialog控件:弹窗
基本方法:
oppen打开
close关闭
属性
closed:true
(更多可自行前往api查看)
form控件:表单
submit 提交表单
url:提交路径
sucess方法接收后台数据
load:将数据回写给表单
detagrid:数据表格
getSelected 获取表格一行数据
formatter表格列属性
reload刷新数据表格
这就是今天我们要讲的所有控件以及方法,上面是这些方法对应的用法
今天目标实现数据表格中的修改
首先我们给表格新增一列操作列将修改加入
$('#dg')
.datagrid(
{
url : $("#ctx").val() + '/book.action?methodName=books',
pagination : true,
fitColumns : true,
checkbox : true,
toolbar : '#tb',
columns : [ [
{
field : 'bid',
title : 'id',
width : 100
},
{
field : 'bname',
title : '名称',
width : 100
},
{
field : 'price',
title : '价格',
width : 100
},
{
field : '操作',
title : '操作',
width : 100,
align : "right",
formatter : function(value, row, index) {
return "<a href='javascript:void(0);' οnclick='xg()'>修改</a>"
}
}
] ]
})
看不懂得可以参照前面几次课的博客
第二部,点击修改弹出弹出框给修改一个点击事件
然后在弹出框中加入一个表单用来提交
将选中修改的数据回写到表单中去
最后提交到后台进行数据库修改,
在关闭弹出框,刷新表格数据
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" onclick="submitForm()" style="width:80px">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
</div>
</div>
修改点击事件
function xg() {
//获取选中行数据
var row = $('#dg').datagrid('getSelected');
//打开弹窗
$('#dd').dialog('open');
//将数据给表单
$('#ff').form('load', row);
}
表单提交
$('#ff').form('submit', {
//路径
url: $("#ctx").val() + '/book.action?methodName=bookxg',
success: function(data){
//接收后台的值判断是否修改成功
if(data==1){
$('#dd').dialog('close')
$('#dg').datagrid('reload')
}
}
});
后端
(如果不懂建议看之前博客自定义mvc框架)
先写dao方法
public void bookxg(Book b) throws Exception {
super.executeUpdate("update t_mvc_book set bname=? ,price=? where bid=? ", b,
new String[] { "bname", "price", "bid" });
}
再写子控制器调用dao方法
public String bookxg(HttpServletRequest req, HttpServletResponse resp) {
try {
bookdao.bookxg(book);
ResponseUtil.writem(resp, 1);
} catch (Exception e) {
// TODO Auto-generated catch block
try {
ResponseUtil.writem(resp, 0);
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
e.printStackTrace();
}
return null;
}
运行结果