t7利用母板頁(yè)技術(shù)及jsoop思想實(shí)現(xiàn)書(shū)架信息管理

1、北風(fēng)網(wǎng)項(xiàng)目培訓(xùn)第7講：利用母板頁(yè)技術(shù)及JSOOP思想實(shí)現(xiàn)書(shū)架信息管理(2)講師：風(fēng)舞煙JavaScript-JQuery系列全程精通+圖書(shū)館管理系統(tǒng)實(shí)戰(zhàn)本講任務(wù)實(shí)現(xiàn)書(shū)架信息管理本講知識(shí)點(diǎn)利用母板頁(yè)重構(gòu)SmallBookjqGrid插件的高級(jí)使用JS-OOP實(shí)現(xiàn)書(shū)架信息的管理jQuery UI Dialog的使用封裝母版頁(yè)SubPageMasterPage.master使用母版頁(yè)的目的：1、統(tǒng)一界面布局2、增強(qiáng)代碼復(fù)用母板頁(yè)中抽出通用的界面和代碼：通用的界面1、divLoading2、divLayer3、alert界面4、confirm界面s通用的代碼部分：1、一些常用的CSS及JS（jQuer

2、y、jQuery UI、通用的JS類(lèi)庫(kù)） (init Loading And Layer Div js） (Set Pop Common Dialog UI JS Function) (給彈出子窗體附加通用處理代碼)BookCaseInfoMgr.aspxStep1:添加CSS及JS引用 Step2:HandlerBookCaseMgr.ashx返回json數(shù)據(jù)返回?cái)?shù)據(jù)的格式total:1,page:1,records:9, rows: id:1,cell:1,右A-1,id:2,cell:2,左A-4,id:3,cell:3,下A-1,id:8,cell:8,書(shū)架7,id:9,cell:9,

3、書(shū)架4,id:10,cell:10,書(shū)架3,id:11,cell:11,書(shū)架1,id:12,cell:12,書(shū)架5,id:19,cell:19,書(shū)架6,Step3:利用jqGrid顯示數(shù)據(jù)jQuery(#tblBookCase).jqGrid( url: /SmallBook/Handler/HandlerBookCaseMgr.ashx, datatype: json, colNames: 編號(hào), 書(shū)架名稱, 修改, 刪除, colModel: name: Id, index: 1, width: 75, resizable: false, hidden: true , name: Book

4、CaseName, index: 2, width: 200, align: center,sorttable:true, name: Modify, index: 3, width: 100, align: center,sortable:false , name: Delete, index: 4, width: 100, align: center ,sortable:false , autowidth: true, height: 250, sortname: 1, sortorder: asc, caption: 書(shū)架設(shè)置“ 。Step4:在jqGrid中如何顯示自定義數(shù)據(jù) plet

5、e: function() var ids = jQuery(#tblBookCase).jqGrid(getDataIDs); for (var i = 0; i ids.length; i+) var id = idsi; /var model = jQuery(#tblBookCase).jqGrid(getRowData, id); /name = systemMgr_BookCase.BookCaseName; modify = 修改; del = 刪除; jQuery(#tblBookCase).jqGrid(setRowData, idsi, Modify: modify, De

6、lete: del ); 在內(nèi)容頁(yè)如何訪問(wèn)母板頁(yè)？通過(guò)在在母板頁(yè)封裝屬性的方式訪問(wèn)。Step1:在母板頁(yè)封裝屬性 /指的是彈開(kāi)窗口(即iFrame)的寬度 public int ViewWidth /指的是彈開(kāi)窗口(即iFrame)的高度 public int ViewHeight Step2:在內(nèi)容頁(yè)添加MasterType指示Step3:在內(nèi)容頁(yè)訪問(wèn)母板頁(yè)屬性if (!IsPostBack) Master.ViewHeight = 400; Master.ViewWidth = 680; 1、SmallBook.Base.jsvar SmallBook = ;SmallBook.Base

7、= function() this._config = form_id: dialog-form, form_width: 320, form_height: 220, form_title: 圖書(shū)館管理系統(tǒng), type: show ; this.BaseUrl = ; this._showUrl = . this._modifyUrl = . this._insertUrl = . this._deleteUrl = . /彈開(kāi)窗體的方法 this.ShowDialog = function(config) ; /刪除 this.Delete = function(id) . 2、jquer

8、y ui dialog的使用3、BookCaseInfoMgr.js/從父類(lèi)SmallBook.Base類(lèi)派生SmallBook.Base.systemMgr = SmallBook.Base.systemMgr.BookCaseInfoMgr = function() SmallBook.Base.call(this); 。step1: /顯示 this.Show = function(config) ;step2: /修改 this.Modify = function(config) . step3: /添加 this.Insert = function(config) . 4、BookC

9、aseInfoMgr.aspx界面調(diào)用 function Modify(id) var obj = new SmallBook.Base.systemMgr.BookCaseInfoMgr(); var model = jQuery(#tblBookCase).jqGrid(getRowData, id); obj.Modify( form_id: dialog-form-bookcase, form_title:修改書(shū)架信息,model: model ); function Insert() var obj = new SmallBook.Base.systemMgr.BookCaseInfoMgr(); obj.Insert( form_id: dialog-form-bookcase,form_title:新增書(shū)架 ); function Delete(id) var obj = new SmallBook.Base.systemMgr.BookCaseInfoMgr(); obj.Delete(id); /完整的config格式： /*this._config = form_id:dialog-form, form_width: 320, form_height: 220, form_title: 圖書(shū)館管理系統(tǒng), type: