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

文件名：JS/common/Grid.js

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

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

模板的创建、设置

A、 创建xslt列表模版

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

B、 创建列表的表头

请注意：

这三个标签
如需要设置全选功能，请在第一例中添加CheckBox标签。

如果需要排序，请在

7

7

	受理编号	受理日期	申请单位	项目名称	项目类型	联系电话
标签中设置order属性。 C、 创建数据列表

列表的数据都包含在标签中。

日常应用中，空行扩展和没有记录时执行的salt,请注意参数7的设置。当列表有n列时，参数设置为n。

D、 在标签的后面添加

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

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