過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;
}
}
}; ![CSS的僞類與僞元素的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)