給Jquery easyui 的datagrid 每行增加操作鏈接(轉)


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

通過formatter方法給Jquery easyui 的datagrid 每行增加操作鏈接
我們都知道Jquery的EasyUI的datagrid可以添加並且自定義Toolbar,這樣我們選擇一行然后選擇toolbar的相應按鈕就可以對這行的數據進行操作。但實際項目里我們可能需要在每行后面加一些操作鏈接,最常見的就是比如“修改”、“刪除”、“查看”之類。如下圖:


這是個很實用的功能,但是搜索了一下,好像也沒見到誰寫過,我就找了Easyui的document,隨便寫一下,拋磚引玉。

思路:一般來講,增加操作鏈接就是要用URL+ID的方式把頁面跳轉到新頁面,所以需要在正常輸出的一行后面加一列操作列用來顯示操作鏈接。Easyui的Datagrid沒有直接添加link的屬性,所以我需要格式化一下這一“操作”列的輸出。

解決方法:

第一步,我需要 在datagrid行里添加一列,field指向id(field:'id'),然后對這列進行格式化處理(formater:格式化函數),如下:

  1. <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>標簽里),事實上項目上需要做一些基本的判斷。:

  1.  <script type="text/javascript">
  2.  function rowformater(value,row,index)
  3.  {
  4.  return "<a href='"+row.id+"' target='_blank'>操作</a>";
  5.  }
  6.  </script>
復制代碼

OK,應該能跑起來了。跑出的結果就是上面的截圖樣式。

 

注意:自己做了以后發現,如果UI中一行的多個列需要用到數據源中的同一列,那么可能會有問題,需要把這UI中的多個列並到同一列中,共同使用數據源中的這同一列。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM