为什么 setColWidth 在 Jqgrid 上不起作用？

Question

我的网格如下，

<table id="grid"></table>

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "7773333777733337777333377773333777733337777333377773333777733337777333377773333777733337", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example",
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}


$("#grid").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
        var $this = $("#grid"),
        $cells = $this.find(">tbody>tr>td"),
        $colHeaders = $this.closest(".ui-jqgrid-view").find(">.ui-jqgrid-hdiv>.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"),
        colModel = $this.jqGrid("getGridParam", "colModel"),
        iCol,
        iRow,
        rows,
        row,
        n = $.isArray(colModel) ? colModel.length : 0,
        cm,
        colWidth,
        idColHeadPrexif = "jqgh_" + this.id + "_";
        $cells.wrapInner("<span class='mywrapping'></span>");
        $colHeaders.wrapInner("<span class='mywrapping'></span>");

        for (iCol = 0; iCol < n; iCol++) {
            cm = colModel[iCol];
            if (cm.hidden) {
                continue;
            }
            colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons
            for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
                row = rows[iRow];
                if ($(row).hasClass("jqgrow")) {
                    colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
                }
            }
            //$("#grid").jqGrid("setColWidth", iCol, colWidth);
            alert(iCol + colWidth);
            //$("#grid").jqGrid('setColProp',iCol,{width:colWidth});
            $('#grid tr').find('td:eq('+iCol+')').each(function(){$(this).css('width',colWidth);}); // will set the column widths

            //var gw = $("#grid").jqGrid('getGridParam','width');

            //$("#grid").jqGrid('setGridWidth',gw);
        }
    });


<style type="text/css">
    .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        overflow: hidden;
        height: auto;
        vertical-align: middle;
        padding-top: 3px;
        padding-bottom: 3px
    }
</style>

我正在尝试使用 , 为列设置自动宽度

 $("#grid").jqGrid("setColWidth", iCol, colWidth);

这导致我“setColWidth 未定义”。顺便说一句，我正在使用 jquery1.8。

然后我尝试使用这种方式，

$('#grid tr').find('td:eq('+iCol+')').each(function(){$(this).css('width',colWidth);});

这并没有给出任何脚本错误，但它也没有设置列的宽度。

但是当我这样做时，每列的宽度都被正确打印了，

        alert(iCol + colWidth);

我在这段代码中做错了什么？有谁能帮我解决这个问题？

我该如何解决这个问题...？

需要帮助...

在此先感谢...

Answer 1

jqGrid 4.4.1 真的是很老的版本了。无论如何，它没有setColWidth 方法，我最初在the answer 中将其作为插件引入jqGrid。如果您必须使用setColWidth，则必须包含jQuery.jqGrid.setColWidth.js，您可以从GitHub 下载它。后来我在免费的 jqGrid 4.8 中包含了该方法并实现了自动宽度功能。它是我开发的 jqGrid 的分支（参见the readme）。请参阅the wiki article 了解更多信息。

我建议您更新到免费的 jqGrid 4.9.1 或您可以从GitHub 下载的最新代码。在这种情况下，您将拥有setColWidth 方法和许多其他功能。