在实际的项目中,有时会有操作列这个需求,主要是修改和删除的功能。
类似于:
实现该效果的方法并不复杂。需要使用到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.判断得到的行数据是否为空,进行你想要的操作