给Jquery easyui 的datagrid 每行增长操做连接(转)

时间 2019-11-09

标签 jquery easyui datagrid 增长连接栏目 JQuery 繁體版

原文原文链接

http://www.thinkphp.cn/code/207.htmljavascript

经过formatter方法给Jquery easyui 的datagrid 每行增长操做连接
咱们都知道Jquery的EasyUI的datagrid能够添加而且自定义Toolbar，这样咱们选择一行而后选择toolbar的相应按钮就能够对这行的数据进行操做。但实际项目里咱们可能须要在每行后面加一些操做连接，最多见的就是好比“修改”、“删除”、“查看”之类。以下图：

这是个很实用的功能，可是搜索了一下，好像也没见到谁写过，我就找了Easyui的document，随便写一下，抛砖引玉。

思路：通常来说，增长操做连接就是要用URL+ID的方式把页面跳转到新页面，因此须要在正常输出的一行后面加一列操做列用来显示操做连接。Easyui的Datagrid没有直接添加link的属性，因此我须要格式化一下这一“操做”列的输出。

解决方法：

第一步，我须要在datagrid行里添加一列，field指向id（field:'id'），而后对这列进行格式化处理（formater：格式化函数），以下：php

<th data-options="field:'id',width:180,formatter: rowformater">操做</th>

复制代码

第二步：
根据documentation的描述，formatter的格式化函数有3个parameters，分别是：
value: the field value，也就是field:'id'。
rowData: the row record data。就是这一行的Json数据，包括你已经选择在Datagrid上显示的内容，和没显示的内容。由于个人Json数据里包括了Id这一内容，因此我能够直接调用。若是你做为数据源的Json里没有Id属性，须要修改一下Json的输出。个人每行Json输出是相似{"id":"1","name":"\u7ecf\u6d4e\u53d1\u5c55","parentId":"0"}的结构
rowIndex: the row index.当前行的Index。

因此我写rowformater这个函数的时候，也须要用function rowformater(value,row,index)的方法。为了看起来清晰明白，我只在函数里写了一句话（放在<head>标签里），事实上项目上须要作一些基本的判断。：html

<script type="text/javascript">
function rowformater(value,row,index)
{
return "<a href='"+row.id+"' target='_blank'>操做</a>";
}
</script>

复制代码

OK，应该能跑起来了。跑出的结果就是上面的截图样式。java

注意：本身作了之后发现，若是UI中一行的多个列须要用到数据源中的同一列，那么可能会有问题，须要把这UI中的多个列并到同一列中，共同使用数据源中的这同一列。thinkphp