ExtJS4.2學習(七)EditorGrid可編輯表格

上節講到通過背景資料進行分頁，分頁工具條還可以放置在頂端，或者上下都有而不影響資料，因為它們都共用一個store

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<code>//建立表格</code>

<code>var</code> <code>grid = </code><code>new</code> <code>Ext.grid.GridPanel({</code>

<code>        </code><code>renderTo:</code><code>'grid'</code><code>, </code><code>//渲染位置</code>

<code>        </code><code>autoHeight:</code><code>true</code><code>,</code>

<code>        </code><code>store:store,</code>

<code>        </code><code>width:550,</code>

<code>        </code><code>columns:columns, </code><code>//顯示列</code>

<code>        </code><code>bbar:</code><code>new</code> <code>Ext.PagingToolbar({</code>

<code>            </code><code>pageSize:25, </code><code>//每頁顯示幾條資料</code>

<code>            </code><code>store:store, </code>

<code>            </code><code>displayInfo:</code><code>true</code><code>, </code><code>//是否顯示資料資訊</code>

<code>            </code><code>displayMsg:</code><code>'顯示第 {0} 條到 {1} 條記錄，一共  {2} 條'</code><code>, </code><code>//隻要當displayInfo為true時才有效，用來顯示有資料時的提示資訊，{0},{1},{2}會自動被替換成對應的資料</code>

<code>            </code><code>emptyMsg: </code><code>"沒有記錄"</code> <code>//沒有資料時顯示資訊</code>

<code>        </code><code>}),</code>

<code>        </code><code>tbar:</code><code>new</code> <code>Ext.PagingToolbar({</code>

<code>        </code><code>})</code>

<code>    </code><code>});</code>

除了背景傳遞資料分頁，預設的排序外，extjs還可以自定義排序，通過傳遞資料來進行背景排序。

如果需要對所有資料排序，則需要把排序資訊送出到背景，由背景将排序資訊組裝到SQL裡，然後再由背景将處理好的資料傳回給前台。這就是前台與背景互動的過程，既然要送出到服務端，便需要将Ext.data.Store的remoteSort屬性設定為true，這個屬性是指是否允許遠端排序，預設值為false。下次排序時就會有變化，不會立即顯示出排序結果，而是将背景送出了2個參數，分别是sort和dir。sort表示需要排序的字段，dir表示升序或降序。背景根據這些參數進行處理。

<code>req.getParameter(</code><code>"sort"</code><code>); </code><code>//排序字段</code>

<code>req.getParameter(</code><code>"dir"</code><code>); </code><code>//升序還是降序</code>

以上知識是對上節的補充，現在開始将這節所學：可編輯表格--EditorGrid

大家使用過Mircrosoft Excel，它的功能強大，使用者可随意添加或删除表格中的行和列，而且隻儲存一此即可。EditorGrid也提供這些功能，可以直接在表格裡執行添加、删除、修改和查找等操作，然後一次性儲存。此外，還可以動态修改某個單元格，這些單元格我們先暫時不能為空，儲存時會進行檢測，為空就無法儲存，驗證資訊會給予提示。

以上實作的效果就是本節所要做的效果，現在看代碼：

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

<code>Ext.onReady(</code><code>function</code><code>(){</code>

<code>    </code><code>//定義列</code>

<code>    </code><code>var</code> <code>columns = [</code>

<code>        </code><code>{header:</code><code>'編号'</code><code>,dataIndex:</code><code>'id'</code><code>,width:50,</code>

<code>            </code><code>editor:{</code>

<code>                </code><code>allowBlank:</code><code>true</code>

<code>            </code><code>}}, </code><code>//sortable:true 可設定是否為該列進行排序</code>

<code>        </code><code>{header:</code><code>'名稱'</code><code>,dataIndex:</code><code>'name'</code><code>,width:80,</code>

<code>                </code><code>editor:{</code>

<code>                    </code><code>allowBlank:</code><code>true</code>

<code>                </code><code>}},</code>

<code>        </code><code>{header:</code><code>'描述'</code><code>,dataIndex:</code><code>'descn'</code><code>,width:112,</code>

<code>                    </code><code>editor:{</code>

<code>                        </code><code>allowBlank:</code><code>true</code>

<code>                    </code><code>}}</code>

<code>      </code><code>];</code>

<code>    </code><code>//定義資料</code>

<code>    </code><code>var</code> <code>data =[</code>

<code>        </code><code>[</code><code>'1'</code><code>,</code><code>'小王'</code><code>,</code><code>'描述01'</code><code>],</code>

<code>        </code><code>[</code><code>'2'</code><code>,</code><code>'李四'</code><code>,</code><code>'描述02'</code><code>],</code>

<code>        </code><code>[</code><code>'3'</code><code>,</code><code>'張三'</code><code>,</code><code>'描述03'</code><code>],</code>

<code>        </code><code>[</code><code>'4'</code><code>,</code><code>'束洋洋'</code><code>,</code><code>'思考者日記網'</code><code>],</code>

<code>        </code><code>[</code><code>'5'</code><code>,</code><code>'高飛'</code><code>,</code><code>'描述05'</code><code>]</code>

<code>    </code><code>];</code>

<code>    </code><code>//轉換原始資料為EXT可以顯示的資料</code>

<code>    </code><code>var</code> <code>store = </code><code>new</code> <code>Ext.data.ArrayStore({</code>

<code>        </code><code>data:data,</code>

<code>        </code><code>fields:[</code>

<code>           </code><code>{name:</code><code>'id'</code><code>}, </code><code>//mapping:0 這樣的可以指定列顯示的位置，0代表第1列，可以随意設定列顯示的位置</code>

<code>           </code><code>{name:</code><code>'name'</code><code>},</code>

<code>           </code><code>{name:</code><code>'descn'</code><code>}</code>

<code>        </code><code>]</code>

<code>    </code><code>//加載資料</code>

<code>    </code><code>store.load();</code>

<code>           </code> 

<code>    </code><code>//建立表格</code>

<code>    </code><code>var</code> <code>grid = </code><code>new</code> <code>Ext.grid.GridPanel({</code>

<code>        </code><code>stripeRows:</code><code>true</code><code>, </code><code>//斑馬線效果</code>

<code>        </code><code>selType: </code><code>'cellmodel'</code><code>,</code>

<code>        </code><code>plugins:[</code>

<code>                 </code><code>Ext.create(</code><code>'Ext.grid.plugin.CellEditing'</code><code>,{</code>

<code>                     </code><code>clicksToEdit:1 </code><code>//設定單擊單元格編輯</code>

<code>                 </code><code>})</code>

<code>        </code><code>],</code>

<code>        </code><code>tbar:[</code><code>'-'</code><code>,{</code>

<code>            </code><code>text:</code><code>'添加一行'</code><code>,</code>

<code>            </code><code>handler:</code><code>function</code><code>(){</code>

<code>                </code><code>var</code> <code>p ={</code>

<code>                        </code><code>id:</code><code>''</code><code>,</code>

<code>                        </code><code>name:</code><code>''</code><code>,</code>

<code>                        </code><code>descn:</code><code>''</code>

<code>                        </code><code>};</code>

<code>                    </code><code>store.insert(0,p);</code>

<code>                </code><code>}</code>

<code>            </code><code>},</code><code>'-'</code><code>,{</code>

<code>                </code><code>text:</code><code>'删除一行'</code><code>,</code>

<code>                </code><code>handler:</code><code>function</code><code>(){</code>

<code>                    </code><code>Ext.Msg.confirm(</code><code>'系統提示'</code><code>,</code><code>'确定要删除？'</code><code>,</code><code>function</code><code>(btn){</code>

<code>                        </code><code>if</code><code>(btn==</code><code>'yes'</code><code>){</code>

<code>                            </code><code>var</code> <code>sm = grid.getSelectionModel();</code>

<code>                            </code><code>var</code> <code>record = sm.getSelection()[0];</code>

<code>                            </code><code>store.remove(record);</code>

<code>                        </code><code>}</code>

<code>                    </code><code>});</code>

<code>        </code><code>},</code><code>'-'</code><code>,{</code>

<code>            </code><code>text:</code><code>'儲存'</code><code>,</code>

<code>                </code><code>var</code> <code>m = store.getModifiedRecords().slice(0);</code>

<code>                </code><code>var</code> <code>jsonArray = [];</code>

<code>                </code><code>Ext.each(m,</code><code>function</code><code>(item){</code>

<code>                    </code><code>jsonArray.push(item.data);</code>

<code>                </code><code>});</code>

<code>                </code><code>Ext.Ajax.request({</code>

<code>                    </code><code>method:</code><code>'POST'</code><code>,</code>

<code>                    </code><code>url:</code><code>'/ExtJs4.2Pro/EditGridServlet'</code><code>,</code>

<code>                    </code><code>success:</code><code>function</code><code>(response){</code>

<code>                        </code><code>Ext.Msg.alert(</code><code>'系統提示'</code><code>,response.responseText,</code><code>function</code><code>(){</code>

<code>                            </code><code>store.load();</code>

<code>                        </code><code>});</code>

<code>                    </code><code>},</code>

<code>                    </code><code>failure:</code><code>function</code><code>(){</code>

<code>                        </code><code>Ext.Msg.alert(</code><code>"錯誤"</code><code>,</code><code>"與背景聯系的時候出了問題。"</code><code>);</code>

<code>                    </code><code>params:</code><code>'data='</code><code>+encodeURIComponent(Ext.encode(jsonArray))</code>

<code>            </code><code>}</code>

<code>        </code><code>}]</code>

<code>});</code>

這裡我們啟用了CellEditing插件，其他的部分并沒有什麼變化。可是看到的結果是，現在可以用TextField的方式随意修改單元格。記得不能讓單元格為空，否則無法修改。

預設情況下，需要輕按兩下單元格才能激活編輯器，進而進行修改。不過，也可以給表格配置上clicksToEdit:1，這樣就可以通過單擊單元格激活編輯器，進而進行修改，上面的代碼中已經用到了。

TextField不允許輸入空值，因為在建立columns時對應的editor設定了allowBlank:false屬性。allowBlank:false表示不運作在TextField中輸入空值。

上面的示例中用到了數組對象的Slice(start,[end])方法，該方法傳回一個新數組，包含了原函數從start到end所指定的元素，但是不包括end元素，比如a.slice(0,3)。如果start為負，則将它作為length+start處理（此處length為數組的長度，比如a.slice(-3,4)，相當于a.slice(2,4)）。如果end為負，就将它作為length+end處理（次數length為數組的長度，比如a.slice(0,-1)。如果省略end，那麼slice方法将一直複制到原數組結尾，比如a.slice(1)）。如果省略end，那麼slice方法将一直複制到原數組結尾，比如a.slice(1)。如果end出現在start之前，不複制任何元素到新數組中，比如a.slice(4,3)。示例中store.getModifiedRecords().slice(0)的作用就是複制store.getModifiedRecords()，保證store.getModifiedRecords()中的原始資料不受影響。

下面看下背景對輸入的資料怎麼進行儲存的？

輸入一行資料

點選儲存後

背景代碼

<code>@SuppressWarnings</code><code>(</code><code>"serial"</code><code>)</code>

<code>public</code> <code>class</code> <code>EditGridServlet </code><code>extends</code> <code>HttpServlet {</code>

<code>    </code><code>&lt;a href=</code><code>"http://home.51cto.com/index.php?s=/space/5017954"</code> <code>target=</code><code>"_blank"</code><code>&gt;</code><code>@Override</code><code>&lt;/a&gt;</code>

<code>    </code><code>protected</code> <code>void</code> <code>doGet(HttpServletRequest req, HttpServletResponse resp)</code>

<code>            </code><code>throws</code> <code>ServletException, IOException {</code>

<code>        </code><code>doPost(req,resp);</code>

<code>    </code><code>}</code>

<code>      </code> 

<code>    </code><code>protected</code> <code>void</code> <code>doPost(HttpServletRequest req, HttpServletResponse resp)</code>

<code>        </code><code>req.setCharacterEncoding(</code><code>"UTF-8"</code><code>);</code>

<code>        </code><code>String data = req.getParameter(</code><code>"data"</code><code>);</code>

<code>        </code><code>System.out.println(data);</code>

<code>        </code><code>resp.getWriter().print(data);</code>

<code>}</code>

列印結果： 

本文轉自shyy8712872 51CTO部落格，原文連結：http://blog.51cto.com/shuyangyang/1333595，如需轉載請自行聯系原作者