Question

我在jqgrid（v4.4.4.4）列标题中有一个按钮和列名，我为列标题添加了样式。按钮和列名称未完全显示，而是部分显示

此处列标题值不正确。不知道哪里会出错。请帮我实现显示完整的标题。谢谢。

更新：版本：v4.4.4。我的代码，

<input id="input" type="number" max="22">

从/ Home / programGrid返回的JSON数据，

    $(function () {
    var Role = $("#hiddenRole").val();
    $("#ProgramListGird").jqGrid({
        url: '/Home/programGrid',
        datatype: "json",
        contentType: "application/json; charset-utf-8",
        mtype: 'Get',
        colNames: ['id', 'Program', 'Unit', 'Active?', '<input type="button" style="display: inline-block; padding: 3px 12px;margin: 0px 0px;font-size: 12px;font-weight: normal;text-align: center;white-space: nowrap;border-radius: 4px;overflow:visible;border:1px solid #444444;color: #000;box-shadow: 2px 3px 1px 0px #cccccc;" id="addNewProgramId" value="Add New Program" onclick= "addNewProgram()"/>'],
        colModel: [
            { key: true, name: 'id', index: 'id', hidden: true },
            {
                name: 'ProgramDesc', index: 'ProgramDesc', editable: true
                ,editrules: { custom: true, custom_func: programDescValidation
                }
            },
            {
                name: 'UnitID', index: 'UnitID', editable: true, edittype: 'select',
                formatter: 'select', editoptions: { value: "Unit1:Unit1 ; Unit2/3:Unit2/3" },
                editrules: { custom: true, custom_func: dupicateRecordValidation
                }
            },
            {
                name: 'InActive', index: 'InActive', editable: true, formatter: 'select',
                stype: 'select', edittype: 'select', editoptions: { value: "false:No;true:Yes" }
            },
            {             

                sortable: false, align: "center", class: "button",
                formatter: function (cellvalue, options, rowObj) {                   
                    var cBtn = '<input type="button" style="display: inline-block; padding: 3px 12px;margin: 0px 0px;font-size: 12px;font-weight: normal;text-align: center;white-space: nowrap;border-radius: 4px;overflow:visible;border:1px solid #444444;color: #000;box-shadow: 2px 3px 1px 0px #cccccc;" value="Save Changes" onclick= "saveChanges(' + "'" + rowObj.id + "'" + '\)"/>'
                        return cBtn;

                }
            }
        ],
        pager: jQuery('#pager'),
        rowNum: 3,
        rowList: [3, 6, 9, 12],
        height: '100%',
        //width: outerwidth,
        //shrinkToFit: false,
        scrollerbar: true,
        viewrecords: true,
        caption: 'Program' + " " + Role,
        //loadonce: true,
        emptyrecords: 'No records to display',
        //editurl: '/Home/programGridSave',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            id: "0"
        },
        hidegrid: false,
        autowidth: true,
        multiselect: false,       
        onSelectRow: function (id) {
            rowSelect(id);
        },

    }).navGrid('#pager', { edit: false, add: false, del: false, search: false, cancel: false, reload: false, refresh: false }),
    $("#ProgramListGird").jqGrid('inlineNav', '#pager',
        {
            edit: false, add: false, save: false, cancel: false, reload: false, refresh: false, restoreAfterSelect: false, 
        });
});

}

Answer 1

您使用的复古版本4.4.4，已有4年历史。您的问题主要是关于CSS问题。你使用哪个版本的jQuery UI和jQuery？哪个是您的主要网络浏览器？ jqGrid 4.4.4是在Chrome 24，Firefox 18，IE9（IE8仅在Windows 8上）发布的。我们现在有Chrome 55，Firefox 50.1，Microsoft Edge 38，IE11。您是否相信在使用现代Web浏览器的情况下使用这种旧版本的jqGrid是个好主意？我会严格建议你更新jqGrid 4.4.4以免费jqGrid 4.13.5（或4.13.6，将在下一天发布）。你将没有遇到问题，你试图解决。

你真的无法将jqGrid 4.4.4升级到更新的版本，那么你可以通过覆盖一些CSS规则来修复旧的ui.jqgrid.css：

.ui-jqgrid .ui-jqgrid-htable th div { height: auto; }
.ui-jqgrid .ui-jqgrid-htable th { height: auto; }

您可以在<style> ... </style>之后添加<link rel="stylesheet" href=".../ui.jqgrid.css" >规则。

Jqgrid列标题按钮未正确显示

1 个答案: