CN105740478A

CN105740478A - 一种无刷新实现分页排序表格的方法及装置

Info

Publication number: CN105740478A
Application number: CN201610174829.2A
Authority: CN
Inventors: 李海啸
Original assignee: Inspur General Software Co Ltd
Current assignee: Inspur General Software Co Ltd
Priority date: 2016-03-25
Filing date: 2016-03-25
Publication date: 2016-07-06

Abstract

本发明公开了一种无刷新实现分页排序表格的方法及装置，属于计算机技术领域，Web表格组件通过在visual studio设计器中以控件的形式拖拽到web页面设计器中进行使用，在设计器中定义表格的属性：是否分页、是否自动排序、单页记录数、行交替颜色、数据源对象属性、表格高度，在每一个列中指定改列的绑定字段、显示名称、宽度、样式、对齐方式，就可以快速完成一个表格的定义和显示。本发明实现无刷新加载后台数据、自动分页、自动排序、自适应页面、表头固定、表格编辑等功能。

Description

一种无刷新实现分页排序表格的方法及装置

技术领域

本发明涉及计算机技术领域，具体地说是一种无刷新实现分页排序表格的方法及装置。

背景技术

在大多数的Web开发中，表格控件一直是Web应用中使用频度较高且复杂度较大的一种控件。

受限于Web交互模式的特点（即需要不断地与后台服务器做数据交互），类似于Winform那种做一个操作之后，能接着返回相应结果这种方式，在Web上变得比较困难，因为如果通过传统方式，整个页面不得不整体刷新一下才能够看到返回的结果，这对使用来说，体验不怎么好，并且对应很大的开发量如分页、排序、后台数据绑定。

发明内容

本发明的技术任务是针对以上不足之处，提供一种无刷新实现分页排序表格的方法及装置，实现无刷新加载后台数据、自动分页、自动排序、自适应页面、表头固定、表格编辑等功能。

本发明解决其技术问题所采用的技术方案是：

一种无刷新实现分页排序表格的方法及装置，Web表格组件通过在visualstudio设计器中以控件的形式拖拽到web页面设计器中进行使用，在设计器中定义表格的属性：是否分页、是否自动排序、单页记录数、行交替颜色、数据源对象属性、表格高度等内容，在每一个列中指定改列的绑定字段、显示名称、宽度、样式、对齐方式等信息，就可以快速完成一个表格的定义和显示；

实施方法如下：

1）、web页面加载时，向页面中定向数据Grid相关的控制脚本以及公共方法，包括请求后台的ashx文件地址、参数、表格高度设定、分页和排序的方法生成等信息；

2）、点击排序或者分页按钮时，通过JavaScript封装定义好的处理函数，将请求通过ajax方式发送到服务器端；

3）、服务器端通过数据源接口反射调用，获取到对应的数据集；

4）、借助于微软DataGrid控件对数据集进行数据的绑定，同时在绑定过程中处理合计、行合并、绑定事件等操作；

5）、将绑定生成的结果输出转化成HTML标记，最后通过ajax将生成的HTML标记回传到客户端，最终通过JavaScript将结果显示到页面。

本发明的一种无刷新实现分页排序表格的方法及装置和现有技术相比，具有以下有益效果：

本发明通过封装设计好的一套表格组件，可以直接通过拖拽的形式在设计器中进行排版和定义，最终展现出来的是一个可以无刷新显示数据的Web表格。设计简单、功能强大是本表格的最大特点，即可以实现强大的功能同时也降低了开发的难度；

本发明基于web的表格组件，通过该表格可以实现无刷新加载后台数据、自动分页、自动排序、自适应页面、表头固定、表格编辑等功能，本表格可以可视化在visualstudio设计器中进行拖拽及各种属性的定义，并提供前台的JavaScript的API函数及后台C#端的标准接口，是基于web进行复杂应用设计的有力工具。开发人员不需要关注后台的数据交互，只需要把精力放在关键的业务点即可，通用的操作由此装置自动完成。

附图说明

下面结合附图对本发明进一步说明。

附图1为组件处理流程图；

附图2为分组结果表图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步说明。

实施例一：

在设计器中定义表格的属性：是否分页、是否自动排序、单页记录数、行交替颜色、数据源对象属性、表格高度等内容，在每一个列中指定改列的绑定字段、显示名称、宽度、样式、对齐方式等信息，就可以快速完成一个表格的定义和显示。

配置项：web.config中配置好处理节点：

<addverb="POST,GET"path="ajax/*.ashx"type="Ajax.PageHandlerFactory,Ajax"/>

<addverb="*"path="*.ashx"type="Seejee.CFDataGrid.NonRefresh,TableView"validate="false"/>

</httpHandlers>

第一个节点为Ajax组件的处理节点，第二个节点为表格组件的处理节点。

两种数据源的支持：

1、后台数据源定义方式：

实现IGetDataSource接口，接口中完成数据源的返回，如下所示：

#regionIGetDataSource成员

publicDataTableGetDataSource(stringstrFlag)

{

Seejee.DataCommon.DACommandcmd=newSeejee.DataCommon.DACommand();

cmd.CommandText="select*fromabc";//表格查询语句

returncmd.ReturnDataSet().Tables[0];//返回数据集

}

#endregion

2、前台定义语句的方式，直接在SqlString中定义查询语句：

<cc2:tableviewid="TableView1"runat="server"allowpaging="true"allowsorting="True"downcolor="#cccccc"pagesize="100"AllowAlterBgColor="True"SQLString="select*fromabc"ShowLeftBar="True">

</cc2:tableview>

绑定事件处理支持：

通过绑定事件，可以在表格数据绑定过程中，加入自定义的处理逻辑

1、实现IItemDataBound接口

2、编写接口处理逻辑，如下：

publicvoidItemDataBind(objectsender,objecte)

{

DataGridItemEventArgsa=(DataGridItemEventArgs)e;

if(a.Item.ItemIndex==-1){

for(inti=0;i<a.Item.Cells.Count;i++)

{

HtmlGenericControlcon=newHtmlGenericControl("span");

con.ID="span1";

con.Attributes.Add("onMouseDown","alert()");

con.InnerText="|";

//a.Item.Cells[i].Controls.Add(con);

a.Item.Cells[i].Text+="<aid='span"+i.ToString()+"'onclick=alert()style='float:right'>|</a>";

}

实施例二：

本发明通过封装设计好的一套表格组件，可以直接通过拖拽的形式在设计器中进行排版和定义，最终展现出来的是一个可以无刷新显示数据的Web表格。设计简单、功能强大是本表格的最大特点，即可以实现强大的功能同时也降低了开发的难度。

表格的使用方式：

1、定义HTML标记

<cc2:ViewColumnHeaderText="A"AllowSum="False"ItemCss="table_item"HeaderAlign="Center"HeaderCss="table_head"Width="100"AllowRowSpan="False"ItemAlign="Left"Type="Bound"Visible="True"DataField="cola"ReadOnly="False"></cc2:ViewColumn>

<cc2:ViewColumnHeaderText="B"AllowSum="False"ItemCss="table_item"HeaderAlign="Center"HeaderCss="table_head"Width="100"AllowRowSpan="False"ItemAlign="Left"Type="Bound"Visible="True"DataField="colb"ReadOnly="False"></cc2:ViewColumn>

<cc2:ViewColumnHeaderText="C"ItemCss="table_item"AllowSum="False"HeaderAlign="Center"HeaderCss="table_head"Width="100"AllowRowSpan="False"ItemAlign="Left"Type="Bound"Visible="True"DataField="colc"ReadOnly="False"></cc2:ViewColumn>

<cc2:ViewColumnHeaderText="D"ItemCss="table_item"AllowSum="False"HeaderAlign="Center"HeaderCss="table_head"Width="100"AllowRowSpan="False"ItemAlign="Left"Type="Bound"Visible="True"DataField="cold"ReadOnly="False"></cc2:ViewColumn>

</cc2:tableview>

HTML属性说明（表格属性）：

allowpaging	是否允许分页
		allowsorting	是否允许排序
downcolor	点击行颜色
		pagesize	单页记录数
AllowAlterBgColor	允许行交替变色
		SQLString	查询语句
ShowLeftBar	是否显示左侧列

HTML属性说明（表列属性）：

HeaderText	列描述
		AllowSum	是否允许汇总
ItemCss	行样式
		HeaderAlign	列标题对齐方式
HeaderCss	列标题样式
		Width	列宽
AllowRowSpan	是否允许合并相同行
		Type	列类型
Visible	是否显示
		DataField	绑定字段名
ReadOnly	是否只读

2、定义后台数据源

#regionIGetDataSource成员

publicDataTableGetDataSource(stringstrFlag)

{

Seejee.DataCommon.DACommandcmd=newSeejee.DataCommon.DACommand();

cmd.CommandText="select*fromabc";

returncmd.ReturnDataSet().Tables[0];

}

#endregion

实施例三：

如图2所示，实施步骤如下：

1）web页面加载时，向页面中定向数据Grid相关的控制脚本以及公共方法，包括请求后台的ashx文件地址、参数、表格高度设定、分页和排序的方法生成等信息。

2）点击排序或者分页按钮时，通过JavaScript封装定义好的处理函数，将请求通过ajax方式发送到服务器端。

3）服务器端通过数据源接口反射调用，获取到对应的数据集。

4）借助于微软DataGrid控件对数据集进行数据的绑定，同时在绑定过程中处理合计、行合并、绑定事件等操作。

5）将绑定生成的结果输出转化成HTML标记，最后通过ajax将生成的HTML标记回传到客户端，最终通过JavaScript将结果显示到页面。

组件核心代码

1、页面加载时，解析配置，在客户端自动生成表格组件的js脚本及样式文件

通过GUID标识出客户端页面上的每一个Grid实例，通过输出的脚本计算页面高度并设定Grid高度。

公共的JavaScript函数通过一个单独的ashx处理页面注入到页面的head当中，公共函数包括了排序、分页的脚本函数以及表格刷新等函数。

Ajax.Utility.RegisterTypeForAjax(typeof(Seejee.CFDataGrid.NoneRefreshDataGrid),page);

this.RegisterXML(this._guide);

String[]arrPath=page.Request.CurrentExecutionFilePath.Split('/');

page.RegisterClientScriptBlock("ashx","<scriptlanguage='javascript'src='/"+arrPath[1]+"/CFDataGrid/NonRefresh.ashx'></script>");

if(this._clientid!="")

{

if(System.Environment.Version.Major==2)

{

page.RegisterStartupScript(this._guide,"<script>varnon_refreshvalue=NoneRefreshDataGrid.DisPlayTable('"+this._guide+"',document.documentElement.clientHeight,document.getElementById('"+this._clientid+"').offsetTop).value;if(non_refreshvalue!=null){document.getElementById('"+this._clientid+"').innerHTML=non_refreshvalue;non_guide+=',"+this._guide+"';}else{window.location.reload();}</script>");

}

else{

page.RegisterStartupScript(this._guide,"<script>varnon_refreshvalue=NoneRefreshDataGrid.DisPlayTable('"+this._guide+"',document.body.clientHeight,document.getElementById('"+this._clientid+"').offsetTop).value;if(non_refreshvalue!=null){document.getElementById('"+this._clientid+"').innerHTML=non_refreshvalue;non_guide+=',"+this._guide+"';}else{window.location.reload();}</script>");

}

2、核心表格形成代码

//形成表格的数据源，数据源的实现通过实现IDataSource接口，在接口方法中返回DataTable，并在Grid的配置文件中将对应的类文件配置到表格处理当中。

if(this._source=="")

{

string[]textArray=this.def.DataSourceUrl.Split(newchar[]{','});

IDataSetsets=(IDataSet)Activator.CreateInstance(Assembly.Load(textArray[0]).GetType(textArray[1]));

sets.StrSql=this._strsql;

ds=sets.GetDataSet().Tables[0];

}

else

{

string[]textArray2=this._source.Split(newchar[]{','});

Typetype=Assembly.Load(textArray2[0]).GetType(textArray2[1]);

IGetDataSourcetarget=(IGetDataSource)Activator.CreateInstance(type);

stringstrFlag="";

if(textArray2.Length>2){

strFlag=textArray2[2];

}

ds=target.GetDataSource(strFlag);//(DataTable)type.InvokeMember("GetDataSource",BindingFlags.InvokeMethod,null,target,null);

}

//排序及分页数据处理，排序及分页在DataView中进行处理，然后系统将排序之后的数据集绑定到DataGrid

DataViewview=ds.DefaultView;

view.ApplyDefaultSort=false;

if(this._sorttype!="")

{

view.Sort=this._datafields[Convert.ToInt32(this._sortvalue)]+""+this._sorttype;

}

intiPage=Convert.ToInt32(this._currentpage);

if(this._allowpage.ToString().ToLower()=="true")

{

intiPageCount=0;

dg.AllowPaging=true;

dg.PageSize=Convert.ToInt32(this._pagesize);

if(ds.Rows.Count%Convert.ToInt32(this._pagesize)>0)

{

iPageCount=ds.Rows.Count/Convert.ToInt32(this._pagesize)+1;

}

else

{

iPageCount=ds.Rows.Count/Convert.ToInt32(this._pagesize);

}

if(iPage>(iPageCount-1)){

iPage=0;

}

if(this._pagetype.ToString().ToLower()=="pre")

{

if(iPage>0)

{

iPage=iPage-1;

}

if(this._pagetype.ToString().ToLower()=="next")

{

if(iPage<iPageCount-1)

{

iPage=iPage+1;

}

if(this._pagetype.ToString().ToLower()=="first")

{

iPage=0;

}

if(this._pagetype.ToString().ToLower()=="end")

{

iPage=iPageCount-1;

if(iPage<0){

iPage=0;

}

//列合计处理，列合计在数据绑定之后，根据列属性的设定选项进行汇总计算并且显示在表格的底部。

stringstrIndex="";

for(inti=0;i<AllowSum.Length;i++)

{

if(AllowSum[i].ToLower()=="true")

{

iLength++;

strIndex=strIndex+i.ToString()+",";

}

decimal[]arrSum=null;

string[]arrIndex=null;

if(strIndex!=""){

strIndex=strIndex.Remove(strIndex.Length-1);

arrIndex=strIndex.Split(',');

arrSum=newdecimal[iLength];

for(inti=0;i<view.Table.Rows.Count;i++){

try

{

for(intj=0;j<arrIndex.Length;j++)

{

arrSum[j]+=Convert.ToDecimal(view.Table.Rows[i][Convert.ToInt32(arrIndex[j])]);

}

catch{

}

this.dg.DataSource=view;

//表格事件处理，表格的事件通过在类中实现相应的事件接口，并且在表格的配置文件中指定上对应的处理类，系统通过反射的机制在相应的处理点调用对应的接口。

if(this._itembindclass!="")

{

string[]textArray3=this._itembindclass.Split(newchar[]{','});

this.ItemDataBindSetter=Assembly.Load(textArray3[0]).GetType(textArray3[1]);

this.ItemDataBindObj=Activator.CreateInstance(this.ItemDataBindSetter);

this.dg.ItemDataBound+=newDataGridItemEventHandler(this.dg_ItemDataBound);

}

通过上面具体实施方式，所述技术领域的技术人员可容易的实现本发明。但是应当理解，本发明并不限于上述的具体实施方式。在公开的实施方式的基础上，所述技术领域的技术人员可任意组合不同的技术特征，从而实现不同的技术方案。

除说明书所述的技术特征外，均为本专业技术人员的已知技术。

Claims

1.一种无刷新实现分页排序表格的方法及装置，其特征在于Web表格组件通过在visualstudio设计器中以控件的形式拖拽到web页面设计器中进行使用，在设计器中定义表格的属性：是否分页、是否自动排序、单页记录数、行交替颜色、数据源对象属性、表格高度，在每一个列中指定改列的绑定字段、显示名称、宽度、样式、对齐方式，就可以快速完成一个表格的定义和显示；

实施方法如下：

1）、web页面加载时，向页面中定向数据Grid相关的控制脚本以及公共方法，包括请求后台的ashx文件地址、参数、表格高度设定、分页和排序的方法生成；

4）、借助于微软DataGrid控件对数据集进行数据的绑定，同时在绑定过程中处理合计、行合并、绑定事件；