JQGrid Header 未对齐

Question

我正在使用 4.4.4 - jQuery Grid 和 <= jquery 1.8.2 以及我如何制作我的 jqgrid

    function FAGrid() {
    var url1 = 'URL';
    $("#FAList").jqGrid({
        url: url1,
        datatype: 'json',
        mtype: 'POST',
        colNames: ['rowId', 'FAID', 'Employee', 'Date<br/> Filed', 'Duration', 'Shift', 'ProjectSite', 'Contact Person', 'Purpose', 'Requested By', 'Approved By', 'Date Approved'],
        colModel: [
                    { name: 'rowId', index: 'rowId', hidden: true, width: 20 },
                    { name: 'FAID', index: 'FAID', hidden: true, editable: true, sortable: false, width: 20, align: 'center' },
                    { name: 'CompleteName', index: 'CompleteName', hidden: false, editable: true, sortable: false, width: 160, align: 'center' },
                    { name: 'FADateFiled', index: 'FADateFiled', hidden: false, editable: true, sortable: false, width: 52, align: 'center' },
                    { name: 'Duration', index: 'Duration', hidden: false, editable: true, sortable: false, width: 97, align: 'center' },
                    { name: 'ShiftDesc', index: 'ShiftDesc', editable: true, hidde: false, width: 75, align: 'center' },
                    { name: 'ProjectSite', index: 'ProjectSite', editable: true, sortable: false, width: 75, align: 'center' },
                    { name: 'FAContactPerson', index: 'FAContactPerson', editable: true, hidde: false, width: 75, align: 'center' },
                    { name: 'Purpose', index: 'Purpose', editable: true, sortable: false, width: 75, align: 'center' },
                    { name: 'FARequestedBy', index: 'FARequestedBy', editable: true, sortable: false, width: 115, align: 'center' },
                    { name: 'FAApprovedBy', index: 'FAApprovedBy', editable: true, sortable: false, width: 115, align: 'center' },
                     { name: 'FADateApproved', index: 'FADateApproved', editable: true, sortable: false, width: 75, align: 'center' }
                  ],
        pager: $('#FAPager'),
        rowNum: 5,
        rowList: [5, 10, 20],
        sortname: 'FADateFiled',
        sortorder: 'desc',
        viewrecords: true,
        imgpath: '/Content/themes/redmond/images/',
        height: '100%',
        loadComplete: function () {
            var ids = jQuery("#FAList").getDataIDs();
            var len = ids.length,
                newLine;
            if (len < 5) {
                AddNewRowToGrid(len, "#FAList");
            }
         }
    });
}

这是图片。即使我更改名称或任何模型的宽度，它仍然没有对齐。问题是什么？。 CSS？ JQ网格？或者？

Answer 1

尝试为 colModel 中的项目赋予属性 fixed: true

Answer 2

我通过添加一些值创建了一个本地样本。就我而言，它工作正常。其实你想在 loadComplete 做什么？我已经评论了 loadComplete 函数。

以下是我的代码。

HTML

<table id="FAList"></table>
<div id="FAPager"></div>

JS

$(document).ready(function() {

var data = [
{ rowId: "1",   FAID: "2",  CompleteName: "Emp name",   FADateFiled: "08/18/2016",  Duration: "3",  ShiftDesc: "Desc",  ProjectSite: "Site",    FAContactPerson: "Contact Person",  Purpose: "Purpose", FARequestedBy: "Requester", FAApprovedBy: "Approver",   FADateApproved: "08/18/2016"
},
{ rowId: "1",   FAID: "2",  CompleteName: "Emp name1",  FADateFiled: "08/18/2016",  Duration: "3",  ShiftDesc: "Desc1", ProjectSite: "Site1",   FAContactPerson: "Contact Person1", Purpose: "Purpose1",    FARequestedBy: "Requester1",    FAApprovedBy: "Approver1",  FADateApproved: "08/18/2016"
} 
];

function FAGrid() {

    var url1 = 'URL';
    $("#FAList").jqGrid({
        //url: url1,
        //datatype: 'json',
        datatype: 'local',
        //mtype: 'POST',
        colNames: ['rowId', 'FAID', 'Employee', 'Date<br/> Filed', 'Duration', 'Shift', 'ProjectSite', 'Contact Person', 'Purpose', 'Requested By', 'Approved By', 'Date Approved'],
        colModel: [
                    { name: 'rowId', index: 'rowId', hidden: true, width: 20 },
                    { name: 'FAID', index: 'FAID', hidden: true, editable: true, sortable: false, width: 20, align: 'center' },
                    { name: 'CompleteName', index: 'CompleteName', hidden: false, editable: true, sortable: false, width: 160, align: 'center' },
                    { name: 'FADateFiled', index: 'FADateFiled', hidden: false, editable: true, sortable: false, width: 52, align: 'center' },
                    { name: 'Duration', index: 'Duration', hidden: false, editable: true, sortable: false, width: 97, align: 'center' },
                    { name: 'ShiftDesc', index: 'ShiftDesc', editable: true, hidde: false, width: 75, align: 'center' },
                    { name: 'ProjectSite', index: 'ProjectSite', editable: true, sortable: false, width: 75, align: 'center' },
                    { name: 'FAContactPerson', index: 'FAContactPerson', editable: true, hidde: false, width: 75, align: 'center' },
                    { name: 'Purpose', index: 'Purpose', editable: true, sortable: false, width: 75, align: 'center' },
                    { name: 'FARequestedBy', index: 'FARequestedBy', editable: true, sortable: false, width: 115, align: 'center' },
                    { name: 'FAApprovedBy', index: 'FAApprovedBy', editable: true, sortable: false, width: 115, align: 'center' },
                     { name: 'FADateApproved', index: 'FADateApproved', editable: true, sortable: false, width: 75, align: 'center' }
                  ],
        pager: $('#FAPager'),
        rowNum: 5,
        rowList: [5, 10, 20],
        sortname: 'FADateFiled',
        sortorder: 'desc',
        viewrecords: true,
        //imgpath: '/Content/themes/redmond/images/',
        height: '100%',
        /*loadComplete: function () {
           debugger;
           var ids = jQuery("#FAList").getDataIDs();
           var len = ids.length,
           newLine;
           //if (len < 5) {
           //    AddNewRowToGrid(len, "#FAList");
           //}
        }*/
    });
    $("#FAList")[0].addJSONData({
            total: 1,
            page: 1,
            records: data.length,
            rows: data
        });    

    }

    FAGrid();

 });

请查看此Fiddle以供参考

JQGrid Header 未对齐

JQGrid Header not align

html

css

jquery

jqgrid