javascript - 剑道网格 : list all colum headers in a dropdown to see it instantly without scrolling horizontally

Question

我有剑道网格，并且有很多列用于查找特定列，我必须水平滚动并深入眼睛才能看到该列在哪里，我们可以在列搜索文本框中输入列名称吗？应该将我滚动到该列，或者我们可以在我的剑道网格上方的下拉列表中列出所有列(名称)，以便通过选择我可以看到该列突出显示或选择。我尝试了很多但找不到，我买了剑道网格。帮帮我。!!谢谢 !!

Answer 1

试试这个代码:

$("#grid").kendoGrid({
   ...
});

// Generate column list
var gridColumns = $("#grid").data("kendoGrid").options.columns,
    htmlOptions = "";

for (var i = 0; i < gridColumns.length; i++) {
    htmlOptions+= "<option value='" + i + "'>" + gridColumns[i].title + "</option>";
}

$("#column-list")
    .append(htmlOptions)
    .on("change", function() {
        // get the grid
        var grid = $("#grid").data("kendoGrid");

        // Find the TH element inside the grid's THEAD based on chosen index
        var chosenColumn = $(grid.element).find("thead th:eq(" + $(this).val() + ")");

        // Scroll to the column by its offsetLeft property
        scroll(chosenColumn[0].offsetLeft);
    });

// Scroll function
var scroll = function(pos) {
    $(".k-grid-content")[0].scrollLeft = pos;
}

HTML:

<select id="column-list"></select>

Demo 。该片段在其自己的注释中进行了 self 解释。如果您还不足以理解，请告诉我。

引用:

• scrollLeft