使用Struts2和jQuery EasyUI实现简单CRUD系统（六）——复选框进行多选删除操作

增的功能还是一样，只不过将原本自己写的form用ejui提供form代替而已。

删改功能需要拿到具体选择行的id。

[html]  view plain copy

1. <table id="dg" title="My Users" class="easyui-datagrid"  
2.         style="width: 700px; height: 500px" url="list_ej" toolbar="#toolbar"  
3.         rownumbers="true" fitColumns="true"  >  
4.         <thead>  
5.             <tr>  
6.                 <!--     这种写法也是可以的         
7.                 <th field="id" width="50">id</th>  
8.                 <th field="name" width="50">name</th>  
9.                 <th field="password" width="50">password</th> -->  
10.                 <th field="ck" checkbox="true"></th>  
11.                 <th data-options="field:'id',width:'200px'">id</th>  
12.                 <th data-options="field:'name',width:'200px'">name</th>  
13.                 <th data-options="field:'password',width:'200px',align:'right'">password</th>  
14.             </tr>  
15.         </thead>  
16.     </table>  

整个datagrid，拿到选中行的id的话。

[javascript]  view plain copy

1. var row = $('#dg').datagrid('getSelected');  
2. var id = row.id;  

为什么我会知道呢？这种方法给怎么学呢？——看API。

多选的也是这样拿，只不过返回的是一个数组而已。拿到id后的话，接下来交给struts去处理就可以了。

好了，接下来这么多数据，如果一个一个删除时很蛋疼的，那么我们就需要复选框这种删除了。加个复选框有多简单呢，很简单。

[html]  view plain copy

1. <table id="dg" title="My Users" class="easyui-datagrid"  
2.         style="width: 700px; height: 500px" url="list_ej" toolbar="#toolbar"  
3.         rownumbers="true" fitColumns="true"    
4.         singleSelect ="false" checkbox="true" >  
5.         <thead>  
6.             <tr>  
7.                 <!--     这种写法也是可以的         
8.                 <th field="id" width="50">id</th>  
9.                 <th field="name" width="50">name</th>  
10.                 <th field="password" width="50">password</th> -->  
11.                 <th field="ck" checkbox="true"></th>  
12.                 <th data-options="field:'id',width:'200px'">id</th>  
13.                 <th data-options="field:'name',width:'200px'">name</th>  
14.                 <th data-options="field:'password',width:'200px',align:'right'">password</th>  
15.             </tr>  
16.         </thead>  
17.     </table>  

singleSelect ="false" checkbox="true" 单选为false，checkbox可使用。

接下来在js里面：

[javascript]  view plain copy

1.         // 返回被选中的行 然后集成的其实是 对象数组  
2.         var row = $('#dg').datagrid('getSelections');  
3.         var i = 0;  
4.         var string = "";  
5.         for(i;i<row.length;i++){  
6.             string += row[i].id;  
7.             if(i < row.length-1){  
8.                 string += ',';  
9.             }else{  
10.                 break;  
11.             }  
12.         }  

转成字符数组，最后传到action那边去，直接用：

[java]  view plain copy

1. st.executeUpdate("delete from user where userid in ("+id+")");  

删除之后，DataGrid进行刷新就可以了。

[javascript]  view plain copy

1. if (row.length>0) {  
2.     $.messager.confirm('Confirm', '确定删除用户?', function(r) {  
3.         if (r) {  
4.             $.post('deleteuser', {  
5.                 id : string  
6.             }, function(result) {  
7.         $('#dg').datagrid('reload');  
8.             });  
9.         }  
10.     });  
11. }  

而编辑用户的话只能根据具体的用户进行编辑，所以多选的情况直接alert，不能选择多条数据即可。

完整的js中delete函数的代码：

[javascript]  view plain copy

1. function destroyUser() {  
2.         // 返回被选中的行 然后集成的其实是 对象数组  
3.         var row = $('#dg').datagrid('getSelections');  
4.         var i = 0;  
5.         var string = "";  
6.         for(i;i<row.length;i++){  
7.             string += row[i].id;  
8.             if(i < row.length-1){  
9.                 string += ',';  
10.             }else{  
11.                 break;  
12.             }  
13.         }  
14.         //alert(string);  
15.         //var row = $('#dg').datagrid('getSelected');  
16.         //alert(row.id);  
17.         if (row.length== 0) {  
18.             alert("请选择要删除的行");  
19.         }  
20.         if (row.length>0) {  
21.             $.messager.confirm('Confirm', '确定删除用户?', function(r) {  
22.                 if (r) {  
23.                     $.post('deleteuser', {  
24.                         id : string  
25.                     }, function(result) {  
26.                 $('#dg').datagrid('reload');  
27.                     });  
28.                 }  
29.             });  
30.         }  
31.     }  

$.post('deleteuser', { id : string 这里将整个string作为id参数的值传到deleteuser这个url，通过struts跳转后进行对应的数据删除，完成功能。