【EasyUI DataGrid】批量操作

本篇博客主要實現的功能是，對EasyUI DataGrid中的信息進行批量的操作，所要實現的功能爲：批量對教師在線培訓項目的狀態改爲關閉。

一、EasyUI批量操作樣式

爲了能夠對EasyUI中的多行數據進行操作，需添加複選框。如下圖所示：

EasyUI中的DataGrid的複選框代碼如下所示：

 <table id="ddg1" class="easyui-datagrid"
               data-options="
               url:'/getonline_infomation',
               method:'get',
               border:false,
               singleSelect:false,
               checkbox:true,
               fit:true,
               collapsible:false,
               pagination:true,
               pageSize:25,
               pageList:[25,15,10]">
            <thead>
            <tr>
                <th data-options="field:'cb',align:'center',width:'110px',checkbox:'true'"></th>
                <th data-options="field:'train_no',align:'center',width:'100px'">培訓編號</th>
                <th data-options="field:'train_name',align:'center',width:'200px'">培訓名稱</th>
                <th data-options="field:'hours',align:'center',width:'90px'">學時</th>
                </tr>
            </thead>
        </table>

在上述代碼中主要的代碼爲以下3行

      singleSelect:false,
      checkbox:true,

      //上述兩行代碼爲了在每行數據前添加一個複選框，可以自定義對多行數據進行選中

      //如果不加這行代碼，則將無法自定義選取每一行

      <th data-options="field:'cb',align:'center',checkbox:'true'"></th>

      //上述一行代碼，是在DataGrid表頭中出現複選框，可以所有數據進行操作

      //上述代碼中的fileld：後的屬性名，不能和和所展示的屬性信息名一樣   隨意命名

二、前臺js代碼

1、按鈕樣式

<a href="#button" class="button icon log" onclick="someOnlineVerity()">批量審覈</a>

2、按鈕js函數

//<![CDATA[
        function someOnlineVerity() {
        var rows = $('#ddg1').datagrid('getSelections');
        if (rows.length>0) {
            //判斷項目中還有沒有教師
            $.messager.confirm('批量審覈', '選中的信息是否全部審覈?', function(r) {
                if (r) {
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        $.ajax({
                            url : "/someOnlineVerity",
                            type : "POST",
                            data : {"state" : row.state, "train_no":row.train_no},
                            dataType : 'json',
                            /*success: function (result) {
                                /!*var result = eval('(' + result + ')');
                                if (result.success=="true"){*!/
                                if (result="success"){
                                    alert(result.success);
                                    $.messager.alert('Success','批量審覈成功');
                                    $('#ddg1').datagrid('reload');
                                }
                            }*/
                        });
                        location.reload();
                    }

                }
            });
        }
    }
    //]]>

//CDATA詳解見如下鏈接：http://www.w3school.com.cn/xml/xml_cdata.asp
//主要防止將小於號解析成<

三、後臺Java代碼

//mapper類代碼
@Update("update online_train set state=#{state} where train_no=#{train_no}")
    public void someOnlineVerity(@Param( "state" ) String state, @Param( "train_no" ) String train_no);


//service類代碼
public void someOnlineVerity(String state,String train_no){
        trainManagementMapper.someOnlineVerity(state, train_no);
    }

//controller類代碼
@RequestMapping(value = "/someOnlineVerity", method = {RequestMethod.GET, RequestMethod.POST})
@ResponseBody
    public String someOnlineVerity(HttpServletRequest request,HttpSession session){

        String train_no=request.getParameter("train_no");
        String state="開放";
        trainManagementService.someOnlineVerity(state,train_no);
        return "success";
    }

四、效果展示