DataGrid新增按鈕

2022-05-05 09:30:09 字數 2410 閱讀 6993

眾所周知easyui的datagrid提供了一種非常方便的資料展示方式，但是**內並沒有提供可以進行動作觸發的功能，比如在**的某行內新增乙個按鈕對該行資料進行相應的操作。這裡介紹一種在單元格中新增按鈕的方法。

先看datagrid表**：

<


table 


id="testgrid"


title


="考試列表"


class


="easyui-datagrid"


style


="width:100%;height:100%"


url="/gettestinfo"


pagination


="false"


rownumbers


="true"


fitcolumns


="true"


singleselect


="true"


>


<


thead


>


<


tr>


<


th field


="testname"


align


="center"


width


="30"


>考試名


th>


<


th field


="testtime"


align


="center"


width


="40"


>考試時間


th>


<


th field


="analyse"


width


="30"


align


="center"


formatter


="analysedata"


>分析


th>


<


th field


="edit"


width


="30"


align


="center"


formatter


="editdata"


>修改


th>


<


th field


="delete"


width


="30"


align


="center"


formatter


="deletedata"


>刪除


th>


tr>


thead


>


table


>
th標籤跟其他datagrid**類似，這裡的field可以根據自己的需要隨意寫，我這裡是analyse、edit和delete。重點在與後邊的formatter=「analysedata」這一塊，這裡的analysedata是乙個js函式，定義如下

function


analysedata(val,row,index)
注意到這裡傳入了三個引數：val、row和index，這三個引數有什麼用呢，他們分別代表當前單元格的值（val），當前行物件（row）,當前行的索引（index），這裡最有價值的就是這個index，因為有了這個index我們就可以輕易取得該行的所有資料了。這裡以deletedata為例：

function


deletedata(val,row,index)
在傳入index之後，我們就可以在removedata中獲取該index所對應的一條資料並刪除

1


function


removedata(index),function


(result));


17 } else


);22


}23 },'json');24}


25});26}


27 }
注意到在第9行**中：

cname:row.testname,tdate:row.testtime
通過row.testname和row.testtime獲取到datagrid**中相應的testname和testtime的值，而這個row物件便是由第2、3行**通過index值得到。

$('#testgrid').datagrid('selectrow',index);


var row = $('#testgrid').datagrid('getselected');
這樣通過removedata方法，達到了刪除某行資料的目的，也實現了在datagrid中插入自定義按鈕功能。最終效果如下：

 
更多裡面新增 按鈕
取消按鈕 code if context.get active model purchase.origin and context.get active ids self.action done order one cr,uid,context active ids context context ...


幾何畫板如何新增按鈕
作為全國人教版指定使用的教育軟體，幾何畫板中有很多功能很多使用者也不了解，其中隱藏 顯示操作類按鈕就是一種。使用幾何畫板製作課件時，使用操作類按鈕有很大的幫助。下面以製作兩個線段的隱藏 顯示按鈕為例進行詳細講解。具體步驟如下 1.繪製線段和操作按鈕。選擇 線段工具 繪製出兩條線段ab和線段cd。選中...


GUI 新增按鈕和事件ActionListener
flowlayout流式布局 borderlayout邊界布局 gridlayout網格布局 cardlayout卡片布局 gridbaglayout網格包布局 actionlistener用於接收動作事件的偵聽器介面。有興趣處理動作事件的類實現此介面，並使用該元件的addactionlistene...