基于jQuery的客户端分页的Grid组件

这是一个用jquery实现的Grid组件，支持在客户端进行分页。

 

一、组件使用约定如下： 

1、组件用到的数据需要存放到客户端的一个DIV标签内，每一行数据是一个自定义的名为row的标签，代码范例如下：

<div id="__DATASET" style="display:none;">
	<row id="18" title="测试主题列表刷新" board="1" creator="GFADMIN1" createDate="2011-07-26 00:00" mainId="" lastedReplier="" lastedReplyDate="" agent="" branch="广公司"/>
	<row id="83" title="ffffffffffff" board="1" creator="LSDLRJS1" createDate="2011-07-28 17:29" mainId="" lastedReplier="" lastedReplyDate="" agent="测试公司0" branch="广公司"/>
	<row id="80" title="测试新主题" board="1" creator="LSDLRJS1" createDate="2011-07-28 17:02" mainId="" lastedReplier="管理员1" lastedReplyDate="2011-07-28 17:52" agent="测试公司0" branch="广公司"/>
	<row id="65" title="111111111111111" board="1" creator="LSDLRJS1" createDate="2011-07-28 15:15" mainId="" lastedReplier="梁用广代理人" lastedReplyDate="2011-07-28 15:16" agent="测试公司0" branch="广公司"/>
	<row id="39" title="测试测试测试测试测试测试测试测试测试测试测试测试" board="1" creator="GFADMIN1" createDate="2011-07-27 12:07" mainId="" lastedReplier="管理员1" lastedReplyDate="2011-07-27 14:52" agent="" branch="广公司"/>
</div>

 

2、Grid组件需要显示在一个DIV标签内， 代码范例如下：

<div id="__DATAFORM"></div>

 

二、组件参数详解

    1、Grid组件参数

         id：组件ID，必须

         datasetId：组件数据存放的DIV的ID值，必须

         renderTo：用于显示组件的DIV的ID值，必须

         columns：用于描述组件数据列的数组，必须

         pageSize：组件每页显示的记录条数，可选，默认为20条

 

         代码范例如下：

var gridConfig = {
	id: "grid1",
	datasetId: "__DATASET",
	renderTo: "__DATAFORM",
	columns: columns,
	pageSize: 2
};

 

    2、数据列参数

         headerText：栏头的标题

         headerAlign：栏头的对齐方式

         headerCss：栏头的样式

         dataField：栏数据对应的字段名

         dataAlign：栏数据的对齐方式

         dataCss：栏数据的样式

         width：栏的宽度

         handler：自定义栏数据显示效果的事件方法名

 

         代码范例如下：

//数据控件
var columns = [
	{dataField: "title", headerText: "主题", width: "55%", handler: "titleHandler"},
	{dataField: "branch", headerText: "分支机构", dataAlign: "center", width: "15%"},
	{dataField: "createDate", headerText: "发表时间", dataAlign: "center", width: "15%"},
	{dataField: "lastedReplyDate", headerText: "最后回复时间", dataAlign: "center", width: "15%"}
];

//自定义的列渲染事件
function titleHandler(col, row){
	var s  = "<a href='./marketInfo.do?method=viewForum&forumId=" + eval("row.id") + "' target='_blank'>" + row.title + "</a>";
	return s;
}

 

    3、组件类

        构造函数：PagingGrid(config);

             config：json格式的数据，组件所需要的参数值通过该变量提供。

        组件方法：show();

             显示组件

 

       代码范例如下：

var grid1 = new PagingGrid(gridConfig);
grid1.show();