jqGrid扩展列宽的正确方法

Question

我试图使用jqGrid的colModel属性扩展我的列。当我这样做时，我的表数据消失了。有没有人知道为什么会这样。之前和之后的图片将在下面。以及我使用的jquery代码。

这是一个工作的例子。

以下是我尝试扩展列

之后的示例

    jQuery(document).ready(function () {
    ShowMessage();
    tableToGrid("#table1", {
        height: '200',
        shrinkToFit: false,
        autowidth: true,
        colNames: ['Edit',
                   'MRN',
                   'Hospital Fin',
                   'First Name',
                   'Last Name',
                   'Date of birth',
                   'Completed Pathway',
                   'Completed Pathway Reason',
                   'PCP Appointment',
                   'Specialist Appointment',
                   'Admit Date',
                   'Discharge Date',
                   'Discharge Disposition',
                   'Discharge To',
                   'Discharge Advocate Call',
                   'Home Healthcare',
                   'Safe Landing Accepted',
                   'PCP Name',
                   'PCP Phone',
                   'PCP Appointment Location',
                   'Specialist Name',
                   'Specialist Phone',
                   'Specialist Appointment Location',
                   'Comments',
                   'Patient Room',
                   'Phone',
                   'Payor',
                   'MRN Type'
                   ],
        colModel: [{ name: 'Edit', width: 55 },
                   { name: 'MRN',  width: 55 },
                   { name: 'HospitalFin', width: 85 },
                   { name: 'FirstName',  width: 85 },
                   { name: 'LastName',  width: 85 },
                   { name: 'Dateofbirth',  width: 85 },
                   { name: 'CompletedPathway',  width: 145 },
                   { name: 'CompletedPathwayReason',  width: 165 },
                   { name: 'PCPAppointment',  width: 145 },
                   { name: 'SpecialistAppointment', width: 165 },
                   { name: 'AdmitDate', width: 55 },
                   { name: 'DischargeDate', width: 80 },
                   { name: 'DischargeDisposition', width: 180 },
                   { name: 'DischargeTo', width: 55 },
                   { name: 'DischargeAdvocateCall', width: 165 },
                   { name: 'HomeHealthCareAccepted', width: 165 },
                   { name: 'SafeLandingAccepted', width: 165 },
                   { name: 'PCPName', width: 55 },
                   { name: 'PCPPhone', width: 55 },
                   { name: 'PCPAppointmentLocation', width: 165 },
                   { name: 'SpecialistName', width: 185 },
                   { name: 'SpecialistPhone', width: 185 },
                   { name: 'SpecialistAppointmentLocation', width: 185 },
                   { name: 'Comments', width: 55 },
                   { name: 'PatientRoom', width: 85 },
                   { name: 'Phone', width: 85 },
                   { name: 'Payor', width: 85 },
                   { name: 'MRNType', width: 85 }
                   ]
    });
    $(window).bind('resize', function () {
        $("#table1").fluidGrid({ example: "#tempplateInfo", offset: -10 });
        $("#table1 tbody").sortable("destroy");
    });
    (function ($) {
        jQuery.jgrid.fluid = {
            fluidGrid: function (options) {
                var grid = $(this);
                var settings = $.extend({
                    example: grid.closest('.ui-jqgrid').parent(), offset: 0
                },
                options || {});
                var width = $(settings.example).innerWidth() + settings.offset; grid.setGridWidth(width);
            }
        }
    })
    (jQuery);
    jQuery.fn.extend({ fluidGrid: jQuery.jgrid.fluid.fluidGrid });

    var $grid = $('#table1'),
        hdiv = $grid[0].grid.hDiv,
        $columnHeaders = $("thead tr.ui-jqgrid-labels th", hdiv)
    $columnHeaders.unbind('mouseenter');
    $columnHeaders.unbind('mouseleave');

注释掉columnModel部分，了解我工作时的内容。 colModel name属性是否应该等于th？什么是好伙伴。我得到了不一致的结果。