基于Jquery的客户端分页的Gird组件

这是一个用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> 

 

 

1. 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();