easyui-datagrid自定义操作列

版权声明：本文为博主原创文章，转载需注明来源 https://blog.csdn.net/fsxxzq521/article/details/78693867

在实际的项目中，有时会有操作列这个需求，主要是修改和删除的功能。
类似于：

实现该效果的方法并不复杂。需要使用到datagrid数据表格中的formatter方法。自定义列。
下面写个小例子。

html
 <table id="dg" class="easyui-datagrid" url="你的url" striped="true" rownumbers="false" pagination="true" singleSelect="true">
        <thead>
        <tr>
            <th field="role_id" width="15%">编号</th>
            <th data-options="field:'title',width:'15%'">名称</th>
            <th data-options="field:'modules_list',width:'30%'">列表</th>

            <th data-options="field:'_operate',width:'25%',formatter:formatOption">操作</th><!--该列使用formatter,调用方法formatOption -->
        </tr>
        </thead>
    </table>

js部分：在js代码中写一个函数formatOption 。函数名随便取

    function formatOption (value,row,index){//用到的一个参数是index代表第几行。
    return <a onclick="updata('+index+')">修改</a> <a onclick="deletdata('+index+')">删除</a>

    }
    //修改操作
 function updata(index){
  $('#dg').datagrid('selectRow', index);//按照选择的index来找到所选行
     var row = $('#dg').datagrid('getSelected');//获得选中行的数据
     //得到行数据之后，就可做我们的操作了，比如点击弹出框
     if(row){//在这里最好判断下
     $('#dlg').dialog('open').dialog('setTitle','修改信息');//打开弹出框
     //如果想去的行数据中的值。可以这样做，row.xxx


     }
 }
 //删除操作
 $('#dg').datagrid('selectRow', index);
 var row = $('#dg').datagrid('getSelected');
 //和修改操作相同
 }

这样我们的自定义操作列就完成了。
总结下：
1.在需要的自定义的列中加入formatter方法。加上一个自己写的函数。
2.定义该函数。在函数中写自己需要加的操作，比如‘删除’，修改；
3.调用修改，删除函数，传入index值，根据改index，让表格找到你点击的行
4.利用datagrid的selectRow方法，找到点击的行
5.使用datagrid的getSelect方法，得到所选行的行数据。
6.判断得到的行数据是否为空，进行你想要的操作