t7利用母板页技术及jsoop思想实现书架信息管理

1、北风网项目培训第7讲：利用母板页技术及JSOOP思想实现书架信息管理(2)讲师：风舞烟JavaScript-JQuery系列全程精通+图书馆管理系统实战本讲任务实现书架信息管理本讲知识点利用母板页重构SmallBookjqGrid插件的高级使用JS-OOP实现书架信息的管理jQuery UI Dialog的使用封装母版页SubPageMasterPage.master使用母版页的目的：1、统一界面布局2、增强代码复用母板页中抽出通用的界面和代码：通用的界面1、divLoading2、divLayer3、alert界面4、confirm界面s通用的代码部分：1、一些常用的CSS及JS（jQuer

2、y、jQuery UI、通用的JS类库） (init Loading And Layer Div js） (Set Pop Common Dialog UI JS Function) (给弹出子窗体附加通用处理代码)BookCaseInfoMgr.aspxStep1:添加CSS及JS引用 Step2:HandlerBookCaseMgr.ashx返回json数据返回数据的格式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,书架7,id:9,cell:9,

3、书架4,id:10,cell:10,书架3,id:11,cell:11,书架1,id:12,cell:12,书架5,id:19,cell:19,书架6,Step3:利用jqGrid显示数据jQuery(#tblBookCase).jqGrid( url: /SmallBook/Handler/HandlerBookCaseMgr.ashx, datatype: json, colNames: 编号, 书架名称, 修改, 删除, 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: 书架设置“ 。Step4:在jqGrid中如何显示自定义数据 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 ); 在内容页如何访问母板页？通过在在母板页封装属性的方式访问。Step1:在母板页封装属性 /指的是弹开窗口(即iFrame)的宽度 public int ViewWidth /指的是弹开窗口(即iFrame)的高度 public int ViewHeight Step2:在内容页添加MasterType指示Step3:在内容页访问母板页属性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: 图书馆管理系统, type: show ; this.BaseUrl = ; this._showUrl = . this._modifyUrl = . this._insertUrl = . this._deleteUrl = . /弹开窗体的方法 this.ShowDialog = function(config) ; /删除 this.Delete = function(id) . 2、jquer

8、y ui dialog的使用3、BookCaseInfoMgr.js/从父类SmallBook.Base类派生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界面调用 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:修改书架信息,model: model ); function Insert() var obj = new SmallBook.Base.systemMgr.BookCaseInfoMgr(); obj.Insert( form_id: dialog-form-bookcase,form_title:新增书架 ); 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: 图书馆管理系统, type: