2013年10月19日 星期六

ASP.NET MVC 使用 jQuery EasyUI DataGrid - Checkbox

其實在之前就曾經在「jQuery EasyUI DataGrid Checkbox 資料設定與取值」這一篇文章裡就已經討論過了,這一篇主要是觀察在有加入 Pagnation 以及 Sorting 之後對於 Chekbox 的處理,最後是參考 jQuery EasyUI DataGrid 的範例,動態改變選擇模式(單選或多選)。

 


要在已經做好的 jQuery EasyUI DataGrid 加入 Checkbox,其實只要在設定項目的 columns 裡加入以下的內容就可以:{ field: 'ck', checkbox: true }

image

執行結果

image

DataGrid 預設的 Checkbox 為多選,而且只要點選到某個 Row 時就會將 Checkbox 更改為勾選狀態,或是將某個 Checkbox 勾選起來,那個該 Row 就會更改為選狀態,

image

jquery_easyui_datagrid_20131019_01

DataGrid 的 checkOnSelct 與 selectOnCheck 這兩個 option 的預設狀態都為 true,

image

有的使用者並不想要點選某個 Row 時就讓前面的 Checkbox 變更為勾選狀態,而是希望明確的勾選 Checkbox 之後才讓 Row 變更為已選擇狀態,而我們可以更改這兩個 option 的設定來更改勾選或選擇的事件處理。

 

我們之前已經有在 DataGrid 加入分頁以及排序的功能,而 DataGrid 上的 Checkbox 勾選狀態並不會因為分頁或是重新排序而有所影響,也就是說既使在分頁、排序之後,各個 Row 的 Checkbox 勾選狀態仍然會保留,

jquery_easyui_datagrid_20131019_02

 

我們現在要在頁面上加上一個項目,讓我們可以動態調整 DataGrid 為多選或是單選,官方網站的範例是用 select 下拉選單的方式來做,而我們則是要改用 Bootstrap Switch 來取代,

image

Bootstrap switch

http://www.bootstrap-switch.org/

https://github.com/nostalgiaz/bootstrap-switch

將 bootstrap-switch.js, bootstrap-switch.min.js, bootstrap-switch.css 這三個檔案加入到專案裡,然後在檢視頁面上加入檔案的使用,

image

image

接著在 DataGrid 的上面加入以下的 Html Code,將 switch 在 on 的狀態時為表示「多選」,而 switch 在 off 的狀態實為表示「單選」,

image

接著再加入 Bootstrap-switch 的 Javascript 程式,

image

把 bootstrap switch 使用 setState 設定狀態為「true」時,會顯示 switch 的 on-label,所以這邊的設定是一開始進入網頁時將 switch 顯示為「多選」。

當我們在切換 bootstrap switch 狀態時可以使用「switch-change」方法來處理事件,我們在這邊就可以去改變 DataGrid 的多選或單選的設定,而切換多選或單選狀態 DataGrid 已有勾選的 Checkbox 給取消並且清除選擇狀態。

 

執行

image

jquery_easyui_datagrid_20131019_03

 

最後我們再加上清除勾選項目以及取得勾選項目值的 Button 與事件,

image

image

 

執行結果

image

jquery_easyui_datagrid_20131019_04

 

這次為各位說明的 jQuery EasyUI DataGrid 加上 Checkbox 的應用並且搭配 Bootstrap-Switch 來做多選與單選的切換,就到此結束,下次再來說說 jQuery EasyUI DataGrid 的其他應用。

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。