Extjs 行列转换

简介

数据库行列转换，前台实现分页效果。数据库进行行列转换并分页，

handler进行column、model拼接，前台js 动态绑定

1.数据库
假设有成绩表如下：

姓名 课程 分数
张三 语文 74
张三 数学 83
张三 物理 93
李四 语文 74
李四 数学 84
李四 物理 94

想变成(得到如下结果)，并且分页展示：
姓名 语文 数学 物理
---- ---- ---- ----
李四 74   84   94
张三 74   83   93

创建表的SQL语句如下：

create   TABLE #tbproject([subjectid] INT , [subjectname] varchar(10))
create  table #tb (name varchar(10) , [subjectid] INT ,score int)

INSERT INTO #tbproject VALUES(1,'语文'),(2,'数学'),(3,'物理')

insert into #tb VALUES
('张三' , 1 , 74),
('张三' , 2 , 83),
('张三' , 3 , 93),
('李四' , 1 , 74),
('李四' , 2 , 84),
('李四' , 3 , 94)

2.DAO
1.	获取需要进行 行列转换的列。

DECLARE @parameters NVARCHAR(4000)
SET @parameters=(
		STUFF(
		( SELECT '],['+ [subjectname] 
		FROM #tbproject tbp
		 FOR XML PATH('') )
		 ,1,1,'')+']'
		)
		SET  @parameters=isnull(SUBSTRING(@parameters,2,LEN(@parameters)),'')

2.	查询需要分页的数据，并带上需要转换的行，行列转换后存入临时表。

DECLARE @sql NVARCHAR(4000)
SET @sql='

SELECT row_number() OVER ( ORDER BY name DESC ) AS ___rn ,*
into #tempData
 FROM
(
SELECT tb.name,tb.score,tbp.subjectname FROM #tb tb
LEFT JOIN #tbproject tbp ON  tb.subjectid=tbp.subjectid
) AS a PIVOT(MAX(a.score) FOR a.subjectname IN ('
+@parameters + ') ) b 
'

3.	取出分页的数据。

DECLARE @sql NVARCHAR(4000)
SET @sql='

SELECT row_number() OVER ( ORDER BY name DESC ) AS ___rn ,*
into #tempData
 FROM
(
SELECT tb.name,tb.score,tbp.subjectname FROM #tb tb
LEFT JOIN #tbproject tbp ON  tb.subjectid=tbp.subjectid
) AS a PIVOT(MAX(a.score) FOR a.subjectname IN ('
+@parameters + ') ) b 


select * from #tempData
where   ___rn > 0
        AND ___rn <= 1
'


全部SQL代码如下：


create   TABLE #tbproject([subjectid] INT , [subjectname] varchar(10))
create  table #tb (name varchar(10) , [subjectid] INT ,score int)

INSERT INTO #tbproject VALUES(1,'语文'),(2,'数学'),(3,'物理')

insert into #tb VALUES
('张三' , 1 , 74),
('张三' , 2 , 83),
('张三' , 3 , 93),
('李四' , 1 , 74),
('李四' , 2 , 84),
('李四' , 3 , 94)


DECLARE @parameters NVARCHAR(4000)
SET @parameters=(
		STUFF(
		( SELECT '],['+ [subjectname] 
		FROM #tbproject tbp
		 FOR XML PATH('') )
		 ,1,1,'')+']'
		)
		SET  @parameters=isnull(SUBSTRING(@parameters,2,LEN(@parameters)),'')


DECLARE @sql NVARCHAR(4000)
SET @sql='

SELECT row_number() OVER ( ORDER BY name DESC ) AS ___rn ,*
into #tempData
 FROM
(
SELECT tb.name,tb.score,tbp.subjectname FROM #tb tb
LEFT JOIN #tbproject tbp ON  tb.subjectid=tbp.subjectid
) AS a PIVOT(MAX(a.score) FOR a.subjectname IN ('
+@parameters + ') ) b 


select * from #tempData
where   ___rn > 0
        AND ___rn <= 1


'

EXEC(@sql)

这里也可以分两次访问数据库，第一次访问数据库把parameters 字符串查询出来，第二次就可以直接执行sql ，而不用 拼接sql。

3.Handler
Handler层共两个方法，第一个是获取grid column 和model 的方法，第二个是获取 grid数据的方法。

1.	方法一：
获取DAO执行后的dataset，然后进行拼接

StringBuilder json = new StringBuilder();
json.Append("{\"field\":[");
foreach (DataColumn dc in ds.Tables[0].Columns)
{
    json.Append("{name:'" + dc.ColumnName + "',type:'string'},");
}
json.Remove(json.ToString().Length - 1, 1);
json.Append("],");

json.Append("\"gridCloumn\":[");

for (int i = 0; i < ds.Tables[0].Columns.Count; i++)
{
    DataColumn dc = ds.Tables[0].Columns[i];
    json.Append("{text:'" + dc.ColumnName + "',dataIndex:'" + dc.ColumnName + "'},");
}

json.Remove(json.ToString().Length - 1, 1);
json.Append("]}");

return json.ToString();

2.	方法二：

int rowcount = 0;
DataSet ds = new VisitingTaskDataBLL(CurrentUserInfo).GetVistingTaskDataStep(queryParams, pageIndex, pageSize, out rowcount);
return string.Format("{{\"totalCount\":{1},\"topics\":{0}}}",
                dtView.ToJSON(),
                rowcount);

4.页面JS
View层先创建好grid，
点击查询时 动态配置 grid的store与column，
并绑定好store分页获取数据的数据源即可。

function fnSearch() {

	Ext.getCmp("gridlist").setLoading(JITPage.Msg.GetData);

	Ext.Ajax.request({
	url:”获取handler的方法一”，
	Success:
		var jdata = Ext.JSON.decode(response.responseText);

		Ext.define('StepParameterModel', {
                extend: 'Ext.data.Model',
                fields: eval(jdata.field)
            });

            new Ext.create('Ext.data.Store', {
                pageSize: JITPage.PageSize.getValue(),
                model: "StepParameterModel",
                id: "stepParameterStore",
                proxy: {
                    type: 'ajax',
                    url: dataurl,
                    reader: {
                        type: 'json',
                        root: 'topics',
                        totalProperty: "totalCount"
                    },
                    extraParams: {
                        ClientStructureID: ""
                    },
                    actionMethods: { read: 'POST' }
                }
            });

            Ext.getCmp("gridlist").reconfigure(Ext.getStore("stepParameterStore"), eval(jdata.gridCloumn));

            Ext.getCmp("pageBar").bind(Ext.getStore("stepParameterStore"));

            //重?新?加¨®载?数ºy据Y
            Ext.getStore("stepParameterStore").proxy.url = dataurl;
            Ext.getStore("stepParameterStore").proxy.extraParams = {
                ClientStructureID: Ext.getCmp("ClientStructureID").jitGetValue()
            };

            Ext.getStore("stepParameterStore").load({
                params: {
                    limit: JITPage.PageSize.getValue(),
                    page: 1
                },
                callback: function () {
                    Ext.getCmp("gridlist").setLoading().hide();
                }
            });

)}
}