前言:给大家讲解datagrid的增加和删除
不会就看aqi(说明书)、demo(案例),只要把思路理清了,做出效果很容易了
码字不易,点个关注
转载请说明!!!
开发工具:eclipse
目录
1、思路以及代码实现
增加
①在userManage界面添加一个增加按钮 id为btn-add
<a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
②在js文件中给按钮添加点击事件,使点击时弹出增加弹框
$("#btn-add").click(function() {
$('#ff').form('clear');
$("#dd").dialog("open");
addFlag = 1;
});
注意:要写在function内
增加窗口效果:
③提交表单
定义一个变量addFlag, 点击确定按钮提交表单到后台,并且是新增/修改共用的一个方法
条件是判断有没有id
var addFlag = 0;
$(function() {
$('#dg').datagrid({
url : $("#ctx").val() + '/book.action?methodName=datagrid',
pagination : true,
fitColumns : true,
toolbar : '#tb',
columns : [ [ {
field : 'bid',
title : 'id',
width : 100
}, {
field : 'bname',
title : '名字',
width : 300
}, {
field : 'price',
title : '价格',
width : 100,
}, {
field : '操作',
title : '操作',
width : 100,
align : 'right',
formatter : function(value, row, index) {
return '<a href="javascript:void(0);"onclick="edit();">修改</a>
}
}
] ]
});
//修改
$("#btn-search").click(function() {
$('#dg').datagrid('load', {
bname : $("#bname").val()
});
});
//增加
$("#btn-add").click(function() {
$('#ff').form('clear');
$("#dd").dialog("open");
addFlag = 1;
});
})
function edit() {
addFlag = 2;
// dialog对话框窗口的方法扩展自window(窗口)
// $('#win').window('open');
// 联想到$("#dd").dialog("open");
$("#dd").dialog("open");
/**
* 1.将选中的表格对应的行数据row 2.对应的行数据row填写到form控件
*/
var row = $('#dg').datagrid("getSelected");
console.log(row);
// 注意:要与form表单的name属性相对应,否则无法回填数据
$('#ff').form('load', row);
}
function submitForm() {
/**
* 点击确定按钮提交表单到后台,并且是新增/修改共用的一个方法
*/
// 获选择数据
var row = $('#dg').datagrid("getSelected");
var href = null;
if (addFlag == 2) {
href = $("#ctx").val() + '/book.action?methodName=edit'
} else if (addFlag == 1) {
href = $("#ctx").val() + '/book.action?methodName=add'
}
$('#ff').form('submit', {
url : href,
success : function(data) {
// alert(data);
if (data == 1) {
$("#dd").dialog("close");
$('#dg').datagrid('reload');
}
}
});
}
④在dao类里面添加增加方法
public void add(Book book) throws Exception {
book.setBid((int)new Date().getTime());
super.executeUpdate("insert into t_mvc_book values(?,?,?)", book, new String[] {"bid","bname","price"});
}
Book的id采用时间戳随机生成
⑤BookAction子控制器调用方法
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
dao.add(book);
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, 0);
} catch (IOException e1) {
e1.printStackTrace();
}
}
return null;
}
删除
①添加列操作,在修改后面加一个删除
,{
field : '操作',
title : '操作',
width : 100,
align : 'right',
formatter : function(value, row, index) {
return '<a href="javascript:void(0);"onclick="edit();">修改</a>  <a href="javascript:void(0);"onclick="del();">删除</a>';
}
}
②通过id删除数据并刷新表格
messager控件为提示窗口
messager不能向后台发送请求,用$.ajax方法向后台发请求
function del() {
var row = $('#dg').datagrid("getSelected");
if(row){
var id = row.bid;
//messager不能向后台发送请求
$.messager.confirm('确认','您确认想要删除书籍吗?',function(r){
if (r){
$.ajax({
url:$("#ctx").val() + '/book.action?methodName=del&bid='+id,
success:function(data){
if(data == 1){
$('#dg').datagrid('reload');
}
}
});
}
});
}else{
alert("请选择需要删除的数据");
}
}
③在dao类中添加删除方法
public void del(Book book) throws Exception {
super.executeUpdate("delete from t_mvc_book where bid=?", book, new String[] {"bid"});
}
④BookAction子控制器内调用方法
public String del(HttpServletRequest req, HttpServletResponse resp) {
try {
dao.del(book);
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, 0);
} catch (IOException e1) {
e1.printStackTrace();
}
}
return null;
}
2、测试
所有操作结束都是关闭弹出框,并且刷新数据
增加
删除
选中斗破苍穹点击删除
到这里就结束了,我依旧是那个学IT的小学生
欢迎大佬指点