滚动出现在JqGrid列标题中

时间:2014-09-28 09:58:57

标签: jquery jqgrid

这是我的 JqGrid Ajax功能:

function GetData() {
    $.ajax({
        type: "POST",
        url: "../Downloads.aspx/GetDownLoadData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        //async: false,
        success: function (response) {
            debugger;
            var item = response.d;
            if (item != null && item != "" && typeof (item) != 'undefined') {

                $("#list").jqGrid({
                    data: JSON.parse(item),
                    datatype: 'local',
                    colNames: ['DownLoad Name', 'Format','Size','Link',''],
                    colModel: [
                    { name: 'DownLoadName', index: 'DownLoadName', width: 200, align: 'left', stype: 'text', editable: false },
                    { name: 'Format', index: 'Format', width: 150, align: 'left', stype: 'text', editable: false },
                    { name: 'Size', index: 'Size', width: 150, align: 'left', stype: 'text', editable: false },
                    { name: 'Link', index: 'Link', width: 150, align: 'left', stype: 'text', editable: false },
                    { name: 'Id', index: 'Id', width: 145, align: 'left', stype: 'text', editable: false,hidden:true }
                    ],
                    rowNum: 5,
                    height:'auto',
                    altRows: true,
                    hoverrows:true,
                    rowList: [5, 10, 20],
                    pager: '#pager',
                    sortname: 'Id',
                    sortorder: 'asc',
                    caption: "DownLoad Data",
                    viewrecords: true,
                    loadonce: true,
                    gridview: true,
                    width:995,
                       loadError: function (xhr) {
                        alert("The Status code:" + xhr.status + " Message:" + xhr.statusText);//Getting reponse 200 ok
                    }
                });
            }
            else {
                var result = '<tr align="left"><td>' + "No Record" + '</td></tr>';
                $('#list').empty().append(result);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("error");
        }
    });
}

它给了我完美的输出,但在输出中,为什么滚动条出现在列标题中?我无法弄明白。请帮助我。谢谢。 这是输出: enter image description here

请在Link栏中查看附件中的图片和圈子。

1 个答案:

答案 0 :(得分:0)

我建议您使用以下附加CSS规则来解决问题:

.ui-jqgrid-hdiv { overflow-y: hidden; }

.ui-jqgrid .ui-jqgrid-hdiv { overflow-y: hidden; }

jqGrid仅在overflow-x: hidden;上设置.ui-jqgrid-hdiv(请参阅here)。因此,取决于使用的其他CSS规则,可以包括垂直滚动条。上面的CSS角色将其删除。