《第7章第七章datagrid组件二》由会员分享，可在线阅读，更多相关《第7章第七章datagrid组件二（37页珍藏版）》请在金锄头文库上搜索。
1、第七章 datagrid组件（二）,回顾,介绍datagrid组件的基本方法属性、格式化操作和工具栏按钮控件的添加和使用 讲解如何制作类似多级表头的复杂数据表格形式 基于datagrid组件中添加复选框的方式，结合上述知识点完成一个数据表格的综合案例,本章内容,讲解时间： 60分钟,实践时间： 30分钟,7.1 datagrid海量分页：内容预览,7.1.1 datagrid海量分页属性和方法,数据分页是Web应用程序开发中经常使用的一种技术，也是提高Web数据访问性能的主要手段。海量分页是对于已经无法使用数据库自带的分页机制，并会导致严重的服务器端程序性能问题，在经过生产环境大数据量千万级数
2、据量分页实现后的总结。,datagrid组件分页常用属性,datagrid组件分页常用方法,7.1.1 datagrid海量分页属性和方法,7.1.2 存储过程介绍和数据表格介绍,服务器端海量分页存储过程结构介绍,ALTER proc dbo.pagination3 TableList Varchar(200)=*,-搜索表的字段， 如：id，datatime，job，用逗号隔开 TableName Varchar(30), -搜索的表名 SelectWhere Varchar(500)=,-搜索条件，此处不用写where，如：job=teacherand class=2 SelectOrde
3、rId Varchar(20),-表主键字段名。如：id SelectOrder Varchar(200)=, -排序，可以使用多字段排序，但主键字段必需在最前面也可以不写，如：order by class asc intPageNo int=1, -页号 intPageSize int=10 ,-每页显示数 RecordCount int OUTPUT, -总记录数（存储过程输出参数） pagecount int output,查询目标数据库中表结构及数据记录数,数据记录数：共50000条测试数据,7.1.2 存储过程介绍和数据表格介绍,7.1.3 服务器端海量分页方法介绍,调用存储过程函数
4、,/ / 海量分页方法（二） / / 海量分页模型类对象 / 总记录数 / 当前页 / 每页显示多少条 / 返回请求页的记录集合 public static DataTable hfFun(pagination3Cls cls, out int intA, string pageNow, string rows),7.1.3 服务器端海量分页方法介绍,序列化DataTable对象方法,/ / 序列化datatable为json格式的方法 / / 输入datatable对象 / 输出 json格式字符串 public static string CreateJsonParameters(Data
5、Table dt),需要完成服务器端的海量分页程序调试，基本步骤如下： （1）完成海量分页存储过程编写和调试 （2）完成海量分页参数模型类的编写，模型类成员结构等同于分页存储过 程的参数结构 （3）完成服务器端读取海量分页存储过程的方法编写 （4）完成对DataTable对象进行Json格式数据源序列化方法的编写,7.1.3 服务器端海量分页方法介绍,int intA = 0;/总记录数 DataTable dt = hfFun( / 函数参数 ); Response.Write(“ “total“:“ + intA.ToString() + “,“rows“:“); string strJs
6、on = tools.ConvertJson.CreateJsonParameters(dt); Response.Write(strJson); Response.Write(“);,在服务器端调用应用程序，访问存储过程实现海量分页，分页结果是在页面中输出Json格式数据源,7.1.3 服务器端海量分页方法介绍,（1）参数page为当前页码，rows为每页显示数据数 （2）第二页，每页10条，当前页记录应该是从“11”到“20”，在JSON Viewer 中查看正确 （3）生成Json数据源结构与第6章数据源结构相同,7.1.4 datagrid数据源实现海量分页,datagrid组件的常用
7、属性在本章中继续沿用，“data”属性更换为“url”和“loadMsg”属性,$(“#标签元素ID属性“).datagrid( url: 请求地址, loadMsg: 数据加载提示, /每页显示选择有10条数据、20条数据和30条数据，最好是10的倍数 pageList: 10,20,30, pageSize:10/默认每页显示10条数据 );,代码： $(function () $(“#tb1“).datagrid( title: “表格数据操作案例“, width: 400,height: 200,striped: true, url: rtnData.aspx, loadMsg: 数据
8、加载中请稍后, pagination: true,rownumbers: true, fit: true, fitColumns: true,/自动撑满表格 pageList: 10,20,30,pageSize: 10, columns: /字段信息 ); );,基于第一个示例生成的Json格式数据源，结合datagird组件实现海量分页效果。,7.1.4 datagrid数据源实现海量分页,7.1.5 学生实践练习,实践时间： 20分钟,制作一个基于datagrid组件海量分页的例子。,7.1.5 学生实践练习,创建一数据表，字段数大于等于5，数据量大于等于100条数据。 完成海量分页存储
9、过程的创建，要求在数据库中通过脚本调试该存储过程的使用方法。 完成应用程序服务器端调用分页存储过程方法和模型类的编写。 根据datagrid加载数据源的Json格式在服务器端输出请求页的数据。 datagrid组件通过url属性异步加载服务器端数据，实现海量分页效果。,讲解时间： 60分钟,实践时间： 30分钟,7.2 datagrid高级扩展：内容预览,7.2.1 datagrid组件详细展示,Datagrid组件可以改变其视图（view）来显示不同的效果， Datagrid组件可以在数据行的左侧显示展开按钮，用户可以展开行来显示附加的详细信息展示,扩展功能资源文件引入，详细展示属于扩展功能
10、，需要下载呈现该功能脚本文件,新增详细显示功能的脚本文件,7.2.1 datagrid组件详细展示,datagrid组件详细展示常用属性,datagrid组件详细展示常用事件,7.2.1 datagrid组件详细展示,$(“#标签元素ID属性“).datagrid( view: detailview, detailFormatter: function (index, row) var strA = “; /循环创建div标签元素，并且将详细信息写入div中 return strA; , onExpandRow: function (index, row) /将循环创建的div标签元素实例化并
11、渲染成panel组件 $(#循环创建div标签元素的ID属性).panel( /参数集合 ); $(#标签元素ID属性).datagrid(fixDetailRowHeight, index); );,显示详细信息的重要属性,7.2.1 datagrid组件详细展示,view: detailview, detailFormatter: function (index, row) var strA = “; var rowIndex=index+1; strA += “; strA += “这是本页第“ + rowIndex.toString() + “条数据“; strA += “标题信息:“
12、 + row.title + “; strA += “作者:“ + row.author + “; strA += “添加时间:“ + row.addTime + “; strA += “; return strA; ,脚本文件Index参数表示当前页当前行的索引值，索引值从0开始，Row参数表示当前行的数据对象,7.2.1 datagrid组件详细展示,基于上一个示例，显示每一条数据的详细展示信息，代码演示仅呈现新增部分代码。,onExpandRow: function (index, row) $(#ddv- + index).panel( title: “详细信息显示“, height:
13、 100, width: 100, fit: true ); $(#tb1).datagrid(fixDetailRowHeight, index); ,7.2.1 datagrid组件详细展示,基于本示例，实现代码二,7.2.2 datagrid编辑数据表格,可编辑的功能是最近添加到datagrid组件中的，它可以使用户添加一个新行到datagrid组件，用户也可以更新一个或多个行，,可编辑数据表格常用属性,columns: field: 字段名,title: 标题名称, editor: type: 可编辑组件类型, options: 组件属性、事件和方法 ,7.2.2 datagrid编辑
14、数据表格,可编辑数据表格常用方法,7.2.2 datagrid编辑数据表格,可编辑数据表格常用事件,7.2.2 datagrid编辑数据表格,（1）本例要修改的是新闻标题和作者两列数据，字段名为“title”和“author”，添加一个 editor 属性到上述两列中,columns: field: title, align: center, title: 新闻标题, rowspan: 2, width: 80, sortable: true, editor: type: validatebox,options: required: true ,字段“author”同上 ,7.2.2 data
15、grid编辑数据表格,基于第二个示例，完成双击行进行数据编辑，编辑完成后点击工具栏上的“保存”按钮，在控制台输出目标数据行修改后的成员值。,（2）定义一个全局变量“editRow”，默认值是“undefined”，该变量用于保存当前编辑行的索引值，如果无编辑行索引值则为默认值，方便程序判断当前用户是否对某数据行进行编辑操作。,代码： var editRow = undefined;,7.2.2 datagrid编辑数据表格,（3）在工具栏上添加“保存”和“撤销”两个按钮，点击后分别在控制台上测试输出内容,代码： toolbar: text: 撤销, iconCls: icon-redo, handler: function () cconsole.info(“执行撤销操作“); , text: 保存, iconCls: icon-save, handler: function () cconsole.info(“执行保存操作“); ,7.2.2 datagrid编辑数据表格,（4）完成双击数据行进入编辑状态的程序，该功能事件为“onDblClickRow”,代码： onDblClickRow:function (rowIndex, rowData) if (editRow != undefined) /数据行中某一成员是编辑状态
