當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

《Ext JS高级程序设计》节选：一个结合DataWrite和RowEditor的Grid示例(2)

發布時間：2024/4/17 javascript 40 豆豆

生活随笔收集整理的這篇文章主要介紹了《Ext JS高级程序设计》节选：一个结合DataWrite和RowEditor的Grid示例(2) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在定義中，需要監聽 beforeedit 事件，其作用是判斷當前編輯狀態是增加新記錄還是編輯原有記錄，如果是增加新記錄，則 cid 字段的輸入框需要處于允許編輯狀態。否則， cid 字段的輸入框需要處于不允許編輯狀態。因為當新增一個記錄時， Sotre 記錄集中的每個記錄的關鍵字使用的是 id 的值，而不是 cid 的值，雖然在新增操作成功后，會根據服務器端返回的記錄修改這個關鍵字，但是，當再次編輯該記錄并修改其 cid 值時，并不會再更新記錄集中該記錄的關鍵字，因而當你第 3 次編輯該記錄時，在服務器端將找不到該記錄，從而引發錯誤。這就是使用兩個 id 的弊端。因而，要在這里禁止在編輯原有記錄時修改 cid 值。

接著定義 cid 字段的 TextField ，代碼如下：

??? ??? var ideditor=new Ext.form.TextField({

?????????????????????????? allowBlank: false,maskRe:/[0-9]/,regex:/^(/d{3})*$/, ??????? regexText:" 請輸入正確的編號 "

?????????????????? });

定義中，參數 maskRe 限制了輸入框只能輸入數字。參數 regex 限制了輸入的數字的個數必須為 3 的倍數，而參數 regexText 則是驗證 regex 時輸出的錯誤信息。

最后定義 GridPanel ，代碼如下：

??? ??? var grid = new Ext.grid.GridPanel({

??? ??????? renderTo: 'grid1',

??? ??????? frame: true,

??? ??????? title: ' 一個結合 DataWrite 和 RowEditor 的 Grid 的示例 ',

??? ??????? autoScroll: true,

??? ??????? width:600,

??? ??????? height: 500,

??? ??????? store: store,

??? ??????? plugins: [editor],

??? ??????? columns : [

?????????????????????????? ??? {header: " 編號 ", width: 100, sortable: true, dataIndex: 'cid',

?????????????????????????? ??? ??? editor: ideditor

?????????????????????????? ??? },

?????????????????????????? ??? {header: " 名稱 ", width: 250, sortable: true, dataIndex: 'title',

?????????????????????????? ??? ??? editor: new Ext.form.TextField({

?????????????????????????? ??? ??????????? allowBlank: false?????

?????????????????????????? ??? ??? }

?????????????????????????? ??? )},

?????????????????????????? ??? {header: " 描述 ", width: 300, sortable: true, dataIndex: 'desc', editor: new Ext.form.TextField()}

?????????????????????????????????? ],

??? ??????? tbar: [{

??? ??????????? text: ' 增加 ',

??? ??????????? handler: function(){

?????????????????????????? ??????? var u = new store.recordType({

?????????????????????????? ??????????? cid : '',

?????????????????????????? ??????????? title: '',

?????????????????????????? ??????????? desc : ''

?????????????????????????? ??????? });

?????????????????????????? ??????? editor.stopEditing();

?????????????????????????? ??????? store.insert(0, u);

?????????????????????????? ??????? editor.startEditing(0);

??? ??????????? }

??? ??????? }, {

??? ??????????? text: ' 刪除 ',

??? ??????????? handler: function(){

?????????????????????????? ??????? var rec = grid.getSelectionModel().getSelected();

?????????????????????????? ??????? if (!rec) {

?????????????????????????? ??????????? return false;

?????????????????????????? ??????? }

?????????????????????????? ??????? grid.store.remove(rec);

??? ??????????? }

??? ??????? }],

??? ??????? viewConfig: {

??? ??????????? forceFit: true

??? ??????? }

??? ??? });

在 GridPanel 中，增加按鈕用來在 Store 中創建一個新記錄，然后激活 RowEditor ，進入編輯狀態。刪除按鈕則獲取選擇記錄，并從 Store 中刪除該記錄。

現在要完成服務器端代碼。

在 VS 2008 中，創建一個名稱為“ Grid.ashx ”的一般處理程序，然后添加以下引用：

using Newtonsoft.Json;

using Newtonsoft.Json.Linq;

using ExtShop;

using System.Linq;

接著修改 processRequest 方法，其代碼如下：

??? public void ProcessRequest (HttpContext context) {

????? string act = context.Request["act"] ?? "";

????? string output = "";

????? switch (act)

????? {

??????? case "list":

????????? output = List(context.Request);

????????? break;

??????? case "create":

?????? ??? output = Create(context.Request);

????????? break;

??????? case "update":

????????? output = Update(context.Request);

????????? break;

??????? case "del":

????????? output = Del(context.Request);

????????? break;

??????? default:

????????? output = "{success:false,msg:' 錯誤的訪問類型。 '}";

????????? break;?????????

????? }

????? context.Response.ContentType="text/javascript";

????? context.Response.Write(output);

??? }

代碼將根據提交 act 參數執行對應的方法。

首先完成 List 方法，其代碼如下：

??? private string List(HttpRequest request)

??? {

?? ??? ExtShopDataContext dc = new ExtShopDataContext();????

????? return new JObject(

??????? new JProperty("success", true),

??????? new JProperty("total", dc.T_Categories.Count()),

??????? new JProperty("msg", ""),

??????? new JProperty("rows", new JArray(

??????????? from m in dc.T_Categories

??????????? select new JObject(

????????????? new JProperty("id", m.CategoryID),

????????????? new JProperty("cid", m.CategoryID),

????????????? new JProperty("title",m.Titel),

????????????? new JProperty("desc",m.Description)

????????????? )

????????? ))

??????? ).ToString();

??? }

因為不考慮分頁問題，所以直接使用 JSON to LINQ 輸入結果就可以了，要注意的就是，需要輸出 2 次 CategoryID 值。

接著完成 Create 方法，其代碼如下：

??? private string Create(HttpRequest request)

??? {

????? string rows = request["rows"] ?? "";

????? if (rows.Length > 0)

????? {

??????? JObject r = JObject.Parse(rows);

??????? string id = (string)r["cid"] ?? "";

??????? string title = (string)r["title"] ?? "";

??????? string desc = (string)r["desc"] ?? "";

??????? if (id.Length > 0 & title.Length > 0)

??? ???? {

????????? try

????????? {

??????????? ExtShopDataContext dc = new ExtShopDataContext();

??????????? var q = dc.T_Categories.SingleOrDefault(m => m.CategoryID == id);

??????????? if (q == null)

??????????? {

????????????? T_Categories rec = new T_Categories();

????????????? rec.CategoryID = id;

????????????? rec.Titel = title;

????????????? rec.Description = desc;

????????????? dc.T_Categories.InsertOnSubmit(rec);

????????????? dc.SubmitChanges();

????????????? return new JObject(

??????????????? new JProperty("success", true),

??????????????? new JProperty("total", 0),

??????????????? new JProperty("msg", rows),

??????????????? new JProperty("rows", new JArray(

??????????????????? new JObject(

??????????????????????? new JProperty("id", id),

???????? ??????????????? new JProperty("cid", id),

??????????????????????? new JProperty("title", title),

??????????????????????? new JProperty("desc", desc)

????????????????????? )?????????????????????

????????????????? ))

??????????????? ).ToString();

?????????? ? }

??????????? else

??????????? {

????????????? return new JObject(

??????????????? new JProperty("success", false),

??????????????? new JProperty("msg", " 編號“ "+id+" ”已存在。 ")

??????????????? ).ToString();

??????????? }

????????? }

????????? catch (Exception e)

????????? {

??????????? return new JObject(

????????????? new JProperty("success", false),

????????????? new JProperty("msg", e.Message)

????????????? ).ToString();???????????

????????? }

??????? }

??????? else

??????? {

????????? return new JObject(

? ?????????? new JProperty("success", false),

??????????? new JProperty("msg", " 錯誤的提交數據。 ")

??????????? ).ToString();

??????? }

????? }

????? else

????? {

??????? return new JObject(

????????? new JProperty("success", false),

????????? new JProperty("msg"," 錯誤的提交數據。 ")

????????? ).ToString();

????? }

??? }

因為提交的參數是“ rows ”（該參數由 Store 定義的參數 root 的值決定），且值為 JSON 格式的字符串，因而最簡單的方式是先將字符串轉換為 JSON 對象，然后再處理。轉換后將值分別保存到 id 、 title 和 desc 三個變量里。

保存成功一定要按 JsonStore 定義的格式返回數據，而且要返回新增的記錄。如果是自動生成的 id ，需要獲取并返回給 Store 。

接著要完成 Update 方法，代碼如下：

??? private string Update(HttpRequest request)

??? {

????? string id = request["id"] ?? "";

????? string rows = request["rows"] ?? "";

????? if (rows.Length > 0)

????? {

??????? JObject r = JObject.Parse(rows);

??????? string cid = (string)r["cid"] ?? "";

??????? string title = (string)r["title"] ?? "";

??????? string desc = (string)r["desc"] ?? "";

??????? if (title.Length <= 0)

??????? {

????????? return new JObject(

??????????? new JProperty("success", false),

??????????? new JProperty("total", 1),

??????????? new JProperty("msg", " 請輸入名稱。 "),

??????????? new JProperty("rows", new JArray(

??????????? new JObject(

??????????????? new JProperty("id", id),

??????????????? new JProperty("cid", id),

??????????????? new JProperty("title", title),

??????????????? new JProperty("desc", desc)

????????????? )

????????????? ))

??????????? ).ToString();

??????? }

??????? try

??????? {

????????? ExtShopDataContext dc = new ExtShopDataContext();

????????? var q = dc.T_Categories.SingleOrDefault(m => m.CategoryID.ToLower() == id.ToLower());

????????? if (q != null)

????????? {

??????????? q.Titel = title;

??????????? q.Description = desc;

??????????? dc.SubmitChanges();

??????????? return new JObject(

????????????? new JProperty("success", true),

????????????? new JProperty("total", 1),

????????????? new JProperty("msg", ""),

????????????? new JProperty("rows", new JArray(

????????????? new JObject(

????????????????? new JProperty("id", id),

????????????????? new JProperty("cid", id),

????????????????? new JProperty("title", title),

??? ?????????????? new JProperty("desc", desc)

??????????????? )

??????????????? ))

????????????? ).ToString();

????????? }

????????? else

????????? {

??????????? return new JObject(

????????????? new JProperty("success", false),

????????????? new JProperty("msg", " 編號“ "+id+" ”不存在或已被刪除。 "),

????????????????? new JProperty("rows", new JArray(

????????????????? new JObject(

????????????????????? new JProperty("id", id),

????????????????????? new JProperty("cid", id),

????????????????????? new JProperty("title", title),

????????????????????? new JProperty("desc", desc)

??????????????????? )?????????????????????????????????????????????

??????????????????? ))

????????????? ).ToString();

????????? }

??????? }

??????? catch (Exception e)

??????? {

????????? return new JObject(

??????????? new JProperty("success", false),

??????????? new JProperty("msg", e.Message),

????????????????? new JProperty("rows", new JArray(

????????????????? new JObject(

????????????????????? new JProperty("id", id),

????????????????????? new JProperty("cid", id),

????????????????????? new JProperty("title", title),

????????????????????? new JProperty("desc", desc)

??????????????????? )

??????????????????? ))

??????????? ).ToString();???????????

??????? }

????? }

????? else

????? {

??????? return new JObject(

????????? new JProperty("success", false),

????????? new JProperty("msg"," 錯誤的提交數據。 ")

????????? ).ToString();

????? }

??? }

在 Update 方法中，無論是返回錯誤信息還是成功信息，都要以 Store 中定義好的 JSON 格式返回，而且必須返回更新的記錄，不然 Store 在確認記錄時，會認為該條記錄不存在而刪除該記錄，然后向服務器提交刪除該記錄的請求。關于這一點，在已存在數據的情況下進行調試時一定要小心，不然會誤刪數據。

在 Update 方法中還要注意，要更新記錄的 id 會通過參數 id 提交，“ rows ”里提交的是更新的數據。

最后完成的是 Del 方法，其代碼如下：

??? private string Del(HttpRequest request)

??? {

????? string id= request["rows"] ?? "";

????? try

????? {

??????? id = id.Replace("/"", "");

??????? ExtShopDataContext dc = new ExtShopDataContext();

??????? var q = dc.T_Categories.SingleOrDefault(m=>m.CategoryID.ToLower()==id.ToLower());

??????? if (q != null)

??????? {

????????? id = q.CategoryID;

????????? dc.T_Categories.DeleteOnSubmit(q);

????????? dc.SubmitChanges();

??????? }

??????? return new JObject(

????????? new JProperty("success", true),

????????? new JProperty("msg", " 刪除編號為“ " + id + " ”的記錄成功。 ")

????????? ).ToString();

????? }

????? catch(Exception e)

????? {

??????? return new JObject(

?????? ??? new JProperty("success", false),

????????? new JProperty("msg", e.Message)

????????? ).ToString();???????

????? }

??? }

在 Del 方法中，記錄的 id 也是以參數“ rows ”提交的。返回的數據格式就不用 Store 定義的 JSON 格式返回了。

轉載于:https://www.cnblogs.com/wdpp/archive/2009/10/30/2386523.html

總結

以上是生活随笔為你收集整理的《Ext JS高级程序设计》节选：一个结合DataWrite和RowEditor的Grid示例(2)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：书评：卓有成效的ThoughtWorks
下一篇：学习：ASP.NET中App_Code,

javascript

《Ext JS高级程序设计》节选： 一个结合DataWrite和RowEditor的Grid示例(2)

總結

《Ext JS高级程序设计》节选：一个结合DataWrite和RowEditor的Grid示例(2)