如何设置jqgrid的错误对话框的位置？ [英] how to set the position of error dialog of jqgrid?
问题描述
我正在使用jqgrid而我的js cod是
i am using jqgrid and my js cod is
jQuery(document).ready(function () {
var grid = jQuery("#grid");
grid.jqGrid({
url: '/Admin/GetUserForJQGrid',
datatype: 'json',
mtype: 'Post',
cellsubmit: 'remote',
cellurl: '/Admin/GridSave',
//formatCell: emptyText,
colNames: ['Id', 'Privileges', 'First Name', 'Last Name', 'User Name', 'Password', 'Password Expiry', 'Type', 'Last Modified', 'Last Modified By', 'Created By', ''],
colModel: [
{ name: 'Id', index: 'Id', key: true, hidden: true, editrules: { edithidden: true } },
{ name: 'Privileges', index: 'Privileges', width: "130", resizable: false, editable: false, align: 'center', formatter: formatLink, classes: 'not-editable-cell' },
{ name: 'FirstName', index: 'FirstName', align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'LastName', index: 'LastName', align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'UserName', index: 'UserName', align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
{ name: 'Password', index: 'Password', align: "left", sorttype: 'text', resizable: true, editable: false, editrules: { required: true }, classes: 'not-editable-cell' },
{
name: 'Password_Expiry', index: 'Password_Expiry', align: "left", resizable: true, editable: true, editoptions: {
size: 20, dataInit: function (el) {
jQuery(el).datepicker({
dateFormat: 'yy-mm-dd', onSelect: function (dateText, inst) {
jQuery('input.hasDatepicker').removeClass("hasDatepicker")
return true;
}
});
}
}
},
{
name: 'Type', width: "100", index: 'Type', sorttype: 'text', align: "left", resizable: true, editable: true, editrules: { required: true }, edittype: 'select', editoptions: {
value: {
'Normal': 'Normal',
'Sales': 'Sales',
'Admin': 'Admin',
'SuperAdmin': 'SuperAdmin'
},
dataEvents: [
{
type: 'change',
fn: function (e) {
var row = jQuery(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
jQuery("#grid").saveRow(rowId, false, 'clientArray');
}
}
]
}
},
{ name: 'Modified', index: 'Modified', sorttype: 'date', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'ModifiedBy', index: 'ModifiedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'CreatedBy', index: 'CreatedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
{ name: 'Delete', index: 'Delete', width: 25, resizable: false, align: 'center', classes: 'not-editable-cell' }
],
shrinkToFit: true,
delete: true,
pager: '#pager',
height: '100%',
width: "703",
**afterSubmitCell: function (serverStatus, rowid, cellname, value, iRow, iCol) {
var response = serverStatus.responseText;
var rst = 'false';
debugger;
if (response == rst) {
debugger;
return [false, "User Name Already Exist"];
}
else {
return [true, ""];
}
},**
rowNum: 10,
rowList: [10, 20, 50, 100],
sortable: true,
loadonce: false,
ignoreCase: true,
caption: 'Administration',
search: false,
del: true,
cellEdit: true,
hidegrid: false,
viewrecords: true,
gridComplete: function () {
var ids = grid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var isDeleted = grid.jqGrid('getCell', ids[i], 'Delete');
if (isDeleted != 'true') {
grid.jqGrid('setCell', ids[i], 'Delete', '<a href="#" onclick="deleteUser(' + ids[i] + ');"><img src="/Images/delete.png" alt="Delete Row" /></a>');
}
else {
grid.jqGrid('setCell', ids[i], 'Delete', ' ');
}
}
}
}
);
请参阅 aftercellsubmit 我将返回错误值和错误消息。此对话框出现在页面左侧（错误的位置）我需要在jqgrid上使用此对话框。任何人都可以帮助我....提前感谢:)我也想改变那个对话框的外观，我试过 $（＃info_id）。css（'background-image'， 'url（/ Scripts / jqueryui / smoothness / images / ui-bg_flat_75_ffffff_40x100.png）'）; 在我的页面中的document.ready事件中，但它无效。
see on the aftercellsubmit i am returning the false value and error message. this dialog box appears at the left of page (wrong position) i need this dialog box on the jqgrid. can anybody help me.... thanks in advance :) and i also want to change the look of that dialog, i have tried $("#info_id").css('background-image', 'url("/Scripts/jqueryui/smoothness/images/ui-bg_flat_75_ffffff_40x100.png")'); in my page in document.ready event but its not working.
推荐答案
最简单的方法是添加代码，如
The simplest way would be to add the code like
setTimeout(function () {
$("#info_dialog").css({
left: "30px", // new left position of ERROR dialog
top: "10px" // new top position of ERROR dialog
});
}, 50);
在之后@SubmitCell 回调（在某个地方之前） return statement）。 的回调和 jQuery UI Position 方法为您提供了在编辑行下移动错误对话框的简单方法。您只需将上面代码中使用的 rowid 参数afterSubmitCell css 替换为 position ：
inside of afterSubmitCell callback (somewhere before the return statement). The rowid parameter of afterSubmitCell callback and jQuery UI Position method provides you simple way to move error dialog under the row which are editing. You need just replace css used in the code above to position:
setTimeout(function () {
$("#info_dialog").position({
of: $("#" + $.jgrid.jqID(rowid)),
my: "top",
at: "bottom"
});
});
我没有测试过代码，但我希望它能够正常运行。
I didn't tested the code, but I hope it will work.
更新： The虚拟演示（服务器上没有任何真正保存数据的代码）演示了 $（＃info_dialog）的使用情况。位置（{...}）。只需尝试编辑某个单元格，然后按 Enter 保存数据。您将在编辑的行后直接看到错误消息。
UPDATED: The dummy demo (without any code on the server which really saves the data) demonstrates the usage of $("#info_dialog").position({...}). Just try to edit some cell and press Enter to save the data. You will see error message directly after the line which you edited.
这篇关于如何设置jqgrid的错误对话框的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
