RIA应用开发：10-jQuery表格插件.ppt

jQuery表格插件 回顾 日历插件 表单验证插件 学习目标 了解表格排序的实现原理 了解表格分页的实现原理 掌握DateTables插件的使用 掌握flexigrid插件的使用 表格排序 排序是操作表格数据的一种常见任务。完成排序的手段有两种： 服务器端排序 在从数据库中提取数据时，按照给定的排序次序请求数据（使用order by 子句） JavaScript排序 使用javaScript内置的sort()方法 表格排序 JS内置的sort方法：将 Array 对象进行适当的排序； 在执行过程中不会创建新的 Array 对象。 arrayobj.sort(sortfunction) arrayobj：任意 Array 对象（必选项）。 sortfunction：用来确定元素顺序的函数名称。 如果省略， 按照 ASCII 字符顺序进行升序排列； 如果提供一个函数，那么该函数必须返回下列值之一： 负值，如果第一个参数比第二个参数小； 零，如果两个参数相等； 正值，如果第一个参数比第二个参数大（交换元素）。 表格排序 表格排序 例1：给表格的name属性列定义排序规则，当单击name属性列标题时，记录按照单元格值升序排列。 1.在需要排序的列上定义单击事件 2.获取所有记录行，并将其转化为数组对象 3.使用sort方法定义排序规则 4.循环遍历排序后的数组，逐行添加到表格中 表格排序 表格排序 排序后的隔行变色问题： 表格排序 性能优化： 表格排序 例2：在例1的基础上，对序号属性列进行排序。 学习目标 掌握表格分页的原理 掌握dateTables插件的使用 表格分页 分页可以通过两种方式实现： 服务器端分页 通过SQl语句每次提取部分数据到页面上显示 JavaScript分页 对某一段范围的数据显示、其他范围的数据隐藏 表格分页 分页相关变量： currentPage：当前所在页码 pageSize：每页记录条数 numRows：表格中的记录总数 numPages：一共分多少页 numPages的计算公式： numRows=$(“tbody tr”).length; numPages= Math.ceil(numRows/ pageSize) 表格分页 表格分页 例1：对一个有15条记录的表格进行分页，每页显示5条记录，当前显示第2页的记录。 表格分页 例2：显示分页索引 表格分页 例3：动态添加分页索引 DataTables插件 DataTables是一个jQuery的表格插件。支持任何HTML表格。主要特点 (/download/) 自动分页处理 即时表格数据过滤 数据排序 数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 动态创建表格 DataTables插件 DataTables插件 1.引入样式表文件和相关图片 <link rel="stylesheet" type="text/css" href="demo_page.css"> <link rel="stylesheet" type="text/css" href="demo_table.css"> 2.引入JS脚本 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dataTables.js"></script> 3.调用dataTable函数 <script type="text/javascript" > $(document).ready(function() { $('#example').dataTable(); } ); </script> DataTables插件 DataTables的相关属性 bPaginate ：开关，是否显示分页器 bFilter：开关，是否启用客户端过滤器 bLengthChange：开关，是否显示每页大小的下拉框 bSort：开关，是否启用各列的排序功能 aaSorting: [[0, “asc”]],指定按多列数据排序的依据 sScrollX：是否开启水平滚动，以及指定滚动区域大小,可设值：‘disabled’,‘20%’ 或'200px' sScrollY：是否开启垂直滚动，以及指定滚动区域大小 bProcessing：开关，指定当正在处理数据的时候，是否显示“正在处理”这个提示信息 DateTables插件 例2：DateTables属性的应用 DateTables插件 例3：DateTables数据来源 指定数据来源：sAjaxSource