Jqgrid 列宽根据其内容

2022-01-19 00:00:00 jquery javascript jqgrid

我的 Jqgrid 中有很多列.所有列在两侧都显示了额外的空间.我希望该列没有额外的间距.列宽应根据其内容具有宽度.我试过 autowidth 但它不起作用.

I have many column in my Jqgrid.All Columns showing Extra space on both sides.i want that column without Extra spacing. Column Width should have width according to its content. I have tried autowidth but its not working.

实际行为如下:

-----------------------------------------------
|     Name     |     Mobile     |    Email    |
-----------------------------------------------

而我需要的是:

----------------------
|Name|Mobile No|Email|
----------------------

这是我的代码

 $("#list").jqGrid({
     datatype: "local",
     data: mydata,
     colNames: ["Name", "Mobile", "Email", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
     colModel: [
                { name: "id", width: 65, align: "center", sorttype: "int", hidden: true },
                { name: "invdate", width: 80, align: "center", sorttype: "date",
                    formatter: "date", formatoptions: { newformat: "d-M-Y" }, datefmt: "d-M-Y"
                },
                { name: "name", width: 70 },
                { name: "amount", width: 75, formatter: "number", sorttype: "number", align: "right" },
                { name: "tax", width: 55, formatter: "number", sorttype: "number", align: "right", hidden: true },
                { name: "total", width: 65, formatter: "number", sorttype: "number", align: "right" },
                { name: "closed", width: 75, align: "center", formatter: "checkbox",
                    edittype: "checkbox", editoptions: { value: "Yes:No", defaultValue: "Yes" }
                },
                { name: "ship_via", width: 100, align: "center", formatter: "select",
                    edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "Intime" }
                },
                { name: "note", width: 70, sortable: false }
            ],
     rowNum: 10,
     rowList: [5, 10, 20],
     pager: "#pager",

     rownumbers: true,
     sortname: "invdate",
     viewrecords: true,
     sortorder: "desc",
     caption: "Test for AltRows",
     height: "auto"
});

请解决我的问题.

推荐答案

问题很老了.jqGrid 不提供可变列宽.它始终使用固定列宽，并且每列的宽度将在创建网格期间设置，甚至在用数据填充网格之前.此外，jqGrid 没有提供允许您在创建网格后更改列宽的方法.

The question is old. jqGrid don't provide variable column width. It uses always fixed column width and the width of every column will be set during creating the grid even before filling the grid with data. Moreover jqGrid don't provide a method which allows you to change the width of the column after the grid is created.

尽管如此，需求仍然存在.需要创建一些带有列的网格，这些列的宽度是根据列中文本的内容动态设置的.

Nevertheless the requirement stay. One need to create some grids with columns which width are dynamically set based on content of the texts in the column.

我在 答案 setColWidth 方法中建议可以更改网格后的列宽被建造.使用一种方法可以建议您的要求的一些实现.我为您创建了 演示证明了这一点.它使用以下代码

I suggested in the answer setColWidth method which can do change column width after the grid is created. Using the method one do can suggest some implementation of your requirements. I created the demo for you which demonstrates this. It uses the following code

$("#list").bind("jqGridAfterLoadComplete", function () {
    var $this = $(this), iCol, iRow, rows, row, cm, colWidth,
        $cells = $this.find(">tbody>tr>td"),
        $colHeaders = $(this.grid.hDiv).find(">.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"),
        colModel = $this.jqGrid("getGridParam", "colModel"),
        n = $.isArray(colModel) ? colModel.length : 0,
        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];
        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());
            }
        }
        $this.jqGrid("setColWidth", iCol, colWidth);
    }
});

首先，我将网格的所有单元格的内容和列标题的内容包装在 span 内:<span class='mywrapping'></span>.它允许我计算单元格内容的宽度.然后我遍历所有行和所有行并找到我在调用 setColWidth 方法中使用的最大宽度.

First of all I wrap the content of all cells of the grid and the content of the column headers within the span: <span class='mywrapping'></span>. It allows me to calculate the width of the content of the cells. Then I goes through all rows and all rows and find the max width which I use in the call setColWidth method.

请注意，上述解决方案只是第一次尝试根据内容实现列的自动宽度".如果网格内容更复杂，它就无法工作.

Be carefully that the above solution only the first attempt to implement "autowidth" of columns based of the content. It could not work in case of more sophisticated content of the grid.

顺便说一下，列的宽度会在排序和分页时改变，因为在这种情况下列的最大宽度会改变.

By the way you the width of columns will be changed on sorting and on paging because the maximal width of columns will be changed in the case.

更新:如果使用 columnChooser 或其他方法，则需要将更多事件的列宽重新计算为 jqGridAfterLoadComplete.为此，只需在 "jqGridAfterLoadComplete" 之后的 bind/on 中添加相应的事件名称(事件名称分隔空间).例如答案演示了在columnChooser之后重新计算列宽.一个只使用 $("#list1").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {...}); 而不是 $("#list").bind("jqGridAfterLoadComplete", function () {...});

UPDATED: If one uses columnChooser or other methods one need to recalculate the column width on more events as jqGridAfterLoadComplete. To do this one need just add the corresponding event name (event names divided spaces) in the bind/on after "jqGridAfterLoadComplete". For example the answer demonstrates recalculation the column widths after columnChooser. One uses just $("#list1").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {...}); instead of $("#list").bind("jqGridAfterLoadComplete", function () {...});

更新 2: free jqGrid，jqGrid 的分支，我从 2014 年底开始开发.该功能已经包含在 free jqGrid 的第一个版本(v4.8)中.请参阅维基.当前的免费 jqGrid 版本是 4.13.0.因此，无需遵循上述技巧，只需将 jqGrid 升级到免费 jqGrid 的当前版本.可以包含 cmTemplate: { autoResizable: true } 以使所有列自动调整大小并添加 autoresizeOnLoad: true 选项以在每个列的末尾重置所有列的宽度加载.或者，只要想要重新计算所有可自动调整大小的列的宽度，就可以调用 autoResizeAllColumns() 方法.

UPDATED 2: The functionality in included out-of-the-box in free jqGrid, the fork of jqGrid, which I develop starting with the end of 2014. The feature was included already in the first version (v4.8) of free jqGrid. See the wiki. The current version of free jqGrid is 4.13.0. Thus one don't need to follow the tricks described above and just to upgrade jqGrid to the current version of free jqGrid. One can include cmTemplate: { autoResizable: true } to make all columns auto-resizable and to add autoresizeOnLoad: true option to reset the width of all columns at the end of every loading. Alternatively one can call autoResizeAllColumns() method whenever one want recalculate the width of all auto-resizable columns.

相关文章