使用Struts2和jQuery EasyUI实现简单CRUD系统(六)——复选框进行多选删除操作
2015-09-21 13:46
841 查看
增的功能还是一样,只不过将原本自己写的form用ejui提供form代替而已。
删改功能需要拿到具体选择行的id。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/22/b4ccc0e2775eadedfafc224d112f22e4)
[html] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
<table id="dg" title="My Users" class="easyui-datagrid"
style="width: 700px; height: 500px" url="list_ej" toolbar="#toolbar"
rownumbers="true" fitColumns="true" >
<thead>
<tr>
<!-- 这种写法也是可以的
<th field="id" width="50">id</th>
<th field="name" width="50">name</th>
<th field="password" width="50">password</th> -->
<th field="ck" checkbox="true"></th>
<th data-options="field:'id',width:'200px'">id</th>
<th data-options="field:'name',width:'200px'">name</th>
<th data-options="field:'password',width:'200px',align:'right'">password</th>
</tr>
</thead>
</table>
整个datagrid,拿到选中行的id的话。
[javascript] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
var row = $('#dg').datagrid('getSelected');
var id = row.id;
为什么我会知道呢?这种方法给怎么学呢?——看API。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/22/011b05a68cc52088d6cf4f7038b87155)
多选的也是这样拿,只不过返回的是一个数组而已。拿到id后的话,接下来交给struts去处理就可以了。
好了,接下来这么多数据,如果一个一个删除时很蛋疼的,那么我们就需要复选框这种删除了。加个复选框有多简单呢,很简单。
[html] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
<table id="dg" title="My Users" class="easyui-datagrid"
style="width: 700px; height: 500px" url="list_ej" toolbar="#toolbar"
rownumbers="true" fitColumns="true"
singleSelect ="false" checkbox="true" >
<thead>
<tr>
<!-- 这种写法也是可以的
<th field="id" width="50">id</th>
<th field="name" width="50">name</th>
<th field="password" width="50">password</th> -->
<th field="ck" checkbox="true"></th>
<th data-options="field:'id',width:'200px'">id</th>
<th data-options="field:'name',width:'200px'">name</th>
<th data-options="field:'password',width:'200px',align:'right'">password</th>
</tr>
</thead>
</table>
singleSelect ="false" checkbox="true" 单选为false,checkbox可使用。
接下来在js里面:
[javascript] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
// 返回被选中的行 然后集成的其实是 对象数组
var row = $('#dg').datagrid('getSelections');
var i = 0;
var string = "";
for(i;i<row.length;i++){
string += row[i].id;
if(i < row.length-1){
string += ',';
}else{
break;
}
}
转成字符数组,最后传到action那边去,直接用:
[java] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
st.executeUpdate("delete from user where userid in ("+id+")");
删除之后,DataGrid进行刷新就可以了。
[javascript] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
if (row.length>0) {
$.messager.confirm('Confirm', '确定删除用户?', function(r) {
if (r) {
$.post('deleteuser', {
id : string
}, function(result) {
$('#dg').datagrid('reload');
});
}
});
}
而编辑用户的话只能根据具体的用户进行编辑,所以多选的情况直接alert,不能选择多条数据即可。
完整的js中delete函数的代码:
[javascript] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/9e12f1d3e499fc949c886e7c9e0484f9)
function destroyUser() {
// 返回被选中的行 然后集成的其实是 对象数组
var row = $('#dg').datagrid('getSelections');
var i = 0;
var string = "";
for(i;i<row.length;i++){
string += row[i].id;
if(i < row.length-1){
string += ',';
}else{
break;
}
}
//alert(string);
//var row = $('#dg').datagrid('getSelected');
//alert(row.id);
if (row.length== 0) {
alert("请选择要删除的行");
}
if (row.length>0) {
$.messager.confirm('Confirm', '确定删除用户?', function(r) {
if (r) {
$.post('deleteuser', {
id : string
}, function(result) {
$('#dg').datagrid('reload');
});
}
});
}
}
$.post('deleteuser', { id : string 这里将整个string作为id参数的值传到deleteuser这个url,通过struts跳转后进行对应的数据删除,完成功能。
删改功能需要拿到具体选择行的id。
[html] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
<table id="dg" title="My Users" class="easyui-datagrid"
style="width: 700px; height: 500px" url="list_ej" toolbar="#toolbar"
rownumbers="true" fitColumns="true" >
<thead>
<tr>
<!-- 这种写法也是可以的
<th field="id" width="50">id</th>
<th field="name" width="50">name</th>
<th field="password" width="50">password</th> -->
<th field="ck" checkbox="true"></th>
<th data-options="field:'id',width:'200px'">id</th>
<th data-options="field:'name',width:'200px'">name</th>
<th data-options="field:'password',width:'200px',align:'right'">password</th>
</tr>
</thead>
</table>
整个datagrid,拿到选中行的id的话。
[javascript] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
var row = $('#dg').datagrid('getSelected');
var id = row.id;
为什么我会知道呢?这种方法给怎么学呢?——看API。
多选的也是这样拿,只不过返回的是一个数组而已。拿到id后的话,接下来交给struts去处理就可以了。
好了,接下来这么多数据,如果一个一个删除时很蛋疼的,那么我们就需要复选框这种删除了。加个复选框有多简单呢,很简单。
[html] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
<table id="dg" title="My Users" class="easyui-datagrid"
style="width: 700px; height: 500px" url="list_ej" toolbar="#toolbar"
rownumbers="true" fitColumns="true"
singleSelect ="false" checkbox="true" >
<thead>
<tr>
<!-- 这种写法也是可以的
<th field="id" width="50">id</th>
<th field="name" width="50">name</th>
<th field="password" width="50">password</th> -->
<th field="ck" checkbox="true"></th>
<th data-options="field:'id',width:'200px'">id</th>
<th data-options="field:'name',width:'200px'">name</th>
<th data-options="field:'password',width:'200px',align:'right'">password</th>
</tr>
</thead>
</table>
singleSelect ="false" checkbox="true" 单选为false,checkbox可使用。
接下来在js里面:
[javascript] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
// 返回被选中的行 然后集成的其实是 对象数组
var row = $('#dg').datagrid('getSelections');
var i = 0;
var string = "";
for(i;i<row.length;i++){
string += row[i].id;
if(i < row.length-1){
string += ',';
}else{
break;
}
}
转成字符数组,最后传到action那边去,直接用:
[java] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
st.executeUpdate("delete from user where userid in ("+id+")");
删除之后,DataGrid进行刷新就可以了。
[javascript] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
if (row.length>0) {
$.messager.confirm('Confirm', '确定删除用户?', function(r) {
if (r) {
$.post('deleteuser', {
id : string
}, function(result) {
$('#dg').datagrid('reload');
});
}
});
}
而编辑用户的话只能根据具体的用户进行编辑,所以多选的情况直接alert,不能选择多条数据即可。
完整的js中delete函数的代码:
[javascript] view
plaincopy
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/a7c8e286f463007e2a900848b93dd72c.png)
function destroyUser() {
// 返回被选中的行 然后集成的其实是 对象数组
var row = $('#dg').datagrid('getSelections');
var i = 0;
var string = "";
for(i;i<row.length;i++){
string += row[i].id;
if(i < row.length-1){
string += ',';
}else{
break;
}
}
//alert(string);
//var row = $('#dg').datagrid('getSelected');
//alert(row.id);
if (row.length== 0) {
alert("请选择要删除的行");
}
if (row.length>0) {
$.messager.confirm('Confirm', '确定删除用户?', function(r) {
if (r) {
$.post('deleteuser', {
id : string
}, function(result) {
$('#dg').datagrid('reload');
});
}
});
}
}
$.post('deleteuser', { id : string 这里将整个string作为id参数的值传到deleteuser这个url,通过struts跳转后进行对应的数据删除,完成功能。
相关文章推荐
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(四)——基础环境搭建
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(五)——jsp,json,EasyUI的结合
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(三)——ajax,struts2使用json格式的交互
- Jquery+EasyUI
- 解决使用jquery上传图片并实现回显失败,提示ReferenceError: $ is not defined
- JS/JQuery判断是否移动设备+JS/JQuery判断浏览器类型
- Ajax-jQuery实现
- Jquery限制文本框输入
- 基于jQuery实现多层次的手风琴效果附源码
- jquery循环table中tbody的tr中input:text,将值进行拼接传入控制器并返回状态和描述
- jquery选择class包含多个的元素
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——ajax与struts2的交互
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互
- 使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作
- jquery live方法替代
- jQuery实现响应鼠标滚动的动感菜单效果
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(八)——Struts与EasyUI使用JSON进行交互
- jQuery Part 2
- jquery $.proxy使用
- jQuery实现响应鼠标滚动的动感菜单效果