Question

我在我的MVC项目中使用JQGRID版本3.8.2。我的问题是jqgrid标题和数据列未对齐好图像附在下面。 enter image description here

jqgrid的代码如下。 .cshtml代码

 <div class="list-grid-section">
        <table id="grid" cellpadding="0" cellspacing="0"> </table>
        <div id="pager" style="text-align: center;"></div>
 </div>

Java脚本文件代码如下。

$(function () {
 orgId = document.getElementById('Organization').value;
$("#grid").jqGrid({
    // Ajax related configurations
    url: jqDataUrl,
    datatype: "json",
    mtype: "GET",
    postData: { orgId: orgId},
    colNames: ['OID', 'Year Code','Year Desc','From Date','To Date','Organization',''],
    colModel: [ { name: 'Oid', index: 'Oid', sortable: false,hidden:true,
                        editable: true, editoptions: { dataInit: ShowHint }, align:'center',
                        description: 'OID'
                    },
                    { name: 'YearCode', index: 'YearCode', sortable: true,align:'right',
                        editable: true, editoptions: { dataInit: ShowHint },
                        description: 'Year Code', searchoptions: { sopt: ['bw'] }
                    },
                    { name: 'FinYearDesc', index: 'FinYearDesc', sortable: true,
                        hidden:false, editable: true, editoptions: { dataInit: ShowHint },
                        description: 'Fin Year Desc', searchoptions: { sopt: ['bw'] }
                    },

                        { name: 'FromDate', index: 'FromDate', sortable: true,
                        hidden:false, editable: true, editoptions: { dataInit: ShowHint },
                        description: 'From Date', searchoptions: { sopt: ['eq'] }
                    }, 
                     { name: 'ToDate', index: 'ToDate', sortable: true,
                        hidden:false, editable: true, editoptions: { dataInit: ShowHint },
                        description: 'To Date', searchoptions: { sopt: ['eq'] }
                    },     
                     { name: 'Organization', index: 'Organization', sortable: false,
                        hidden:true, editable: true, editoptions: { dataInit: ShowHint },
                        description: 'Organization'
                    },                        

                     { name: 'EditDelete', editable: false, description: '', align:'left' ,editoptions: { dataInit: ShowHint} ,sortable:false }

                  ],
                  gridComplete: function () {

                      $("#grid thead tr").children('th').first().css("width","24px");
                       $("#grid tbody tr").children('td').first().css("width","24px");

$("#grid tbody tr").children('td').eq(1).css("width","26px");
                var ids = $("#grid").jqGrid('getDataIDs');
                for (var i = 0; i < ids.length; i++) {

                 var   be = '<input  type="image"  src= '+btnEditImg+'    onclick="editForm(' + ids[i] + ');"/>';
                 // var  del = '<input  type="image"  src="/Content/images/trash-delete4.gif"   onclick=" return dialogOpen(' + ids[i] + ');"  />';
                    $("#grid").jqGrid('setRowData', ids[i], { EditDelete: be});                      
                };
                 jQuery(".ui-jqgrid-title").replaceWith('<div style="height: 17px;"><span></span></div>');
                      $("#grid").jqGrid("gridResize", { shrinkToFit: false });
            },

    // Grid total width and height
   autowidth:true, 
    shrinkToFit:false,
    height: "460",

    // Paging
    toppager: true,
    pager: $("#pager"),
    rowNum: 100,
    rowList: [100,200],
    viewrecords: true, // Specify if "total number of records" is displayed
    resizable: true,
    // Default sorting
    sortname: "Oid",
    sortorder: "asc",
    toppager: false,
    rownumbers: true,
           // Grid caption
    caption: " ",
    multiselect: true,
}).navGrid('#pager', { view: false, del: false, add: false, edit: false,search:true , searchtext: "Search" },
   {}, // default settings for edit
   {}, // default settings for add
   {}, // delete instead that del:false we need this
   {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
   {} /* view parameters*/
     );
$('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });

jQuery(".ui-jqgrid-title").replaceWith('<div style="height: 17px;"><span></span></div>');

});

Answer 1

我会严格建议您使用当前版本的jqGrid而不是使用复古版本，如2010年的3.8.2。

我认为您遇到问题的原因是手动设置width内的gridComplete属性。

你在gridComplete中所做的一切都会使网格渲染很多次。循环中每次调用setRowData都会重新绘制或至少重新回显页面上现有的大多数元素。有关详细信息，请参阅the answer;有关高级信息，请参阅the video。我建议您使用gridview: true选项，根本不要使用gridComplete（请参阅the answer，其中解释了gridComplete的缺点）。您应该使用自定义格式化程序或formatter: "actions"来实现与gridComplete中现在相同的操作。我建议您另外使用列模板（请参阅the answer）来减少代码并使其更易于阅读和维护。

标题和数据列未对齐网格3.8.2

1 个答案: