Javascript 剑道ui调整列大小

我正在使用以下函数（我从web获得）调整剑道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 });
        }

---

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

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

---

按字段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 });
}

加载列状态

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

函数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-1&&existingIndex！=i）//不同的索引
{//需要重新排序
reorderColumn（i，realGrid.columns[existingIndex]）；
}
//2.设置可见性状态
var isHidden=（typeof column.hidden=='undefined'）？false:column.hidden；
如果（isHidden）
{ 
realGrid.hideColumn（i）；
} 
其他的
{ 
realGrid.showColumn（i）；
++可见指数；
}
//3.设置宽度
var width=（typeof column.width=='undefined'）？null:column.width；
如果（宽度！=null）
{
realGrid.columns[i].width=width；//此设置值，而rest重新绘制
realGrid.thead.prev（）.find（'col:eq（'+visibleIndex+'））.width（width）；
查找（'>colgroup列：eq（'+visibleIndex+'））.width（width）；
}                              
}
}    
}

此解决方案仅在没有锁定列的情况下有效。（因为锁定的列位于不同的列组中，所以索引必须处理它）对于希望使用此选项强制执行最小宽度的任何人，请确保更改列对象（）中的列宽度。否则，添加列将重新收缩该列。