kendo ui調整大小列

Question

我正在使用以下功能（我從網絡獲得）來調整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

點擊這里獲取完整答案

加載列狀態

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); 
            }                              
        }
    }    
}