WebGridTextBox與WebCheckBox的用法接近,都是為了讓User可以在WebGridView中不必一筆一筆去切換到編輯模式就可以直接更改欄位內容,也就是可以在瀏覽狀態下直接修改資料,並一次性存回Server端。兩者不同的是,WebGridTextBox是以TextBox的方式來呈現,WebCheckBox則只能用在Bit型態與CheckBox呈現方式的欄位元元件。我們就以W010來說明WebGridTextBox的應用實例,如下:
Step1>打開W010,在WebGridView右上角的快捷鈕,執行「Edit Columns」,為了將Remark欄位改用WebGridTextBox,因此我們將「Remark」欄位轉為TemplateField。如下圖:
圖5-5-1 欄位轉為TemplateField
Step2>在此TemplateField欄位中,將ItemTemplate上的元件換成WebGridTextBox元件(從ToolsBox中拖入WebGridTextBox元件)。在EditTemplate則可以不必更換。
圖5-5-2 換成WebGridTextBox元件
Step3>因為剛剛貼入的WebGridTextBox並沒有綁定到任何欄位上的,我們對此WebGridTextBox作資料綁定的動作,我們將其綁定到「Remark」欄位上。
圖5-5-3 綁定Remark欄位
Step4>將WebGridTextBox的『DataField』指向【Remark】欄位,並將『MultiEditPostBack』設為【True】,代表要多筆編輯批次存回Server。
圖5-5-4 設置WebGridTextBox屬性
Step5>設定WebGridView的『AutoPostBackWebGridTextBox』為【True】,讓WebGridView知道其內有WebGridTextBox元件,並能在User編輯每一個WebGridView時CallBack到Server上,而不會去更新目前的網頁,如圖設定:
圖5-5-5 開啟AutoPostBackWebGridTextBox屬性
與WebCheckBox一樣,可以透過在WebNavigator上貼一個按鈕透過wgvMaster.PostBackMultiTextBoxes();WebDataSource.ApplyUpdate()來存檔。在此我們借用上一例的【AllApply】按鈕。
Step6>對W010進行右鍵「Build Page」功能,並以InfoLogin右鍵的「View in Browser」來執行結果。如下,你可以編輯WebGridView的第一筆和第二筆的「Remark」欄位後,最後按下【AllApply】來批次存檔。
圖5-5-6 批次存檔
¨ WebGridTextBox的原理
當對此元件輸入資料後,會讓Client的網頁產生CallBack的動作回Server上,系統會記錄在一個此此網頁同名的xml檔,存放已經被User更改的任何WebGridTextBox資料異動內容,當WebDataSource存檔後,Server才會以此xml內容去進行Apply工作,最後再將此XML檔案清空。
Related Topics