EXTJS动态Grid：行列转换与分页实现

EXTJS 行列转换是一种在前端动态实现网格功能的技术，它允许用户根据数据库中的数据进行分页显示，同时在前端JavaScript中进行数据处理和模型构建。在这个案例中，作者田俊于2013年8月13日分享了如何使用Extjs来实现一个动态Grid，它结合了数据库操作（如SQL查询）和前端处理（如数据绑定和分页展示）。 首先，我们有一个名为“成绩表”的数据库结构，包含姓名、课程ID和分数字段。为了将数据按照"姓名-课程"的格式展现，我们需要对原始数据进行行列转换。这可以通过SQL查询来完成，比如使用`ROW_NUMBER()`函数按照姓名降序排列，同时选取所需字段。 在DAO层（数据访问对象层），代码首先定义了一个参数变量`@parameters`，用于存储所有课程名称，然后通过`FORXMLPATH('')`生成XML字符串并去除首尾的逗号。接着，设置SQL查询语句，其内容是： 1. 使用`ROW_NUMBER()`函数为每个记录分配一个行号（__rn），并按姓名降序排列。 2. 从`tb`表中选择姓名、分数，以及`tbproject`表中的课程名称（通过LEFT JOIN连接）。 3. 将结果存入临时表`#tempData`，以便后续处理。 分页功能是通过在SQL查询中添加`OFFSET`和`FETCH`子句实现的，可以根据当前页数和每页显示的记录数动态调整。这样，当前端应用接收到数据时，可以动态构建Extjs Grid组件，绑定到`tempData`中的数据，显示分页后的姓名-课程-分数列表。 这个方案展示了如何在Extjs框架下利用数据库的SQL查询能力进行数据预处理，然后在前端实现动态的行列转换和分页功能，提高了用户体验。对于需要处理大量数据或复杂表格布局的Web应用来说，这是一种实用且高效的解决方案。开发者可以参考提供的SQL语句和前端代码逻辑，灵活地应用于自己的项目中。