kendo ui resize column

Question

我正在使用以下函数（我从web获得）来调整kendo ui中的列的大小。 这是基于索引，我正在寻找是否可以选择按列标题或字段/键选择。

当我重新排序网格列时，此功能失败。

 function resizeColumn(idx, width) {
            $("#grid .k-grid-header-wrap") //header
               .find("colgroup col")
               .eq(idx)
               .css({ width: width });

            $("#grid .k-grid-content") //content
               .find("colgroup col")
               .eq(idx)
               .css({ width: width });
        }

Answer 1

要按列标题调整大小，您只需找出正确的索引，例如像这样：

function resizeColumn(title, width) {
    var index = $("#grid .k-grid-header-wrap").find("th:contains(" + title + ")").index();

    $("#grid .k-grid-header-wrap") //header
        .find("colgroup col")
        .eq(index)
        .css({ width: width });

    $("#grid .k-grid-content") //content
        .find("colgroup col")
        .eq(index)
        .css({ width: width });
}

Answer 2

按字段ID逐列搜索，以确保这是更正后的字段。

function resizeColumn(fieldId, width) {
    var index = $('#grid .k-grid-header-wrap').find('th[data-field="' + fieldId + '"]').index();

    $("#grid .k-grid-header-wrap") //header
        .find("colgroup col")
        .eq(index)
        .css({ width: width });

    $("#grid .k-grid-content") //content
        .find("colgroup col")
        .eq(index)
        .css({ width: width });
}

Answer 3

click here to get complete Answer

加载列状态

function loadColumnState(columnStateKey: string, realGrid): void
{  
    var colState = JSON.parse($.jStorage.get(columnStateKey));

    if(colState && colState.length > 0) 
    {
        var visibleIndex = -1;
        for (var i = 0; i < colState.length; i++) 
        {                
            var column = colState[i];

            // 1. Set correct order first as visibility and width both depend on this.                                     
            var existingIndex = -1;

            if (typeof column.field !== 'undefined')
            {
                existingIndex = findFieldIndex(realGrid, column.field);
            }
            else if (typeof column.commandName !== 'undefined')
            {
                existingIndex = findCommandIndex(realGrid, column.commandName);
            }

            if (existingIndex > -1 && existingIndex != i) // Different index
            {   // Need to reorder
                realGrid.reorderColumn(i, realGrid.columns[existingIndex]);
            }

            // 2. Set visibility state
            var isHidden = (typeof column.hidden === 'undefined') ? false : column.hidden;

            if (isHidden) 
            { 
                realGrid.hideColumn(i); 
            } 
            else 
            { 
                realGrid.showColumn(i); 
                ++visibleIndex;
            }

            // 3. Set width
            var width = (typeof column.width === 'undefined') ? null :     column.width;

            if(width != null)
            {
                realGrid.columns[i].width = width; // This sets value, whilst rest redraws
                realGrid.thead.prev().find('col:eq(' + visibleIndex + ')').width(width);
                realGrid.table.find('>colgroup col:eq(' + visibleIndex +     ')').width(width); 
            }                              
        }
    }    
}