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 < 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" });
}
