【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";
    }

四、效果展示