jqGrid表单编辑器显示在顶部屏幕中间
在我的 jqGrid 中,除了表单编辑器之外,一切都工作正常。为什么表单编辑器显示在屏幕的顶部中间?
下面是我的代码。
$(document).ready(function () {
var briefallocationid = $("#BriefAllocationId").val();
var updateDialog = {
url: '<%= Url.Action("UpdateRegionAndCity", "BriefAllocation") %>'
, closeAfterAdd: true
, closeAfterEdit: true
, modal: false,
top:0,
onclickSubmit: function (params) {
var ajaxData = {};
var list = $("#RegionAndCity");
var selectedRow = list.getGridParam("selrow");
rowData = list.getRowData(selectedRow);
ajaxData = { BriefAllocationId: briefallocationid };
return ajaxData;
}
};
$.jgrid.nav.addtext = "Add";
$.jgrid.nav.edittext = "Edit";
$.jgrid.nav.deltext = "Delete";
$.jgrid.edit.addCaption = "Add City";
$.jgrid.edit.editCaption = "Edit City";
$.jgrid.del.caption = "Delete City";
$.jgrid.del.msg = "Delete selected City?";
$("#RegionAndCity").jqGrid({
url: '/BriefAllocation/GetRegionAndCities/?briefId=' + briefallocationid,
datatype: 'json',
mtype: 'GET',
prmNames: {
briefId: briefallocationid
},
colNames: ['AllocatedRegionAndCitiesId', 'BriefAllocationId', 'LocationId', 'PlannerId', 'Region', 'Budget'],
colModel: [
{ name: 'AllocatedRegionAndCitiesId', index: 'AllocatedRegionAndCitiesId', width: 100, align: 'left', /* key: true,*/editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
{ name: 'BriefAllocationId', index: 'BriefAllocationId', width: 150, align: 'left', editable: false, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'LocationId', index: 'LocationId', width: 300, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'PlannerId', index: 'PlannerId', width: 150, align: 'left', editable: true, edittype: 'text', editrules: { required: false} },
{ name: 'Region', index: 'Region', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'Budget', index: 'Budget', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
],
pager: $('#listPager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'AllocatedRegionAndCitiesId',
sortorder: "asc",
viewrecords: true,
imgpath: '/scripts/themes/steel/images',
caption: '<b>Regions And Cities</b>',
ondblClickRow: function (rowid, iRow, iCol, e) {
$("#RegionAndCity").editGridRow(rowid, prmGridDialog);
}
}).navGrid('#listPager', { edit: true, add: true, del: true, refresh: true },
updateDialog,
updateDialog,
updateDialog);
});
</script>
还包括以下文件:
<link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/themes/grid.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="../../Scripts/js/jqModal.js" type="text/javascript"></script>
<script src="../../Scripts/js/jqDnR.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/grid.locale-en.js" type="text/javascript"></script>
该表声明为:
<div>
<table id ="RegionAndCity" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="listPager" class="scroll" style="text-align:center;"></div>
<div id="listPsetcols" class="scroll" style="text-align:center;"></div>
</div>
In my jqGrid everything works fine except for the form editor.. Why does the form editor display in top-middle of the screen?
Below is my code.
$(document).ready(function () {
var briefallocationid = $("#BriefAllocationId").val();
var updateDialog = {
url: '<%= Url.Action("UpdateRegionAndCity", "BriefAllocation") %>'
, closeAfterAdd: true
, closeAfterEdit: true
, modal: false,
top:0,
onclickSubmit: function (params) {
var ajaxData = {};
var list = $("#RegionAndCity");
var selectedRow = list.getGridParam("selrow");
rowData = list.getRowData(selectedRow);
ajaxData = { BriefAllocationId: briefallocationid };
return ajaxData;
}
};
$.jgrid.nav.addtext = "Add";
$.jgrid.nav.edittext = "Edit";
$.jgrid.nav.deltext = "Delete";
$.jgrid.edit.addCaption = "Add City";
$.jgrid.edit.editCaption = "Edit City";
$.jgrid.del.caption = "Delete City";
$.jgrid.del.msg = "Delete selected City?";
$("#RegionAndCity").jqGrid({
url: '/BriefAllocation/GetRegionAndCities/?briefId=' + briefallocationid,
datatype: 'json',
mtype: 'GET',
prmNames: {
briefId: briefallocationid
},
colNames: ['AllocatedRegionAndCitiesId', 'BriefAllocationId', 'LocationId', 'PlannerId', 'Region', 'Budget'],
colModel: [
{ name: 'AllocatedRegionAndCitiesId', index: 'AllocatedRegionAndCitiesId', width: 100, align: 'left', /* key: true,*/editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
{ name: 'BriefAllocationId', index: 'BriefAllocationId', width: 150, align: 'left', editable: false, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'LocationId', index: 'LocationId', width: 300, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'PlannerId', index: 'PlannerId', width: 150, align: 'left', editable: true, edittype: 'text', editrules: { required: false} },
{ name: 'Region', index: 'Region', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'Budget', index: 'Budget', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
],
pager: $('#listPager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'AllocatedRegionAndCitiesId',
sortorder: "asc",
viewrecords: true,
imgpath: '/scripts/themes/steel/images',
caption: '<b>Regions And Cities</b>',
ondblClickRow: function (rowid, iRow, iCol, e) {
$("#RegionAndCity").editGridRow(rowid, prmGridDialog);
}
}).navGrid('#listPager', { edit: true, add: true, del: true, refresh: true },
updateDialog,
updateDialog,
updateDialog);
});
</script>
Also included following files:
<link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/themes/grid.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="../../Scripts/js/jqModal.js" type="text/javascript"></script>
<script src="../../Scripts/js/jqDnR.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/grid.locale-en.js" type="text/javascript"></script>
The table is declared as:
<div>
<table id ="RegionAndCity" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="listPager" class="scroll" style="text-align:center;"></div>
<div id="listPsetcols" class="scroll" style="text-align:center;"></div>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这是我的错误。我没有包含
jqModal.css
。我必须更改其中的一项属性,即就是,
位置:绝对
。现在正在工作...
It was my mistake. I had not included
jqModal.css
. I had to change one property in it, thatis,
position : absolute
.It is working now...