Jqgrid柱宽根据其内容 [英] Jqgrid Column width According to Its Content

问题描述

我的Jqgrid.All列中有很多列，两侧都显示额外的空间。我希望该列没有额外的间距。
列宽应根据其内容具有宽度。
我尝试过 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 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 ：免费jqGrid 中包含的开箱即用功能， jqGrid的分支，我从2014年底开始开发。该功能已包含在免费jqGrid的第一个版本（v4.8）中。请参阅维基。当前版本的免费jqGrid是4.13.0。因此，不需要遵循上述技巧，只需将jqGrid升级到当前版本的free 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.

这篇关于Jqgrid柱宽根据其内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！