将 JQuery 脚本应用于特定的网格视图
Apply a JQuery Script to specific grid views
我正在努力将 JQuery 脚本应用于页面上的某些网格视图,问题是当前脚本应用于页面上的每个网格视图,我需要以某种方式指定它应用的网格。
我使用的脚本如下。作者:瑞安·齐尔克。
$.fn.tablePagination = function (settings) {
var defaults = {
firstArrow: (new Image()).src = "./images/first.gif",
prevArrow: (new Image()).src = "./images/prev.gif",
lastArrow: (new Image()).src = "./images/last.gif",
nextArrow: (new Image()).src = "./images/next.gif",
rowsPerPage: 5,
currPage: 1,
optionsForRows: [5, 10],
ignoreRows: []
};
settings = $.extend(defaults, settings);
return this.each(function () {
var table = $(this)[0];
var totalPagesId = '#' + table.id + '+#tablePagination #tablePagination_totalPages';
var currPageId = '#' + table.id + '+#tablePagination #tablePagination_currPage';
var rowsPerPageId = '#' + table.id + '+#tablePagination #tablePagination_rowsPerPage';
var firstPageId = '#' + table.id + '+#tablePagination #tablePagination_firstPage';
var prevPageId = '#' + table.id + '+#tablePagination #tablePagination_prevPage';
var nextPageId = '#' + table.id + '+#tablePagination #tablePagination_nextPage';
var lastPageId = '#' + table.id + '+#tablePagination #tablePagination_lastPage';
var possibleTableRows = $.makeArray($('tbody tr', table));
var tableRows = $.grep(possibleTableRows, function (value, index) {
return ($.inArray(value, defaults.ignoreRows) == -1);
}, false)
var numRows = tableRows.length
var totalPages = resetTotalPages();
var currPageNumber = (defaults.currPage > totalPages) ? 1 : defaults.currPage;
if ($.inArray(defaults.rowsPerPage, defaults.optionsForRows) == -1)
defaults.optionsForRows.push(defaults.rowsPerPage);
function hideOtherPages(pageNum) {
if (pageNum == 0 || pageNum > totalPages)
return;
var startIndex = (pageNum - 1) * defaults.rowsPerPage;
var endIndex = (startIndex + defaults.rowsPerPage - 1);
$(tableRows).show();
for (var i = 0; i < tableRows.length; i++) {
if (i < startIndex || i > endIndex) {
$(tableRows[i]).hide()
}
}
}
function resetTotalPages() {
var preTotalPages = Math.round(numRows / defaults.rowsPerPage);
var totalPages = (preTotalPages * defaults.rowsPerPage < numRows) ? preTotalPages + 1 : preTotalPages;
if ($(totalPagesId).length > 0)
$(totalPagesId).html(totalPages);
return totalPages;
}
function resetCurrentPage(currPageNum) {
if (currPageNum < 1 || currPageNum > totalPages)
return;
currPageNumber = currPageNum;
hideOtherPages(currPageNumber);
$(currPageId).val(currPageNumber)
}
function resetPerPageValues() {
var isRowsPerPageMatched = false;
var optsPerPage = defaults.optionsForRows;
optsPerPage.sort();
var perPageDropdown = $(rowsPerPageId)[0];
perPageDropdown.length = 0;
for (var i = 0; i < optsPerPage.length; i++) {
if (optsPerPage[i] == defaults.rowsPerPage) {
perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i], true, true);
isRowsPerPageMatched = true;
}
else {
perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i]);
}
}
if (!isRowsPerPageMatched) {
defaults.optionsForRows == optsPerPage[0];
}
}
function createPaginationElements() {
var htmlBuffer = [];
htmlBuffer.push("<div id='tablePagination'>");
htmlBuffer.push("<span id='tablePagination_perPage'>");
htmlBuffer.push("<select id='tablePagination_rowsPerPage'><option value='5'>5</option></select>");
htmlBuffer.push("per page");
htmlBuffer.push("</span>");
htmlBuffer.push("<span id='tablePagination_paginater'>");
htmlBuffer.push("<img id='tablePagination_firstPage' src='" + defaults.firstArrow + "'>");
htmlBuffer.push("<img id='tablePagination_prevPage' src='" + defaults.prevArrow + "'>");
htmlBuffer.push("Page");
htmlBuffer.push("<input id='tablePagination_currPage' type='input' value='" + currPageNumber + "' size='1'>");
htmlBuffer.push("of <span id='tablePagination_totalPages'>" + totalPages + "</span>");
htmlBuffer.push("<img id='tablePagination_nextPage' src='" + defaults.nextArrow + "'>");
htmlBuffer.push("<img id='tablePagination_lastPage' src='" + defaults.lastArrow + "'>");
htmlBuffer.push("</span>");
htmlBuffer.push("</div>");
return htmlBuffer.join("").toString();
}
if ($(totalPagesId).length == 0) {
$(this).after(createPaginationElements());
}
else {
$('#tablePagination_currPage').val(currPageNumber);
}
resetPerPageValues();
hideOtherPages(currPageNumber);
$(firstPageId).bind('click', function (e) {
resetCurrentPage(1)
});
$(prevPageId).bind('click', function (e) {
resetCurrentPage(currPageNumber - 1)
});
$(nextPageId).bind('click', function (e) {
resetCurrentPage(currPageNumber + 1)
});
$(lastPageId).bind('click', function (e) {
resetCurrentPage(totalPages)
});
$(currPageId).bind('change', function (e) {
resetCurrentPage(this.value)
});
$(rowsPerPageId).bind('change', function (e) {
defaults.rowsPerPage = parseInt(this.value, 10);
totalPages = resetTotalPages();
resetCurrentPage(1)
});
})
};
})(jQuery);
该脚本在客户端启用,具有以下功能:
$('table').tablePagination({});
它还具有一些CSS,如下所示:
#testTable {
width : 300px;
margin-left: auto;
margin-right: auto;
}
#tablePagination {
background-color: Transparent;
font-size: 0.8em;
padding: 0px 5px;
height: 20px
}
#tablePagination_paginater {
margin-left: auto;
margin-right: auto;
}
#tablePagination img {
padding: 0px 2px;
}
#tablePagination_perPage {
float: left;
}
#tablePagination_paginater {
float: right;
}
我已经尝试了一些方法将此脚本应用于某个网格视图:
将客户端脚本更改为:
$('#GridviewName').tablePagination({});
此外,我还尝试对脚本文件本身进行一些更改,以尝试使其按如下方式工作
var possibleTableRows = $.makeArray($('.pagingclass tbody tr', table));
在这里,我尝试指定一个类,然后将该CSS类添加到网格视图中,以便将脚本仅应用于该网格视图,但是它不起作用。
我不完全确定我该如何做到这一点,或者是否有可能。任何帮助将不胜感激。
您应该使用网格视图的 ID
$('#<%=GridViewID.ClientID%>').tablePagination({});
使用$('table').tablePagination({});
时,您将定位页面上的所有表。 如果查看从 gridview 控件呈现的 HTML,您会发现它类似于您在控件中指定的 ID,但并不相同。 这就是为什么您需要使用客户端 ID 指定而不是类似 $('#GridViewID').tablePagination({});
相关文章:
- 在不刷新整个网格的情况下,向Asp.net网格视图添加新行
- 网格视图:防止行移动到标题行上方
- asp.net网格视图中的面板-我如何在jquery中找到它
- 在网格视图的自动刷新过程中,设置内部网格视图文本框的可见性
- 网格视图页眉冻结在母版页中不起作用
- 如何在网格视图中每次单击按钮或链接时打开不同的新弹出窗口
- 如何使用jquery在网格视图中获取所选单选按钮的值
- 检查网格视图中的复选框是否被选中
- 如何使用 javascript 修改网格视图单元格值
- 通过 JavaScript 从主网格视图上的功能区按钮更新 CRM 2011 中的字段
- 通过jquery将网格视图数据发送到另一个页面
- 将网格视图的两列相乘,并将其显示在新列中
- 如何使用javascript遍历网格视图的列
- 如何选中/取消选中外部按钮的网格视图复选框
- 将网格视图导出到Excel时出错
- 如何在网格视图中验证asp.net文本框
- 页面加载后,将FooTable断点应用于网格视图中的列标题
- 用javascript制作一个网格视图图像
- JavaScript中的网格视图页脚行文本框
- 为什么第一次点击网格视图中的单选按钮毫无作用