easyui —— footer

前言：

使用easyui的datagrid，在最后一行加上“總計”字樣，效果如下：

過程：

...
<table id="dg" title="xx管理" fitColumns="true" pagination="true" rownumbers="true" nowrap="true"
        fit="true" toolbar="#tb" data-options="pageSize:25,pageList:[10,15,25,50,100],singleSelect:true,showFooter: true">
    <thead>
    <tr id="options">
        <th data-options="field:'id',width:50,align:'center'">編號</th>
        <th data-options="field:'name',width:150,align:'center'">名稱</th>
        <th data-options="field:'remark',width:100,align:'center'">備注</th>
        <th data-options="field:'addr',width:130,align:'center'">地區</th>
        <th data-options="field:'percount',width:50,align:'center',sortable:true">人數</th>
        <th data-options="field:'chatCount',width:50,align:'center'">聊天條數</th>
        <th data-options="field:'createtime',width:100,align:'center',formatter:formatReg">創建時間</th>
        <th field="operate" width="120" align="center" data-options="formatter:formatOperate" >操作</th>
    </tr>
    </thead>
</table>
...

在data-option中增加showFooter屬性為true，並在后台准備數據的時候增加footer屬性，並且其中字段名跟數據庫中的保持一致：

...
 return this.json({total: result.count, rows: result.data,footer:[{"name":"總計","percount":personTotal,"chatCount":chatTotal}]});
...

但是，莫名其妙的出現了下面的情景：

就是在最后一欄“操作”中出現了不該出現的三個按鈕，解決方法：在后台組織返回數據的時候，增加一個屬性，比如：

...
 return this.json({total: result.count, rows: result.data,footer:[{"isFooter":true,"name":"總計","percount":personTotal,"chatCount":chatTotal}]});
...

然后在前台代碼上增加一個判斷：

...
 function formatOperate(value, row, index){
        var update = '<a  onclick="openUpdateDialog('+index+')" href="javascript:void(0)" title="修改" class="linkbutton" data-options="plain:true,iconCls:\'icon-page_edit\'"></a>';
        var delStr='<a  onclick="del('+row.id+')" href="javascript:void(0)" title="刪除" class="linkbutton" data-options="plain:true,iconCls:\'icon-delete\'"></a>';
        var checkUsers ='<a onclick="checkUsers('+index+')" href="javascript:void(0)" title="查看圈子成員" class="linkbutton" data-options="plain:true,iconCls:\'icon-group\'"></a>';
        if(!row.isFooter){
            return checkUsers+ "&nbsp;"+update+ "&nbsp;"+delStr;
        }else{
            return "";
        }
    }
...

后言：

這樣便完美的解決了footer中出現的問題。