2
Я использую 4.9.2jqgrid - toppager [значки панели инструментов] поставляется в нескольких строках
кнопки Моей панелей инструментов (toppager) последний свободный-jqgrid переходит к следующей строке, хотя нагрузки пространства там в ширине сетки. Пожалуйста, найдите прилагаемый скриншот. Любая причина ?
Я попробовал код 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;
}
}
});изображение прилагается - с круглым знаком & вопрос ..! 
Обложка значков панели инструментов требуется по дизайну. См. Статью [wiki article] (https://github.com/free-jqgrid/jqGrid/wiki/Redesign-of-the-structure-of-Navigator-Bar-of-the-pagers). Вы пишете о некоторых изображениях, но вы не включаете в текст никаких изображений. Было бы полезно, если бы вы включили код, который создает jqGrid. У какой 'width' есть каждый столбец в' colModel'? Используете ли вы параметр 'width' для jqGrid? Многие строки с '$ (" # ... ", userGrid_toppager) .remove();' выглядит очень странно. Почему вы не используете только опции jqGrid и 'navGrid' для удаления ненужных значков на панели инструментов. Лучше не создавать там – Oleg
Привет, Олег, infact Я искал ответ. К сожалению, я новичок в stackoverflow и не имею достаточного количества баллов для загрузки изображений :(Так что пришлось удалить изображение, чтобы опубликовать мой вопрос ... Могу ли я поделиться кодом через Github? – Sundar
Вы можете просто нажать кнопку «изменить» под своим вопросом и изменить текст. Вы можете включить код jqGrid. В Интернете есть много распространенных мест, где вы можете поместить изображение как минимум временное. может включать URL-адрес в текст вашего вопроса, и я бы отредактировал вопрос и включил изображение напрямую. – Oleg