YUI 列选择答案

【问题标题】：YUI Column SelectionYUI 列选择
【发布时间】：2010-03-02 18:57:49
【问题描述】：

我在使用 YUI 的 DataTable 列选择功能时遇到问题。我试过了，

myEndColDataTable.subscribe("theadCellClickEvent", myEndColDataTable.onEventSelectColumn);

和

myEndColDataTable.subscribe("cellClickEvent", function (oArgs) { this.selectColumn(this.getColumn(oArgs.target)); });

问题是，我以编程方式选择了一个初始列。我可以突出显示另一列，但它不会从最初选择的列中删除选择。

【问题讨论】：

标签： yui yui-datatable

【解决方案1】：

你是对的 - 没有快速清洁的解决方案。

YUI DataTable 当前（从 2.8 开始）缺少一个 unselectAllColmns 方法来匹配 unselectAllRows（由 onEventSelectRow 调用）。

另外值得注意的是onEventSelectColumn选择了列标题，所以unselectAllCells不起作用。

您可以像这样实现自己的unselectAllColumns() 函数：

function unselectAllColumns (dataTable) {
        var i, oColumn, oColumnSet = dataTable.getColumnSet();
        for (i=0; i<oColumnSet.keys.length; i++) {
                oColumn = oColumnSet.keys[i];
                if (oColumn.selected) {
                        dataTable.unselectColumn(oColumn);
                }
        }
}

这将比使用 getSelectedColumns() 稍微高效一些，因为您不需要构建仅包含选定列的中间数组（查看源 getSelectedColumns 调用 getColumnSet 并像上面一样遍历数组）。

【讨论】：

我在前面的步骤中查看了行选择示例，并让它工作。我已经尝试过这些方法，并且它们有效，除了当我选择新列时它们不会取消选择先前选择的列。我也尝试了您在第一个示例中的细微变化，但它不起作用。下一步，我现在尝试获取所选列的列索引并将其放入一个 div 中，有点像 document.getElementById('lastColumn').innerHTML=myEndColDataTable.getSelectedColumns(); 但它返回一个数组。
你是对的 - 查看源代码，与选择行相比，selectColumn() 代码只实现了一半。我重写了答案。

【解决方案2】：

我想我可以做到这一点，但它并不优雅。必须有更好的方法。

myEndColDataTable.subscribe("cellClickEvent", function (oArgs) {
    var colUnSelect = myEndColDataTable.getSelectedColumns();
    myEndColDataTable.unselectColumn(colUnSelect[0]);
    myEndColDataTable.selectColumn(myEndColDataTable.getColumn(oArgs.target));  
});

【讨论】：