1. 程式人生 > >jquery-easyui自定義操作列實現方式

jquery-easyui自定義操作列實現方式

  jquery-easyui提供的datagrid元件中,沒有明確給出自定義操作列的實現方式,而我們實際的場景中,操作列是不可少的,因此有必要自定義這一列。
  jquery-easyui提供了data-options設定列屬性,可以通過formatter屬性,設定列的展示內容,因此可以從這裡入手,構建自定義的操作列,這裡仍然可以設定一個field,不必對應data中的column,只要我們使用了formatter,這一列會按照自定義的方式來展示。
例如,我們需要在操作列中定義一個修改,刪除的操作,結果如下:
在這裡插入圖片描述

要實現這個效果,需要在定義列的時候,做如下設定:

在這裡插入圖片描述

我們還需要在script標籤中定義這個格式化函式actions

function actions(val,row,index){
   return "<a href='javascript:void(0);' class='easyui-linkbutton l-btn l-btn-small' style='width:60px' onclick='edit(\""+row.id+"\")'>修改</a>&nbsp;&nbsp;"+
         "<a href='javascript:void(0);' class='easyui-linkbutton l-btn l-btn-small' style='width:60px'  onclick='disableOne(\""
+row.id+"\")'>禁用</a>"; }
  • formatter函式預設有三個引數,row對應的是這條記錄,我們可以通過row.id來獲取該記錄的id,index是對應在這個datagrid中的索引號。
  • 操作列中涉及到的點選操作的函式,也是需要定義出來,如這裡的function edit(id){},function disableOne(id){},就不再詳述了。
  • 這種實現方式是直接在html裡面通過data-options屬性指定了formatter,也可以通過js的方式在datagrid的columns中定義這些列,同樣的可以指定formatter。