easyui datagrid中自定义按钮列

在多数时候我们要在表格的某一列（通常是最后一列）作为操作列。

前台datagrid代码如下

<table id="dg" title="三农快讯" class="easyui-datagrid"
        style="width:auto;height:100%" toolbar="#toolbar" rownumbers="true"
        fitColumns="true" singleSelect="false" selectOnCheck="true"
        checkOnSelect="true" pagination="true">
        <thead>
            <tr>
                <th field="title" width="50">标题</th>
                <th width="50" data-options="field:'_operate',formatter:formatOper">操作</th>
            </tr>
        </thead>
    </table>

上述的代码效果如下图所示，具体的小细节忽略

easyui中的datagrid的列属性的官方文档如下：

对应文档下的js：

function formatOper(val, row, index) {
            return '<a href="javascript:void(0)" onclick="showUser(' + index
                    + ')">查看</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" onclick="editTeacher(' + index
                    + ')">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" onclick="dele()">删除</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
        }

在easyui属性列data-options后面的formatter后面的函数名一致，上述示例中的formatOper其实就是一个js函数

下面以删除功能为例，删除功能的js如下：

function dele() {
            var rows = $('#dg').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({
                                type : 'POST',
                                url : 'kxdel.action',
                                async : false,
                                data : {
                                    id : row.kxid
                                },dataType : 'json',
                            });
                        }
                        location.reload();
                    }
                });
            }
        }

效果如下图所示：