最近手邊有個web項目需要用到第三方控制(EasyUi),用第三方控製做出來的效果畢竟比原生態的要稍微好看那麼一點,該項目中有個需求,需要在數據列表中直接編輯資料保存,行話叫做行內編輯。本文主要介紹了詳解EasyUi控制項中的Datagrid的相關資料,需要的朋友可以參考下,希望能幫助大家。
在講行內編輯之前,我們需要先了解如何使用EasyUi建立一個DataGrid,當然方式有很多(1.easyui.js,或是直接html程式碼加上easyui的Style),我採用的是JS的方式:
一、使用Js建立DataGrid
上面是效果圖,
Html程式碼如下:在頁面定義一個table
1 2 3 4 |
|
Js程式碼如下:
有幾個我自己認為比較重要的屬性在這個標記下
url:這裡是datagrid取得資料集的位址,就是你的Action,需要注意的是,你的Action需要回傳Json格式的數據。
pagination:設定datagrid是否分頁顯示
queryParams:你的查詢條件參數
formatter:格式化,在日期列用到了,EasyUi的datagrid顯示日期如果不格式話,日期會亂顯示
這些屬性在EasyUi的官網都有詳細介紹,我就不深入解釋了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
|
二、今天的重點,DataGrid行內編輯
如上效果圖,我們在DataGrid行內直接變資料
Js程式碼如下:
如何實作行內編輯,需要在你所編輯的儲存格中加入editor屬性,editor屬性有個type(他支援很多控制類型,可以到官網查看)就是編輯的控制項類型。
比如說,上圖中“入庫狀態”,首先我們定義資料來源,json格式是重點。
1 |
|
然後需要格式轉換函數,不然你選擇的時候只會顯示value值,不是顯示文字值。程式碼如下:
1 2 3 4 5 6 7 8 9 10 |
|
如何把資料來源綁定到DataGrid列中,程式碼如下:
formatter:使用我們前面定義的轉換格式函數。
options:中的data就是我們定義的資料來源。
valueField:選取後的value值,不用詳細解釋了吧
textField:選取後顯示的值,文字值。
type:combobox,就是下拉選項的樣式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
|
三、重頭戲,也是我遇到的問題。
描述:我在datagrid中加入了下拉datagrid控件,當我第一次選中後,如果在去點擊datagrid行,選中的下拉datagrid控件的值會被刷掉,這個問題確實困擾我很久,不過後來處理了,那種感覺也是無比的爽啊!
如上效果圖,「所入倉庫」一列,下拉是datagrid,他的專業詞彙叫做「Combogird」。就是這個玩意第一次選取沒問題,第二次點擊會把第一次選取的數值刷掉。這也是一開始我對EasyUi的一個OnClickRow事件不了解。
先來上我之前的錯誤代碼:
1 2 3 4 5 6 |
|
大傢伙一定很苦惱這個row.Name是個什麼玩意? what?其實我一開始也不知道,因為這個是錯誤代碼,我是病急亂投醫,胡亂寫的,哈哈,也不是胡亂寫啦,因為我的下拉grid中有個字段是Name,然而我把他混淆了,此row是指你點選的datagrid的row,而不是你資料來源的row。我也是不斷調試Js看出來的端倪。我點擊datagrid的時候,程式碼跳入OnClickRow事件中,有句程式碼:「var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' })
;”,然後發現ed為null, Js拋異常,但是介面看不出來,只是把選取的資料刷掉了。找到問題後,還是不確定,程式碼修改完,再運行,正常顯示,也不刷掉我選取的值。
正確程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 |
|
一下是下拉式Grid的資料來源
##
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
easyui的datagrid元件頁面載入後發送兩次請求的解決辦法
以上是EasyUi控制項中的Datagrid詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!