jqGrid的嵌入在一个自定义用户控件 [英] jqGrid embedded in a custom User Control
问题描述
我有一个使用的jqGrid一个简单的自定义用户控件。该控制是如以下code：
I have a simple custom user control that uses jqGrid. the control is as in the following code:
标记：
<div id="grid_container" runat="server">
<table id="umlt_grid" runat="server"></table>
<div id="umlt_grid_pager" runat="server"></div>
</div>
<div id="umlt_dialog" title="Umlt" style="display: none;" runat="server"></div>
脚本（ASCX文件中）
Script (inside the ascx file)
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//Initialize controls
var dialogID = $('#<%=umlt_dialog.ClientID %>');
var dlg = $(dialogID);
dlg.dialog({ autoOpen: false, modal: true, stack: true, resizable: false, position: 'center', width: 380, height: 260 });
//Load the Grid
var gridID = '#<%=umlt_grid.ClientID %>';
var pagerID = '#<%=umlt_grid_pager.ClientID %>';
var containerID = '#<%=grid_container.ClientID %>'
var gridWidth = GetAvailableSpaceBody( $(containerID).width() );
loadUmltGrid(gridID, pagerID, dlg, gridWidth);
});
</script>
的 loadUmltGrid 函数这是通过主网页加载专用的js文件中定义。在这里，它是：
The loadUmltGrid function is defined inside a dedicated js file which is loaded through the master page. Here it is:
function loadUmltGrid(gridID, pagerID, dialog, gridWidth) {
var grid = $(gridID);
var pager = $(pagerID);
grid.jqGrid({
url: GetBaseWSUrl() + 'UmltService.asmx/ListUmlts',
colNames: ['Code', 'Description', 'Note'],
colModel: [
{ name: 'Code', index: 'Code', width: 120, template: colTextTemplate },
{ name: 'Description', index: 'Description', width: 220, template: colTextTemplate },
{ name: 'Notes', index: 'Notes', width: 300, template: colTextTemplate }
],
jsonReader: {
id: "UmltID"
},
pager: pager,
sortname: 'Code',
sortorder: "asc",
height: '300',
gridview: true,
width: gridWidth,
autowidth: false,
shrinkToFit: true
}).jqGrid('navGrid', pagerID,
{ add: true, addtitle: 'Add UMLT',
edit: true, edittitle: 'Edit UMLT',
del: true, deltitle: 'Delete UMLT',
refresh: true, refreshtitle: 'Refresh data',
search: true, searchtitle: 'Advanced search filters',
addfunc: function () {
loadUmltDialog(GetBaseWSUrl() + 'UmltService.asmx/NewUmlt', "", dialog);
},
editfunc: function () {
var rowId = grid.jqGrid('getGridParam', 'selrow');
loadUmltDialog(GetBaseWSUrl() + 'UmltService.asmx/EditUmlt', rowId, dialog);
}
},
{ /*default settings for edit*/ },
{ /*default settings for add*/ },
{ mtype: "post", reloadAfterSubmit: false,
url: GetBaseWSUrl() + 'UmltService.asmx/DeleteUmlt',
resize: false, serializeDelData: function (postdata) { return JSON.stringify({ umltID: postdata.id }); },
afterSubmit: function (data, postdata) {
var result = $.parseJSON(data.responseText);
if (result.d.StatusResult === "OK") {
showInfoMessage(result.d.StatusResult, result.d.StatusDescription);
} else {
showErrorMessage("Error", result.d.StatusDescription);
}
return [true, ''];
}
},
{ closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, {}
).jqGrid('navSeparatorAdd', pagerID, {}).jqGrid('navButtonAdd', pagerID, {
caption: "", buttonicon: "ui-icon-extlink", position: "last", title: "Export to Excel",
onClickButton: function () {
window.open(GetCurrentSiteUrl() + '/_layouts/ExportExcel.aspx?View=UMLT');
}
});
}
我需要使用Web部件（的SharePoint），这里面的用户控制和其他控制里面，所以我只是简单地添加到我的项目的包装Web部件，其中包括另一内部控制。
I need to use this user control inside a Web Part (SharePoint) and inside another control so I simply added to my project a wrapper web part and included the control inside the other one.
一切似乎都为Web部件的工作，你可以从下面的截图中看到
Everything seems to work for the web part as you can see from the following screenshot
但是当我用它在另一个用户控件我遇到2奇怪的问题：
but when I use it inside another user control I am experiencing 2 strange problems:
- 自定义导出按钮添加到工具栏被复制
- 寻呼机（m的第n）被表现为左对齐
您可以在下面的截图看到此行为
You can see this behaviour in the following screenshot
任何建议？
推荐答案
您不包括主要功能 loadUmltGrid 定义网格的code。所以我尽量只猜测。
You don't included the code of the main function loadUmltGrid which defines your grid. So I try just to guess.
通常从导航工具栏自定义按钮来与尊重 navButtonAdd 的方法。标准按钮来调用 navGrid 的。有多个自定义按钮的问题的一个通常如果code里面添加的按钮将执行更象一次。您只需插入警报的 navButtonAdd ，我想你会看到从警报<消息STRONG>两次。该 navGrid 有一个内部的控制。如果该方法将在第二次对同一寻呼机被称为它立即返回。因此，有没有标准的按键事件的重复对应code运行多次。
Typically the custom buttons from the navigator toolbar come with respect of navButtonAdd method of jqGrid. The standard buttons come by calling of the navGrid. The problem with multiple custom buttons one have typically if the code which add the buttons will be executed more as one time. You can just insert alert before the call of navButtonAdd and I suppose that you will see the message from the alert twice. The navGrid has an internal control. If the method will be called at the second time for the same pager it returns immediately. So have no duplicates of the standard buttons event the corresponding code runs multiple times.
与寻呼机的位置上的第二个问题，如果你使用宽度的jqGrid的参数的一些小值的开头，再后来增加相对于电网的宽度通常存在
The second problem with position of the pager exists typically if you use some small value of the width parameter of jqGrid at the beginning and then later increase the grid width with respect of setGridWidth. I recommend you, before writing of any code which change the position of the middle part of the pager, to increase the initial value of the grid width which you use at the grid initialization.
这篇关于jqGrid的嵌入在一个自定义用户控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
