jqGrid 嵌入在自定义用户控件中

Question

我有一个使用 jqGrid 的简单自定义用户控件。控件如下代码：

标记：

<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 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 文件中。这里是：

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 部件，并将该控件包含在另一个控件中。

从以下屏幕截图中可以看出，Web 部件似乎一切正常

但是当我在另一个用户控件中使用它时，我遇到了两个奇怪的问题：

1. 添加到工具栏的自定义“导出”按钮被复制
2. 寻呼机（第 n 页，共 m 页）显示为左对齐

您可以在以下屏幕截图中看到此行为

有什么建议吗？

Answer 1

您没有包含定义网格的主函数loadUmltGrid 的代码。所以我试着猜测。

导航器工具栏中的自定义按钮通常与 jqGrid 的 navButtonAdd 方法有关。标准按钮通过调用navGrid 来。如果添加按钮的代码将被多次执行，则通常会出现多个自定义按钮的问题。您可以在调用navButtonAdd 之前插入alert，我想您会看到来自警报的消息两次。 navGrid 有一个内部控制。如果将在第二次为同一个寻呼机调用该方法，它会立即返回。因此，对应的代码运行多次时，标准按钮事件没有重复。

如果您在开始时使用 jqGrid 的 width 参数的一些小值，然后随后增加 setGridWidth 的网格宽度，则通常存在寻呼机位置的第二个问题。我建议您在编写任何更改分页器中间部分位置的代码之前，增加您在网格初始化时使用的网格宽度的初始值。