jqgrid导航栏无法正确呈现 [英] jqgrid navigation bar not rendering correctly

问题描述

我的某些jqGrids在导航栏上有一个奇怪的行为.
在其中一些按钮上，我使用默认的搜索"和刷新"按钮，在这些按钮上，导航区域左侧浮动，出现在这些按钮旁边(不应该居中).

当我在搜索按钮搜索"中添加文字时，会出现最大的问题.这会使按钮边距被错误地计算，从而使钓刀效果边框短于实际按钮的宽度.

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

Some of my jqGrids have a strange behavior on the navigation bar.
On some of them I use the default Search and Refresh buttons and on there ones the navigation area floats left appearing right next to these buttons (not centered as it should).

The biggest problem happens when I add text to the search button "Search". This makes the button margins being wrongly calculated making the hober effect border shorter than the actual button width.

But like I said, this only happens in some cases and I can't figure out the difference between the ones working correctly and the ones that don't. This is not a browser issue as it happens the same in all browsers.

以下是屏幕截图(请注意具有焦点和导航控件位置的搜索按钮！):

有人遇到过这个问题吗?
这是我的配置或有此问题的网格:

Heres's a screenshot (notice the search button with focus and the navigation controls position!):

Have anyone faced this problem before?
This is my configuration os a grid that have this problem:

$('#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" });

谢谢， 亚历克斯

推荐答案

基于Oleg关于网格初始宽度的说法，我去做了一些测试.

Based on what Oleg said about the grid's initial width I went to do some tests.

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

As I said, I have other grids that have custom buttons on the toolbar and don't behave like this but I couldn't find any differences that could cause this problem.

在检查我的其他实现时，我看到这仅发生在初始宽度较小的实现上.如果我将初始宽度设置为500，它将正确居中并在setGridWidth上正确地重新定位自身. 我什至可以说魔术数字是415.波纹管初始宽度415px会导致此问题……等于或大于415px的任何值都会使jqGrid发挥预期的作用.这使我认为这是导致这种错误行为的某种硬编码的最小宽度.

Inspecting my other implementations I saw that this only happens on the ones with a lower initial width. If I set the initial width to 500 it centers correctly and repositions itself correctly on setGridWidth. I can even tell that the magic number is 415. Initial widths bellow 415px will cause this... anything equal or above 415px will make jqGrid act as expected. This leds me to think that this is some sort of hard-coded minimal width that is causing this bugging behavior.

感谢Oleg的帮助. 亚历克斯

Thanks for the help Oleg. Alex

这篇关于jqgrid导航栏无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！