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

悠悠 2021-12-16 02:55 212阅读 0赞

文件名：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、 创建列表的表头

<thead>

</th>

</tr>

</thead>

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

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

C、 创建数据列表

<tbody>

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

<tr>

</td>

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

转载于:https://www.cnblogs.com/lanchong/archive/2011/08/31/2160815.html

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Jquery 分页案例

相关自己编写JQuery扩展分页插件

相关 MySQL 跨库分页/ 分表分页/ 跨库分页，为什么这么难？

相关 MySQL 跨库分页/ 分表分页/ 跨库分页，为什么这么难？

相关 jQuery、Ajax分页

相关分页总结

相关 jquery 简易分页

相关 Jquery分页自行总结篇

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

相关 JQuery实现分页功能