分页在JqGrid中不起作用
我确实收到了Json数据。我有123条记录。但它只显示第一页10条记录。分页不起作用。
代码：
@section stylesheets {
<link rel="stylesheet" href="~/assets/css/jquery-ui.css" /> @*jQuery UI - v1.11.2 - 2014-10-28*@
<link rel="stylesheet" href="~/assets/css/ui.jqgrid.css" />
<link rel="stylesheet" href="~/assets/css/select2.css" />
}
<table id="jqgrid"></table>
<div id="jqgridPager"></div>
@section scripts
{
<script>
API_URL = "/VendorManagement/";
var gridSelector = "#jqgrid";
var pagerSelector = "#jqgridPager";
</script>
<script src="~/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
<script src="~/assets/js/jqGrid/jquery.jqGrid.src.js"></script> @*@license jqGrid 4.6.0 - jQuery Grid*@
<script>
$(document).ready(function () {
function styleSearchForm(form) {
var dialog = form.closest('.ui-jqdialog');
var buttons = dialog.find('.EditTable');
buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
}
function styleSearchFilters(form) {
form.find('.delete-rule').val('X');
form.find('.add-rule').addClass('btn btn-xs btn-primary');
form.find('.add-group').addClass('btn btn-xs btn-success');
form.find('.delete-group').addClass('btn btn-xs btn-danger');
}
function styleEditForm(form) {
//enable datepicker on "sdate" field and switches for "stock" field
//don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
//.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
//update buttons classes
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide(); //ui-icon, s-icon
buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>');
buttons = form.next().find('.navButton a');
buttons.find('.ui-icon').hide();
buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
}
function styleDeleteForm(form) {
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide(); //ui-icon, s-icon
buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>');
}
jQuery(gridSelector).jqGrid({
url: API_URL + 'GetVendors',
datatype: 'json',
mtype: 'GET',
height: 'auto',
colNames: ['pkey', 'Company', 'ContactName', 'ContactPhone', 'UserName', 'UserKey', 'Active', 'FacilityId', 'ClientId', 'PhotoURL', 'PushToGP'],
colModel: [
{ name: 'pkey', index: 'pkey', width: 50, hidden: true },
{ name: 'Company', width: 120 },
{ name: 'ContactName', width: 110 },
{ name: 'ContactPhone', width: 120 },
{ name: 'UserName', align: "right", width: 90 },
{ name: 'UserKey', align: "right", width: 120, hidden: true },
{ name: 'Active', width: 50, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch },
{ name: 'FacilityId', align: "right", width: 100, formatter: "integer" },
{ name: 'ClientID', align: "right", width: 100, formatter: "integer" },
{ name: 'PhotoURL', align: "right", width: 80 },
{ name: 'PushToGP', align: "right", width: 80, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch }
],
cmTemplate: { autoResizable: true, editable: true },
rowNum: 10,
rowList: [10, 20, 30],
pager: pagerSelector,
sortname: 'company',
sortorder: "asc",
viewrecords: true,
jsonreader: {
root: "rows",
page: "page",
total: "total",
records:"records"
},
caption: "Vendor Managerment"
});
$(gridSelector).jqGrid('navGrid', pagerSelector,
{
//navbar options
edit: true,
editicon: 'ace-icon fa fa-pencil blue',
add: true,
addicon: 'ace-icon fa fa-plus-circle purple',
del: true,
delicon: 'ace-icon fa fa-trash-o red',
search: true,
searchicon: 'ace-icon fa fa-search orange',
refresh: true,
refreshicon: 'ace-icon fa fa-refresh green',
view: true,
viewicon: 'ace-icon fa fa-search-plus grey'
},
{
//edit record form
//closeAfterEdit: true,
//width: 700,
recreateForm: true,
mtype: 'PUT',
onclickSubmit: function (params, postdata) {
params.url = API_URL + 'UpdateVendor';
},
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
styleEditForm(form);
}
},
{
//new record form
//width: 700,
closeAfterAdd: true,
recreateForm: true,
viewPagerButtons: false,
mtype: 'POST',
onclickSubmit: function (params, postdata) {
params.url = API_URL + 'PostVendor';
},
afterSubmit: function (response, postdata) {
if (response.responseText != "")
{
var userKey = JSON.parse(response.responseText).UserKey;
alert("The password you created for the new vendor is\n\n" + userKey);
return [true, "OK"];
} else {
return [false, "error"];
}
},
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
.wrapInner('<div class="widget-header" />');
styleEditForm(form);
}
},
{
//delete record form
recreateForm: true,
mtype: 'DELETE',
onclickSubmit: function (params, postdata) {
params.url = API_URL + 'DeleteVendor';
},
beforeShowForm: function (e) {
var form = $(e[0]);
if (form.data('styled')) return false;
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
styleDeleteForm(form);
form.data('styled', true);
}
},
{
//search form
recreateForm: true,
afterShowSearch: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
styleSearchForm(form);
},
afterRedraw: function () {
styleSearchFilters($(this));
},
multipleSearch: true
/**
multipleGroup:true,
showQuery: true
*/
},
{
//view record form
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
}
}
);
jQuery(gridSelector).jqGrid('inlineNav', pagerSelector, { edit: true, add: true, del: true });
});
function aceSwitch(cellvalue, options, cell) {
setTimeout(function () {
$(cell).find('input[type=checkbox]')
.addClass('ace ace-switch ace-switch-5')
.after('<span class="lbl"></span>');
}, 0);
}
</script>
}
1 个答案:
答案 0 :(得分：0)
我可以改写一下我的问题。它正在工作，但它的图标是看不见的。 添加代码
loadComplete: function () {
var table = this;
setTimeout(function () {
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
此外：
function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
});
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({ container: 'body' });
$(table).find('.ui-pg-div').tooltip({ container: 'body' });
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？