jqgrid 导航栏无法正确呈现答案

【问题标题】：jqgrid navigation bar not rendering correctlyjqgrid 导航栏无法正确呈现
【发布时间】：2011-05-17 06:56:27
【问题描述】：

我的一些 jqGrid 在导航栏上有一个奇怪的行为。
在其中一些上，我使用默认的“搜索”和“刷新”按钮，而在这些按钮上，导航区域向左浮动，出现在这些按钮旁边（不应该居中）。

最大的问题发生在我向搜索按钮“搜索”添加文本时。这使得按钮边距被错误地计算，使得霍伯效果边框比实际按钮宽度短。

但就像我说的那样，这只发生在某些情况下，我无法弄清楚正常工作和不正常工作之间的区别。这不是浏览器问题，因为它在所有浏览器中都会发生。

这是一个屏幕截图（注意带有焦点的搜索按钮和导航控件的位置！）：

以前有人遇到过这个问题吗？
这是我的配置 os 有这个问题的网格：

$('#ProductBrandListGrid').jqGrid({
        url: '<%= ResolveUrl("~/Controls/ProductsControls/Controllers/ProductBrandController.ashx?method=GridDataList") %>',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Name', 'Description', 'Actions'],
        colModel: [
    { name: 'Name', index: 'Name', width: 100, align: 'left', resizable: true, sortable: true, searchoptions: { sopt: ['cn']} },
    { name: 'Description', index: 'Description', align: 'left', resizable: true, sortable: true, searchoptions: { sopt: ['cn']} },
    { name: 'act', index: 'act', width: 25, sortable: false, search: false },
    ],
        pager: $('#ProductBrandListGridPager'),
        rowNum: 15,
        rowList: [10, 15, 20, 30, 50, 100],
        sortname: 'Name',
        sortorder: 'asc',
        viewrecords: true,
        imgpath: '',
        caption: '',
        width: 200,
        height: 400,
        gridComplete: function () {
            var ids = jQuery("#ProductBrandListGrid").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];

                ce2 = "<input type='button' value='details' onclick='ProductBrandItemOpen(\"" + cl + "\")' />";

                $("#ProductBrandListGrid").setRowData(ids[i], { act: ce2 });
            }
        }
    });

    /* Add this line to show search boxes on the header */
    $('#ProductBrandListGrid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });

    /* Add this line to allow advanced search using the toolbar button */
    $("#ProductBrandListGrid").jqGrid('navGrid', "#ProductBrandListGridPager", { search: true, edit: false, add: false, del: false, searchtext:"Search" });

谢谢，亚历克斯

【问题讨论】：

按钮的宽度可能是固定的。右键单击它并“检查元素”，看看css是否是固定宽度
您提到的所有内容都是 css [presentation] 问题，与您的 jqGrid 关系不大
哦，你为什么使用<input ... onclick="..."... />？属性？这是不好的做法，你正在击败 jquerys 任务 lool :)
@Ariel：我没有为按钮指定任何宽度，除了 jqGrid 和 JQueryUI Smoothness 之外，我没有在该页面上定义任何其他 CSS。 @Val(1)：是的，但我没有在上面设置任何样式，即使您忘记了按钮问题，为什么导航控件会向左浮动？ @Val(2)：我的错……我保证我会把它改成代表:)
@AlexCode：从您发布的图片中可以看出，网格的宽度超过了 200px。所以你在某个地方设置了网格宽度。如果您将 width 参数的较大值用作您当前使用的 200，您的问题将不会完全解决，但会减少。

标签： javascript jquery jquery-plugins jqgrid

【解决方案1】：

我今天遇到了这个问题，并通过“检查元素”注意到出于某种原因，我还没有弄清楚。当宽度大于 415 以及底部寻呼机上没有自定义按钮的网格时，甚至会发生这种情况。到目前为止，这似乎是相当随机的。发生此问题时，id = 'xxxpagername_left' 的 td 标记具有指定的特定宽度。在没有这个问题的网格上，'xxxpagername_left' 没有设置宽度。所以，快速解决这个问题：

var pagerName = $($grid).jqGrid('getGridParam', 'pager');
$(pagerName + '_left').css('width', 'auto');

我有一个在每个网格的默认 loadComplete 事件中触发的 ResizeGrid 方法；调整网格大小后，代码 sn-p 命中。

不幸的是，我无法将宽度设置为 500 或大于 415 的任何值。

【讨论】：

我实际上从未解决过这个问题，我只是破解了它。反正那个项目已经没了，但奇怪的是3年后问题仍然存在......
是的，这很奇怪，而且不容易复制。我想我会在这个线程中为下一个人添加另一个“解决方案”。
这对我来说也是如此，有没有其他解决方案，当宽度设置为空时仍然遇到这个问题。我需要 width: null 和 shrinkToFit: false 来调整大小，改变宽度有帮助，但我不能再正确调整大小，奇怪的问题。
@AlexCode 在您的 javascript 中，“_left”前面有一个空格，导致脚本无法正确触发，您可以编辑一下吗

【解决方案2】：

根据 Oleg 关于网格初始宽度的说法，我进行了一些测试。

正如我所说，我有其他网格在工具栏上具有自定义按钮并且行为不这样，但我找不到任何可能导致此问题的差异。

检查我的其他实现时，我发现这只发生在初始宽度较低的实现上。如果我将初始宽度设置为 500，它会正确居中并在 setGridWidth 上正确重新定位。我什至可以说幻数是 415。低于 415px 的初始宽度会导致这种情况……任何等于或高于 415px 的东西都会使 jqGrid 像预期的那样工作。这让我认为这是某种硬编码的最小宽度导致了这种窃听行为。

感谢奥列格的帮助。亚历克斯

【讨论】：