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



Struts2和jQuery EasyUI实现简单CRUD系统（三）——复选框进行多选删除操作，继上篇的jsp,json,EasyUI的结合顺利将数据库数据转换成json格式后再EasyUI完成展示（Retrieve）之后，接下来的实现增删改功能也很顺手了。

 

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

 

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

 

  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 plaincopy在CODE上查看代码片派生到我的代码片

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

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

 

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

 

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

 

  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 plaincopy在CODE上查看代码片派生到我的代码片

  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那边去，直接用：

 

 

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

 

 

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

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片

  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 plaincopy在CODE上查看代码片派生到我的代码片

  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跳转后进行对应的数据删除，完成功能。