JMJS系统总结系列Jquery分页扩展库（五）

文件名：JS/common/Grid.js

简介：这是基于Jquery的扩展库

用途：这个扩展库控件是针对JMJS系统的列表页面而开发的。主要功能包括：分页、排序、全选。

模板的创建、设置

A、 创建xslt列表模版

在列表模板中引入一下模板

<xsl:import href="../common/BlankLineExtend.xslt"/>

<xsl:import href="../common/Pagination.xslt"/>

<xsl:import href="../common/Function.xslt"/>

B、 创建列表的表头

<table id="tblList" border="0" cellpadding="0" cellspacing="0" class="tab_style001" width="100%">

<thead>

<tr style="font-size:12px;">

<th width="25px" align="center">

<input type="checkbox" id="chkAll" />

</th>

<th width="80px" align="center" order="ProjectAcceptNum">受理编号</th>

<th width="80px" align="center" order="AcceptDate" >受理日期</th>

<th width="150px" align="center" order="UnitName">申请单位</th>

<th width="*" align="center" order="ProjectName">项目名称</th>

<th width="150px" align="center" order="ApplyCategory">项目类型</th>

<th width="100px" align="center" order="UnitTel" >联系电话</th>

</tr>

</thead>

请注意：<thead></thead><th></th><tbody></tbody>这三个标签
如需要设置全选功能，请在第一例中添加CheckBox标签。

如果需要排序，请在<th>标签中设置order属性。

C、 创建数据列表

<tbody>

<xsl:for-each select="ReturnResult/Data/Accept">

<tr>

<td align="center">

<input type="checkbox" id="{AcceptID}" value="{AcceptID}" />

</td>

<td height="25" align="left">

<xsl:value-of select="UnitTel"/>

</td>

</tr>

</xsl:for-each>

<!--空行扩展.开始-->

<xsl:if test="ReturnResult/@PageCount=ReturnResult/@CurentPage">

<xsl:if test="ReturnResult/@RecordCount - ReturnResult/@EndRecord * ReturnResult/@PageCount &lt; 0">

<xsl:call-template name="BlankLineExtend">

<xsl:with-param name="RowNum" select="ReturnResult/@EndRecord * ReturnResult/@PageCount - ReturnResult/@RecordCount" />

<xsl:with-param name="ColumnNum">7</xsl:with-param>

</xsl:call-template>

</xsl:if>

</xsl:if>

<!--空行扩展.结束-->

<!--没有记录时执行-->

<xsl:if test="ReturnResult/@RecordCount= 0">

<xsl:call-template name="BlankLineExtend">

<xsl:with-param name="RowNum" select="ReturnResult/@EndRecord" />

<xsl:with-param name="ColumnNum">7</xsl:with-param>

</xsl:call-template>

</xsl:if>

</tbody>

</table>

列表的数据都包含在<tbody></tbody>标签中。

日常应用中，空行扩展和没有记录时执行的salt,请注意参数<xsl:with-param name="ColumnNum">7</xsl:with-param>的设置。当列表有n列时，参数设置为n。

D、 在</table>标签的后面添加

<xsl:call-template name="Pagination">

<xsl:with-param name="StartRecord" select="ReturnResult/@StartRecord"/>

<xsl:with-param name="PageSize" select="ReturnResult/@EndRecord"/>

<xsl:with-param name="RecordCount" select="ReturnResult/@RecordCount" />

<xsl:with-param name="CurentPage" select="ReturnResult/@CurentPage"/>

<xsl:with-param name="PageCount" select="ReturnResult/@PageCount"/>

</xsl:call-template>

用于设置分页控件的相关数据

Grid.js插件的介绍

//****************************************************

// 名 称：Grid

// 说 明：Grid的Jquery插件,提交分页、排序等功能初始化

// 参 数：opts{

// hasCheckbox:true,//是否有Checkbox全选

// sort:true,//是否排序

// queryParams:'',//查询参数

// url:'',//提交的URL

// callbackFun,

// }

// 返 回 值：无

//****************************************************

$.fn.Grid = function(opts) {

opts.tableId = $(this).attr("id");

options = opts;

setPagerButton();

initPagerBar();

if (opts.hasCheckbox) {

bindCheckbox();

}

if (opts.sort)

sortTable(opts.tableId);

setRowSelect(); //设置鼠标结过时的样式和选择Checkbox

};

//****************************************************

// 名 称：RefreshGrid

// 说 明：Grid的Jquery插件刷新数据,提交分页、排序等功能

// 参 数：opts{

// hasCheckbox:true,//是否有Checkbox全选

// sort:true,//是否排序

// queryParams:'',//查询参数

// url:''//提交的URL

// }

// 返 回 值：无

//****************************************************

$.fn.RefreshGrid = function(opts) {

$("#curentPage").val(1);

setPagerButton();

options = opts;

options.tableId = $(this).attr("id");

$("#orderby").val("");

callServer(1, $("#limit").val());

};

//****************************************************

// 名 称：Refresh

// 说 明：刷新当前页（一定要在初始后才能调用此方法）

// 参 数：无

// 返 回 值：无

//****************************************************

$.fn.Refresh = function() {

$("#curentPage").val(1);

var start = parseInt($("#limit").val()) * (parseInt($("#curentPage").val()) - 1) + 1;

var end = parseInt($("#limit").val());

callServer(start, end);

};

新建列表匹配的js，调用列表初始化方法，初始化列表

//页面初始化后执行

$(document).ready(function() {

initSkin();

$("#tblList").Grid({ sort: true, hasCheckbox: true, queryParams: $("#form1").formSerialize(), url: "Accept.do?action=GetAcceptGridHtml" });

getGetApplyCategorys();

});

//****************************************************

// 名 称：generalSearch

// 说 明：常规查询

// 参 数：无

// 返 回 值：无

//****************************************************

function generalSearch() {

queryParams = $("#form1").formSerialize();

$("#tblList").RefreshGrid({ sort: true, hasCheckbox: true, queryParams: queryParams, url: "Accept.do?action=GetAcceptGridHtml" });

}

//****************************************************

// 名 称：advanceQueryOK

// 说 明：高级查询的确定按钮事件

// 参 数：无

// 返 回 值：无

//****************************************************

function advanceQueryOK() {

queryParams = $("#frmAdvancedQuery").formSerialize();

dialog.close();

$("#tblList").RefreshGrid({ sort: true, hasCheckbox: true, queryParams: queryParams, url: "Accept.do?action=GetAcceptGridHtml" });

}