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部件 User control wrapped in a web part

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

添加到工具栏的自定义“导出”按钮会重复
寻呼机（m的第n页）显示为左对齐

您可以在以下屏幕截图中看到此行为 User control inside another user control

有什么建议吗？

Answer 1

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

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

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

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

1 个答案: