给Jquery easyui 的datagrid 每行增加操作或者查看删除事件或者链接(转)

过formatter方法给Jquery easyui 的datagrid 每行增加操作链接

我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar，

这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。

但实际项目里我们可能需要在每行后面加一些操作链接，最常见的就是比如“修改”、“删除”、“查看”之类。如下图：

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

思路： 一般来讲，增加操作链接就是要用URL+ID的方式把页面跳转到新页面，所以需要在正常输出的一行后面加一列操作列用来显示操作链接。Easyui的Datagrid没有直接添加link的属性，所以我需要格式化一下这一“操作”列的输出。

解决方法：

第一步，我需要在datagrid行里添加一列，field指向id（field:'id'），

然后对这列进行格式化处理（formater：格式化函数），如下：

<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>标签里），事实上项目上需要做一些基本的判断。：

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

复制代码

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

注意：自己做了以后发现，如果UI中一行的多个列需要用到数据源中的同一列，那么可能会有问题，需要把这UI中的多个列并到同一列中，共同使用数据源中的这同一列。

var datagrid = $("#dg");

var dgOptions = {
        rownumbers:true,
       fit:true,
       border:false,
        rownumbers:true,
       url:'listData',
       method:'post',
       toolbar:'#tb',
       pageSize: 20,
       pagination:true,
       multiSort:true,
      sortName: getInitParam().sort,
       sortOrder: getInitParam().order,
        queryParams: getInitParam(),

        columns: [[
               {field:'id', checkbox:true}
                   ,{field:'clerka_num', title: '职员编号', width:120, sortable: true }
                   ,{field:'clerka_worknum', title: '职员工号', width:120, sortable: true }
                   ,{field:'clearka_name', title: '职员姓名', width:120, sortable: true }
                ,{field:'department_name', title: '所属部门', width:120, sortable: true }
                 ,{field:'station', title: '所属岗位', width:120, sortable: true }
                   ,{field:'phone', title: '联系方式', width:120, sortable: true }
                 ,{field:'clerka_state', title: '职员状态', width:120, sortable: true }
                   ,{field:'account_state', title: '账号状态', width:120, sortable: true }
                , {
                field: "id1", title: '操作', width: 120, sortable: true, formatter: function (value, rowData, rowIndex) {
                    return "<a onClick='detail("+rowData.id+")' style='color:blue;'>查看</a>";
                }
            }

              ]],
              loadFilter: function(data) {
                 if(data.result && data.result == 'fail') {  //失败时，错误消息提示
                    showWarnMsg(data.msg);
                    return { };
                 }else {
                    return data;
                 }
              }           
   };

给Jquery easyui 的datagrid 每行增加操作或者查看删除事件或者链接(转)

猜你喜欢