jqgrid - toppager [工具栏图标] 出现在多行
jqgrid - toppager[ toolbar icons] comes in multiple rows
我正在使用最新的免费 jqgrid 4.9.2
我的工具栏（toppager）按钮转到下一行，尽管在网格宽度中加载了 space。请找到随附的屏幕截图。有什么原因吗？
我也尝试了下面的 CSS 代码，但没有成功；
/*Toolbar customization*/
.ui-jqgrid .ui-jqgrid-toppager {
width: auto !important;/*1200 px*/
}
完整的 jqGrid 脚本 -
$(document).ready(
function() {
/**
* User code tab
*/
var userGrid = $("#userGrid"),
oldFrom = $.jgrid.from,
lastSelected;
var oldFrom = $.jgrid.from;
var lastSelected;
$.jgrid.from = function(source, initalQuery) {
var result = oldFrom.call(this, source, initalQuery),
old_select = result.select;
result.select = function(f) {
lastSelected = old_select.call(this, f);
return lastSelected;
};
return result;
};
$("#userGrid").jqGrid({
//sortable: true,//Columns reordering need to be disabled for frozen column working
//scroll: 1,//true scrolling rows - paging is not working when we enable scrolling. give fixed height then this will go good.. :)
url: 'list_user_detail',
datatype: 'json',
colNames: [jQuery.i18n.prop('userdetail.table.column.id'),
jQuery.i18n.prop('userdetail.table.column.username'),
jQuery.i18n.prop('userdetail.table.column.password'),
jQuery.i18n.prop('userdetail.table.column.active'),
jQuery.i18n.prop('userdetail.table.column.firstname'),
jQuery.i18n.prop('userdetail.table.column.lastname'),
jQuery.i18n.prop('userdetail.table.column.department'),
jQuery.i18n.prop('userdetail.table.column.email'),
jQuery.i18n.prop('userdetail.table.column.dob'),
jQuery.i18n.prop('userdetail.table.column.country'),
jQuery.i18n.prop('userdetail.table.column.role'),
""
],
colModel: [{
name: 'id',
index: 'id',
width: 80,
editable: true,
sortable: true,
align: 'center',
sorttype: 'integer',
searchoptions: {
sopt: ['eq', 'ne', 'le', 'lt', 'gt', 'ge'] //for filter functionality - specify the search options
},
editoptions: {
readonly: true,
size: 5
},
formoptions: {
rowpos: 1,
colpos: 1
}
}, {
name: "username",
index: "username",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
frozen: true,
editoptions: {
size: 30
},
editrules: {
required: true,
custom: true,
custom_func: usernameCheck
},
formoptions: {
label: jQuery.i18n.prop('userdetail.table.form.label.username')
}
}, {
name: "password",
index: "password",
width: 100,
align: 'center',
sortable: false,
editable: true,
hidden: true,
hidedlg: true, //to remove this column from column chooser as well
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
frozen: true,
editoptions: {
size: 30
},
//editrules are set as part of form edit validation so we can mark required for all mandatory fields
editrules: {
required: true,
custom: true,
edithidden: true,
custom_func: passwordCheck
},
formoptions: {
label: jQuery.i18n.prop('userdetail.table.form.label.password')
}
}, {
name: "active",
index: "active",
width: 80,
sortable: true,
align: 'center',
stype: "select", //if stype is enabled then sopt will not work - stype is needed only when search should have select option
editable: true,
edittype: "select",
formatter: "select",
editoptions: {
value: ":;1:Yes;0:No" //Default 0
},
cellattr: function(rowId, val, rawObject) {
if (val == 1) {
return " class='ui-state-useractive'";
} else if (val == 0) {
return " class='ui-state-userinactive'";
}
},
formoptions: {
//rowpos: 3,
//colpos: 1
}
}, {
name: "firstname",
index: "firstname",
width: 120,
align: 'center',
sortable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editable: true,
editoptions: {
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "lastname",
index: "lastname",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "department",
index: "department",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "email",
index: "email",
align: 'center',
width: 220,
sortable: false,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
size: 30
},
editrules: {
required: true,
custom: true,
custom_func: emailCheck
},
formoptions: {
label: jQuery.i18n.prop('userdetail.table.form.label.email')
}
}, {
name: "birthday",
index: "birthday",
width: 120,
sortable: true,
align: 'center',
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en'],
dataInit: function(e) {
$(e).datepicker({
dateFormat: 'dd-mm-yy',
maxDate: new Date()
});
}
}, //for Search/Filter functionality - specify the search options
editable: true,
editoptions: {
size: 10,
dataInit: function(e) {
$(e).datepicker({
dateFormat: 'dd-mm-yy',
maxDate: new Date()
});
}
},
formoptions: {
//rowpos: 3,
//colpos: 2
}
}, {
name: "country",
index: "country",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
edittype: 'text',
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "role",
index: "role",
width: 100,
sortable: true,
align: 'center',
stype: "select", //if stype is enabled then sopt will not work - stype is needed only when search should have select option
//searchoptions: {sopt:['cn','eq','ne','bw','bn','nc','ew','en']},//for Search/Filter functionality - specify the search options
editable: true,
edittype: "select",
formatter: "select",
editoptions: {
value: ":;ADMIN:Admin;USER:User" //Default User
},
formoptions: {
//rowpos: 3,
//colpos: 1
}
}, {
name: "oldPassword",
index: "oldPassword",
width: 10,
sortable: false,
editable: true,
hidden: true,
hidedlg: true //to remove this column from column chooser as well
}],
pager: "#userPager",
iconSet: "fontAwesome",
rowNum: 8,
rownumbers: false, //Row numbers
rowList: [8, 12, 20],
height: 'auto',
width: 'auto', //Autowidth
loadonce: true,
sortable: true,
sortname: 'No',
sortorder: 'desc',
viewrecords: true,
shrinkToFit: false,
ignoreCase: true, //Case insensitive search
gridview: true, //renders data more faster??
//viewsortcols: true,//easily show what columns are sortable - With this sorting not working.
caption: jQuery.i18n.prop('userdetail.table.caption'),
editurl: "edit_user_detail",
multiselect: false,
toppager: true, //Toolbar option
cloneToTop: true, //Toolbar option
loadComplete: function() {
this.p.lastSelected = lastSelected; // set this.p.lastSelected - to find out selected data from filter..
}
});
// Navigator tab inside pager grid
jQuery("#userGrid").jqGrid('navGrid', '#userPager', {
//General options
edit: false,
add: false,
del: false,
search: false,
view: false,
refresh: false,
cloneToTop: true //Must for top tool bar - this will close all the pager items in top tool bar.
}, {
// edit options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
editCaption: jQuery.i18n.prop('userdetail.table.button.edituser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
reloadAfterSubmit: false,
closeOnEscape: true,
//checkOnUpdate:true, //Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40], //Form Navigation option
//checkOnSubmit : true,//Form Navigation option
closeAfterEdit: true,
afterSubmit: refreshData // Need to refresh the data in the table to reflect the hashed password back to this table.
}, {
//Add options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
reloadAfterSubmit: false,
closeAfterAdd: true,
//checkOnUpdate:true,//Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40],//Form Navigation option
//checkOnSubmit : true,//Form Navigation option
closeOnEscape: true,
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
afterSubmit: refreshData // Need to refresh the data in the table to reflect the primary key added to this table.
}, {
// del options
reloadAfterSubmit: false,
closeOnEscape: true
}, {
//Search options
multipleSearch: true,
multipleGroup: true
}, {
//View options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
viewCaption: jQuery.i18n.prop('userdetail.table.button.viewuser'),
closeOnEscape: true
});
/*Search/Filter toolbar*/
jQuery("#userGrid").jqGrid('filterToolbar', {
searchOperators: true,
searchOnEnter: false,
jqModal: false,
multipleSearch: true,
multipleGroup: true,
recreateFilter: true,
closeOnEscape: true,
overlay: 0,
stringResult: true
});
//Top Toolbar options & Buttons
//before adding any buttons remove all the items copied/cloned from the bottom pager
$(".ui-paging-info", userGrid_toppager).remove();
$("#add_userGrid_top", userGrid_toppager).remove(); //remove add icon from top pager
$("#edit_userGrid_top", userGrid_toppager).remove(); //remove edit icon from top pager
$("#del_userGrid_top", userGrid_toppager).remove(); //remove delete icon from top pager
$("#view_userGrid_top", userGrid_toppager).remove(); //remove view icon from top pager
$("#search_userGrid_top", userGrid_toppager).remove(); //remove search icon from top pager
$("#refresh_userGrid_top", userGrid_toppager).remove(); //remove refresh icon from top pager
$("#userGrid_toppager_center", userGrid_toppager).remove(); //remove center pager details from top pager
//Toolbar button to add a config
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('userdetail.table.button.adduser'),
title: jQuery.i18n.prop('userdetail.table.title.add'),
buttonicon: 'fa-user-plus',
onClickButton: function() {
jQuery("#userGrid").jqGrid('editGridRow', "new", {
//Add options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
reloadAfterSubmit: false,
closeOnEscape: true,
//checkOnUpdate:true,//Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40],//Form Navigation option
//checkOnSubmit : true,//Form Navigation option
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
afterSubmit: refreshData, // Need to refresh the data in the table to reflect the primary key added to this table.
closeAfterAdd: true,
/*beforeShowForm: function() { //NOT WORKING
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}*/
});
}
});
//Toolbar button to edit a config
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('userdetail.table.button.edituser'),
title: jQuery.i18n.prop('userdetail.table.title.edit'),
buttonicon: 'fa-users',
onClickButton: function() {
var gr = jQuery("#userGrid").jqGrid('getGridParam', 'selrow');
if (gr != null)
jQuery("#userGrid").jqGrid('editGridRow', gr, {
//Edit options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
editCaption: jQuery.i18n.prop('userdetail.table.button.edituser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
reloadAfterSubmit: false,
closeOnEscape: true,
//checkOnUpdate:true,//Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40],//Form Navigation option
//checkOnSubmit : true,//Form Navigation option
closeAfterEdit: true,
afterSubmit: refreshData, // Need to refresh the data in the table to reflect the hashed password
/*beforeShowForm: function() { //NOT WORKING !!
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}*/
});
else {
$.jgrid.info_dialog.call(
this,
jQuery.i18n.prop('userdetail.table.dialog.message.caption'), // dialog title
jQuery.i18n.prop('userdetail.table.dialog.message.selectrow'), // text inside of dialog
jQuery.i18n.prop('application.common.button.close') // text in the button
);
}
}
});
//Toolbar button to delete a user
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('userdetail.table.button.deleteuser'),
title: jQuery.i18n.prop('userdetail.table.title.delete'),
buttonicon: 'fa-user-times',
onClickButton: function() {
var gr = jQuery("#userGrid").jqGrid('getGridParam', 'selrow');
if (gr != null)
jQuery("#userGrid").jqGrid('delGridRow', gr, {
reloadAfterSubmit: false,
closeOnEscape: true
});
else {
$.jgrid.info_dialog.call(
this,
jQuery.i18n.prop('userdetail.table.dialog.message.caption'), // dialog title
jQuery.i18n.prop('userdetail.table.dialog.message.selectrow'), // text inside of dialog
jQuery.i18n.prop('application.common.button.close') // text in the button
);
}
}
});
//Column chooser button in top toolbar
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('application.common.button.columns'),
title: jQuery.i18n.prop('userdetail.table.title.choosecolumn'),
buttonicon: 'fa-columns',
onClickButton: function() {
jQuery("#userGrid").jqGrid('columnChooser');
}
});
//Button to toggle toolbar search/filter option
jQuery("#userGrid").jqGrid('navButtonAdd', "#userGrid_toppager", {
caption: jQuery.i18n.prop('application.common.button.search'),
title: jQuery.i18n.prop('userdetail.table.title.search'),
buttonicon: 'fa-toggle-on',
onClickButton: function() {
userGrid[0].toggleToolbar();
}
});
//Refresh Button as auto refresh not exists for user detail
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('application.common.button.refresh'),
title: jQuery.i18n.prop('userdetail.table.title.refreshuserdetail'),
buttonicon: 'fa fa-cog fa-spin',
onClickButton: function() {
refreshData();
}
});
//Frozen columns - NOT needed as of now as no. of columns are limited.
//jQuery("#userGrid").jqGrid('setFrozenColumns');
//Grid resize
jQuery("#userGrid").jqGrid('gridResize', {
minWidth: 550,
maxWidth: 1300,
minHeight: 80,
maxHeight: 350
});
/**
* Function to refresh the data after a new row inserted in DB. If
* not then when we update the same row again, because of no primary
* key reflected in client side, a fresh row will be inserted. Also
* if we are refreshing the grid, then immediate delete of this row
* will fail because again primary key(i.e. id) not reflected in the
* client side
*
* NOT SURE IS THERE ANY OTHER BETTER WAY TO DO THIS !!!!
*/
function refreshData() {
jQuery("#userGrid").jqGrid("setGridParam", {
datatype: 'json',
url: 'list_user_detail',
page: 1
}).trigger("reloadGrid");
return [true, '']; //TO make sure that control goes back to jqGrid inbuild configs like closeafterAdd etc.
}
//Username Validation checks !!
function usernameCheck(value) {
if (checkLength(value, 6, 50) && checkRegexp(value, /^[a-z]([0-9a-z_.])+$/i)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.username'), ""];
}
}
//Password Validation checks !!
function passwordCheck(value) {
if (checkLength(value, 6, 60)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.password'), ""];
}
}
//Firstname & Lastname Validation checks !!
function onlyAblhabetCheck(value) {
if (checkLength(value, 1, 50) && checkRegexp(value, /^[a-z]([a-z ])+$/i)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.firstname'), ""];
}
}
//Email Validation checks !!
function emailCheck(value) {
if (checkLength(value, 6, 100) && checkRegexp(value, /^((([a-z]|\d|[!#$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.email'), ""];
}
}
//Birthday Validation checks !!
function birthdayCheck(value) {
var now = new Date();
if (value < now) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.dob'), ""];
}
}
/*Check length of particular field*/
function checkLength(o, min, max) {
if (o.length > max || o.length < min) {
//o.addClass("ui-state-error");
return false;
} else {
return true;
}
}
/*Check regex/format of particular field*/
function checkRegexp(o, regexp) {
if (!(regexp.test(o))) {
//o.addClass("ui-state-error");
return false;
} else {
return true;
}
}
});
附加图片 - 带有圆形和问号..！
添加一行代码即可解决您的主要问题：
$("#userGrid_toppager_right").hide();
它隐藏了顶部分页器的右侧部分，使整个顶部页面都用于工具栏。
此外，我建议您查看现有代码。如果您使用免费 jqGrid 的更多可能性，它可以减少两倍的时间并且可以简化。下面我只提一些建议。
- 开头的代码重载了
$.jgrid.from，后来在loadComplete中设置了jqGrid的lastSelected参数。免费的 jqGrid 不需要它。您可以删除代码并仅使用内置 lastSelectedData 选项而不是 lastSelected。自免费 jqGrid 4.8 以来存在选项 lastSelectedData（请参阅 the demo from README48）
- 您应该从所有
colModel 项中删除所有 index 属性。
colModel的代码有很多重复的地方。我建议您使用列模板。您可以定义一些本地对象并使用模板或在 $.jgrid.cmTemplate 下定义模板 $.jgrid.cmTemplate 的属性可以用作 template 属性 中的字符串值colModel。您可以在 jqGrid 的 cmTemplate 选项中包含一些常用属性（如 align: 'center' 或 editable: true）。该选项更改 colModel 属性的默认值，您可以从每个 colModel 项中删除重复项。我建议您阅读 the old answer and the pull request.- 您在代码中多次使用
jQuery("#userGrid") 和 jQuery.i18n.prop。您应该了解它是将在您的代码中每次 计算 的表达式。引入 var $grid = jQuery("#userGrid"), localeProp = jQuery.i18n.prop; 之类的变量并在代码中使用这些变量会很实用。函数 refreshData 和所有 onClickButton 可以使用 jQuery(this) 而不是 jQuery("#userGrid").
- 可以从根本上简化使用寻呼机和工具栏的工作。首先，您可以将
pager: "#userPager" 替换为 pager: true 并从 HTML 标记中删除 <div id="userPager"></div>。免费的 jqGrid 将为页面创建 div，就像它为顶级寻呼机创建 div 一样。
- 您可以将
navGrid 的长调用替换为以下内容：
jQuery("#userGrid").jqGrid('navGrid', '#userGrid_toppager', {
//General options
edit: false,
add: false,
del: false,
search: false,
view: false,
refresh: false
});
只为顶部寻呼机创建导航栏。
- 你使用
$("#...", userGrid_toppager).remove();的代码块可以用一行代码代替
$("#userGrid_toppager_center,#userGrid_toppager_right").hide();
它隐藏了顶部分页器的右侧和中间部分。
- 我建议您阅读 the wiki article 并使用新样式的表单编辑选项和
navGrid。您可以将 navOptions、formEditing、formDeleting、searching 定义为 jqGrid 参数 ，这将指定来自 navGrid 的默认值, editGridRow 等等。如果可以减少和简化代码，使其更具可读性和易于维护。
我正在使用最新的免费 jqgrid 4.9.2
我的工具栏（toppager）按钮转到下一行，尽管在网格宽度中加载了 space。请找到随附的屏幕截图。有什么原因吗？
我也尝试了下面的 CSS 代码，但没有成功；
/*Toolbar customization*/
.ui-jqgrid .ui-jqgrid-toppager {
width: auto !important;/*1200 px*/
}
完整的 jqGrid 脚本 -
$(document).ready(
function() {
/**
* User code tab
*/
var userGrid = $("#userGrid"),
oldFrom = $.jgrid.from,
lastSelected;
var oldFrom = $.jgrid.from;
var lastSelected;
$.jgrid.from = function(source, initalQuery) {
var result = oldFrom.call(this, source, initalQuery),
old_select = result.select;
result.select = function(f) {
lastSelected = old_select.call(this, f);
return lastSelected;
};
return result;
};
$("#userGrid").jqGrid({
//sortable: true,//Columns reordering need to be disabled for frozen column working
//scroll: 1,//true scrolling rows - paging is not working when we enable scrolling. give fixed height then this will go good.. :)
url: 'list_user_detail',
datatype: 'json',
colNames: [jQuery.i18n.prop('userdetail.table.column.id'),
jQuery.i18n.prop('userdetail.table.column.username'),
jQuery.i18n.prop('userdetail.table.column.password'),
jQuery.i18n.prop('userdetail.table.column.active'),
jQuery.i18n.prop('userdetail.table.column.firstname'),
jQuery.i18n.prop('userdetail.table.column.lastname'),
jQuery.i18n.prop('userdetail.table.column.department'),
jQuery.i18n.prop('userdetail.table.column.email'),
jQuery.i18n.prop('userdetail.table.column.dob'),
jQuery.i18n.prop('userdetail.table.column.country'),
jQuery.i18n.prop('userdetail.table.column.role'),
""
],
colModel: [{
name: 'id',
index: 'id',
width: 80,
editable: true,
sortable: true,
align: 'center',
sorttype: 'integer',
searchoptions: {
sopt: ['eq', 'ne', 'le', 'lt', 'gt', 'ge'] //for filter functionality - specify the search options
},
editoptions: {
readonly: true,
size: 5
},
formoptions: {
rowpos: 1,
colpos: 1
}
}, {
name: "username",
index: "username",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
frozen: true,
editoptions: {
size: 30
},
editrules: {
required: true,
custom: true,
custom_func: usernameCheck
},
formoptions: {
label: jQuery.i18n.prop('userdetail.table.form.label.username')
}
}, {
name: "password",
index: "password",
width: 100,
align: 'center',
sortable: false,
editable: true,
hidden: true,
hidedlg: true, //to remove this column from column chooser as well
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
frozen: true,
editoptions: {
size: 30
},
//editrules are set as part of form edit validation so we can mark required for all mandatory fields
editrules: {
required: true,
custom: true,
edithidden: true,
custom_func: passwordCheck
},
formoptions: {
label: jQuery.i18n.prop('userdetail.table.form.label.password')
}
}, {
name: "active",
index: "active",
width: 80,
sortable: true,
align: 'center',
stype: "select", //if stype is enabled then sopt will not work - stype is needed only when search should have select option
editable: true,
edittype: "select",
formatter: "select",
editoptions: {
value: ":;1:Yes;0:No" //Default 0
},
cellattr: function(rowId, val, rawObject) {
if (val == 1) {
return " class='ui-state-useractive'";
} else if (val == 0) {
return " class='ui-state-userinactive'";
}
},
formoptions: {
//rowpos: 3,
//colpos: 1
}
}, {
name: "firstname",
index: "firstname",
width: 120,
align: 'center',
sortable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editable: true,
editoptions: {
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "lastname",
index: "lastname",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "department",
index: "department",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "email",
index: "email",
align: 'center',
width: 220,
sortable: false,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
size: 30
},
editrules: {
required: true,
custom: true,
custom_func: emailCheck
},
formoptions: {
label: jQuery.i18n.prop('userdetail.table.form.label.email')
}
}, {
name: "birthday",
index: "birthday",
width: 120,
sortable: true,
align: 'center',
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en'],
dataInit: function(e) {
$(e).datepicker({
dateFormat: 'dd-mm-yy',
maxDate: new Date()
});
}
}, //for Search/Filter functionality - specify the search options
editable: true,
editoptions: {
size: 10,
dataInit: function(e) {
$(e).datepicker({
dateFormat: 'dd-mm-yy',
maxDate: new Date()
});
}
},
formoptions: {
//rowpos: 3,
//colpos: 2
}
}, {
name: "country",
index: "country",
width: 120,
align: 'center',
sortable: true,
editable: true,
searchoptions: {
sopt: ['cn', 'eq', 'ne', 'bw', 'bn', 'nc', 'ew', 'en']
}, //for Search/Filter functionality - specify the search options
editoptions: {
edittype: 'text',
size: 30
},
editrules: {
required: false,
custom: true,
custom_func: onlyAblhabetCheck
}
}, {
name: "role",
index: "role",
width: 100,
sortable: true,
align: 'center',
stype: "select", //if stype is enabled then sopt will not work - stype is needed only when search should have select option
//searchoptions: {sopt:['cn','eq','ne','bw','bn','nc','ew','en']},//for Search/Filter functionality - specify the search options
editable: true,
edittype: "select",
formatter: "select",
editoptions: {
value: ":;ADMIN:Admin;USER:User" //Default User
},
formoptions: {
//rowpos: 3,
//colpos: 1
}
}, {
name: "oldPassword",
index: "oldPassword",
width: 10,
sortable: false,
editable: true,
hidden: true,
hidedlg: true //to remove this column from column chooser as well
}],
pager: "#userPager",
iconSet: "fontAwesome",
rowNum: 8,
rownumbers: false, //Row numbers
rowList: [8, 12, 20],
height: 'auto',
width: 'auto', //Autowidth
loadonce: true,
sortable: true,
sortname: 'No',
sortorder: 'desc',
viewrecords: true,
shrinkToFit: false,
ignoreCase: true, //Case insensitive search
gridview: true, //renders data more faster??
//viewsortcols: true,//easily show what columns are sortable - With this sorting not working.
caption: jQuery.i18n.prop('userdetail.table.caption'),
editurl: "edit_user_detail",
multiselect: false,
toppager: true, //Toolbar option
cloneToTop: true, //Toolbar option
loadComplete: function() {
this.p.lastSelected = lastSelected; // set this.p.lastSelected - to find out selected data from filter..
}
});
// Navigator tab inside pager grid
jQuery("#userGrid").jqGrid('navGrid', '#userPager', {
//General options
edit: false,
add: false,
del: false,
search: false,
view: false,
refresh: false,
cloneToTop: true //Must for top tool bar - this will close all the pager items in top tool bar.
}, {
// edit options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
editCaption: jQuery.i18n.prop('userdetail.table.button.edituser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
reloadAfterSubmit: false,
closeOnEscape: true,
//checkOnUpdate:true, //Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40], //Form Navigation option
//checkOnSubmit : true,//Form Navigation option
closeAfterEdit: true,
afterSubmit: refreshData // Need to refresh the data in the table to reflect the hashed password back to this table.
}, {
//Add options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
reloadAfterSubmit: false,
closeAfterAdd: true,
//checkOnUpdate:true,//Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40],//Form Navigation option
//checkOnSubmit : true,//Form Navigation option
closeOnEscape: true,
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
afterSubmit: refreshData // Need to refresh the data in the table to reflect the primary key added to this table.
}, {
// del options
reloadAfterSubmit: false,
closeOnEscape: true
}, {
//Search options
multipleSearch: true,
multipleGroup: true
}, {
//View options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
viewCaption: jQuery.i18n.prop('userdetail.table.button.viewuser'),
closeOnEscape: true
});
/*Search/Filter toolbar*/
jQuery("#userGrid").jqGrid('filterToolbar', {
searchOperators: true,
searchOnEnter: false,
jqModal: false,
multipleSearch: true,
multipleGroup: true,
recreateFilter: true,
closeOnEscape: true,
overlay: 0,
stringResult: true
});
//Top Toolbar options & Buttons
//before adding any buttons remove all the items copied/cloned from the bottom pager
$(".ui-paging-info", userGrid_toppager).remove();
$("#add_userGrid_top", userGrid_toppager).remove(); //remove add icon from top pager
$("#edit_userGrid_top", userGrid_toppager).remove(); //remove edit icon from top pager
$("#del_userGrid_top", userGrid_toppager).remove(); //remove delete icon from top pager
$("#view_userGrid_top", userGrid_toppager).remove(); //remove view icon from top pager
$("#search_userGrid_top", userGrid_toppager).remove(); //remove search icon from top pager
$("#refresh_userGrid_top", userGrid_toppager).remove(); //remove refresh icon from top pager
$("#userGrid_toppager_center", userGrid_toppager).remove(); //remove center pager details from top pager
//Toolbar button to add a config
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('userdetail.table.button.adduser'),
title: jQuery.i18n.prop('userdetail.table.title.add'),
buttonicon: 'fa-user-plus',
onClickButton: function() {
jQuery("#userGrid").jqGrid('editGridRow', "new", {
//Add options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
addCaption: jQuery.i18n.prop('userdetail.table.button.adduser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
reloadAfterSubmit: false,
closeOnEscape: true,
//checkOnUpdate:true,//Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40],//Form Navigation option
//checkOnSubmit : true,//Form Navigation option
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
afterSubmit: refreshData, // Need to refresh the data in the table to reflect the primary key added to this table.
closeAfterAdd: true,
/*beforeShowForm: function() { //NOT WORKING
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}*/
});
}
});
//Toolbar button to edit a config
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('userdetail.table.button.edituser'),
title: jQuery.i18n.prop('userdetail.table.title.edit'),
buttonicon: 'fa-users',
onClickButton: function() {
var gr = jQuery("#userGrid").jqGrid('getGridParam', 'selrow');
if (gr != null)
jQuery("#userGrid").jqGrid('editGridRow', gr, {
//Edit options
height: 'auto',
width: 'auto',
top: 75,
left: 350,
modal: true,
editCaption: jQuery.i18n.prop('userdetail.table.button.edituser'),
processData: jQuery.i18n.prop('application.common.message.processing'),
recreateForm: true,
bottominfo: jQuery.i18n.prop('application.common.message.mandatoryfields'),
bSubmit: jQuery.i18n.prop('application.common.button.save'),
reloadAfterSubmit: false,
closeOnEscape: true,
//checkOnUpdate:true,//Form Navigation option
//savekey: [true,13], //Form Navigation option
//navkeys: [true,38,40],//Form Navigation option
//checkOnSubmit : true,//Form Navigation option
closeAfterEdit: true,
afterSubmit: refreshData, // Need to refresh the data in the table to reflect the hashed password
/*beforeShowForm: function() { //NOT WORKING !!
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}*/
});
else {
$.jgrid.info_dialog.call(
this,
jQuery.i18n.prop('userdetail.table.dialog.message.caption'), // dialog title
jQuery.i18n.prop('userdetail.table.dialog.message.selectrow'), // text inside of dialog
jQuery.i18n.prop('application.common.button.close') // text in the button
);
}
}
});
//Toolbar button to delete a user
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('userdetail.table.button.deleteuser'),
title: jQuery.i18n.prop('userdetail.table.title.delete'),
buttonicon: 'fa-user-times',
onClickButton: function() {
var gr = jQuery("#userGrid").jqGrid('getGridParam', 'selrow');
if (gr != null)
jQuery("#userGrid").jqGrid('delGridRow', gr, {
reloadAfterSubmit: false,
closeOnEscape: true
});
else {
$.jgrid.info_dialog.call(
this,
jQuery.i18n.prop('userdetail.table.dialog.message.caption'), // dialog title
jQuery.i18n.prop('userdetail.table.dialog.message.selectrow'), // text inside of dialog
jQuery.i18n.prop('application.common.button.close') // text in the button
);
}
}
});
//Column chooser button in top toolbar
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('application.common.button.columns'),
title: jQuery.i18n.prop('userdetail.table.title.choosecolumn'),
buttonicon: 'fa-columns',
onClickButton: function() {
jQuery("#userGrid").jqGrid('columnChooser');
}
});
//Button to toggle toolbar search/filter option
jQuery("#userGrid").jqGrid('navButtonAdd', "#userGrid_toppager", {
caption: jQuery.i18n.prop('application.common.button.search'),
title: jQuery.i18n.prop('userdetail.table.title.search'),
buttonicon: 'fa-toggle-on',
onClickButton: function() {
userGrid[0].toggleToolbar();
}
});
//Refresh Button as auto refresh not exists for user detail
jQuery("#userGrid").jqGrid('navButtonAdd', '#userGrid_toppager', {
caption: jQuery.i18n.prop('application.common.button.refresh'),
title: jQuery.i18n.prop('userdetail.table.title.refreshuserdetail'),
buttonicon: 'fa fa-cog fa-spin',
onClickButton: function() {
refreshData();
}
});
//Frozen columns - NOT needed as of now as no. of columns are limited.
//jQuery("#userGrid").jqGrid('setFrozenColumns');
//Grid resize
jQuery("#userGrid").jqGrid('gridResize', {
minWidth: 550,
maxWidth: 1300,
minHeight: 80,
maxHeight: 350
});
/**
* Function to refresh the data after a new row inserted in DB. If
* not then when we update the same row again, because of no primary
* key reflected in client side, a fresh row will be inserted. Also
* if we are refreshing the grid, then immediate delete of this row
* will fail because again primary key(i.e. id) not reflected in the
* client side
*
* NOT SURE IS THERE ANY OTHER BETTER WAY TO DO THIS !!!!
*/
function refreshData() {
jQuery("#userGrid").jqGrid("setGridParam", {
datatype: 'json',
url: 'list_user_detail',
page: 1
}).trigger("reloadGrid");
return [true, '']; //TO make sure that control goes back to jqGrid inbuild configs like closeafterAdd etc.
}
//Username Validation checks !!
function usernameCheck(value) {
if (checkLength(value, 6, 50) && checkRegexp(value, /^[a-z]([0-9a-z_.])+$/i)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.username'), ""];
}
}
//Password Validation checks !!
function passwordCheck(value) {
if (checkLength(value, 6, 60)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.password'), ""];
}
}
//Firstname & Lastname Validation checks !!
function onlyAblhabetCheck(value) {
if (checkLength(value, 1, 50) && checkRegexp(value, /^[a-z]([a-z ])+$/i)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.firstname'), ""];
}
}
//Email Validation checks !!
function emailCheck(value) {
if (checkLength(value, 6, 100) && checkRegexp(value, /^((([a-z]|\d|[!#$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i)) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.email'), ""];
}
}
//Birthday Validation checks !!
function birthdayCheck(value) {
var now = new Date();
if (value < now) {
return [true, "", ""];
} else {
return [false, jQuery.i18n.prop('userdetail.validation.message.dob'), ""];
}
}
/*Check length of particular field*/
function checkLength(o, min, max) {
if (o.length > max || o.length < min) {
//o.addClass("ui-state-error");
return false;
} else {
return true;
}
}
/*Check regex/format of particular field*/
function checkRegexp(o, regexp) {
if (!(regexp.test(o))) {
//o.addClass("ui-state-error");
return false;
} else {
return true;
}
}
});
附加图片 - 带有圆形和问号..！
添加一行代码即可解决您的主要问题：
$("#userGrid_toppager_right").hide();
它隐藏了顶部分页器的右侧部分，使整个顶部页面都用于工具栏。
此外，我建议您查看现有代码。如果您使用免费 jqGrid 的更多可能性，它可以减少两倍的时间并且可以简化。下面我只提一些建议。
- 开头的代码重载了
$.jgrid.from，后来在loadComplete中设置了jqGrid的lastSelected参数。免费的 jqGrid 不需要它。您可以删除代码并仅使用内置lastSelectedData选项而不是lastSelected。自免费 jqGrid 4.8 以来存在选项lastSelectedData（请参阅 the demo from README48） - 您应该从所有
colModel项中删除所有index属性。 colModel的代码有很多重复的地方。我建议您使用列模板。您可以定义一些本地对象并使用模板或在$.jgrid.cmTemplate下定义模板$.jgrid.cmTemplate的属性可以用作template属性 中的字符串值colModel。您可以在 jqGrid 的cmTemplate选项中包含一些常用属性（如align: 'center'或editable: true）。该选项更改colModel属性的默认值，您可以从每个colModel项中删除重复项。我建议您阅读 the old answer and the pull request.- 您在代码中多次使用
jQuery("#userGrid")和jQuery.i18n.prop。您应该了解它是将在您的代码中每次 计算 的表达式。引入var $grid = jQuery("#userGrid"), localeProp = jQuery.i18n.prop;之类的变量并在代码中使用这些变量会很实用。函数refreshData和所有onClickButton可以使用jQuery(this)而不是jQuery("#userGrid"). - 可以从根本上简化使用寻呼机和工具栏的工作。首先，您可以将
pager: "#userPager"替换为pager: true并从 HTML 标记中删除<div id="userPager"></div>。免费的 jqGrid 将为页面创建 div，就像它为顶级寻呼机创建 div 一样。 - 您可以将
navGrid的长调用替换为以下内容：
jQuery("#userGrid").jqGrid('navGrid', '#userGrid_toppager', {
//General options
edit: false,
add: false,
del: false,
search: false,
view: false,
refresh: false
});
只为顶部寻呼机创建导航栏。
- 你使用
$("#...", userGrid_toppager).remove();的代码块可以用一行代码代替
$("#userGrid_toppager_center,#userGrid_toppager_right").hide();
它隐藏了顶部分页器的右侧和中间部分。
- 我建议您阅读 the wiki article 并使用新样式的表单编辑选项和
navGrid。您可以将navOptions、formEditing、formDeleting、searching定义为 jqGrid 参数 ，这将指定来自navGrid的默认值,editGridRow等等。如果可以减少和简化代码，使其更具可读性和易于维护。