Question

背景： - 我从以下代码中选取了脚本，以便从here进行表格排序。现在我想要改变它的工作方式。

问题： - 我希望数据根据用户从下拉列表（列名称）中的选择进行排序，而不是单击表格中的列标题。 < strong>我该怎么做？

简而言之，我所拥有的输出位于第一张附加图像中，我想要的输出位于第二张图像中。

解释： - 我们可以看到，单击列标题（列中的顶部单元格）会对该列中的数据进行排序（并根据该列对表中的数据进行排序）。

我想要的是列标题应该只是列的描述性标题，点击它们应该什么都不做;虽然表格顶部应该有一个下拉列表/菜单按钮（与表格分开，只是一个单独的下拉列表按钮/ html选择元素），其中包含列名列表。表中的数据应根据用户从该列表中选择的列名进行排序。

CODE： -

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Simple Tabbed Menu by CSS-Tricks</title>
    <script type="text/javascript" src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
</head>

<body class="yui3-skin-sam">
    <script>
            YUI().use("datatable-sort", function (Y) {

            var cols = [{
                key: "Company",
                label: "Click to Sort Column A",
                sortable: true
            }, {
                key: "Phone",
                label: "Not Sortable Column B",
                sortable: true
            }, {
                key: "Contact",
                label: "Click to Sort Column C",
                sortable: true
            }],

            data = [{
                Company: "Company Bee",
                Phone: "415-555-1234",
                Contact: "Sally Spencer"
            }, {
                Company: "Acme Company",
                Phone: "650-555-4444",
                Contact: "John Jones"
            }, {
                Company: "Industrial Industries",
                Phone: "408-555-5678",
                Contact: "Robin Smith"
            }],

            table = new Y.DataTable({
                columns: cols,
                data: data,
                summary: "Contacts list",
                caption: "Table with simple column sorting"
            }).render("#sort");
        });
    </script>
</body>

图片： -

enter image description here

Answer 1

执行此操作的一种方法是添加<select>下拉菜单，并使用Node.on()方法收听change事件。您可以传递Node.on()一个函数，该函数使用DataTable.sort()对列进行排序。

<select id="select">
    <option value="">Sort by...</option>
    <option value="Company">Sort A</option>
    <option value="Phone">Sort B</option>
    <option value="Contact">Sort C</option>
</select>
<script>
    YUI.use('datatable-sort', function(Y) {

        var /* your code here ...*/
        table = new Y.DataTable({ /* datatable code here ... */ }),
        select = Y.one('#select');

        select.on('change', function(event) {

            var value = select.get('value');

            if (value) {
                table.sort(value);
            }
        });
    });
</script>

以下是使用您的代码的可运行示例：

YUI().use("datatable-sort", function (Y) {
    var cols = [{
        key: "Company",
        label: "Click to Sort Column A",
        sortable: true
    }, {
        key: "Phone",
        label: "Not Sortable Column B",
        sortable: true
    }, {
        key: "Contact",
        label: "Click to Sort Column C",
        sortable: true
    }],

        data = [{
            Company: "Company Bee",
            Phone: "415-555-1234",
            Contact: "Sally Spencer"
        }, {
            Company: "Acme Company",
            Phone: "650-555-4444",
            Contact: "John Jones"
        }, {
            Company: "Industrial Industries",
            Phone: "408-555-5678",
            Contact: "Robin Smith"
        }],

        table = new Y.DataTable({
            columns: cols,
            data: data,
            summary: "Contacts list",
            caption: "Table with simple column sorting"
        }).render("#sort"),

        select = Y.one('#select');

    select.on('change', function (event) {

        var value = select.get('value');

        if (value) {
            table.sort(value);
        }
    });
});

<script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>
<body class="yui3-skin-sam">
    <select id="select">
        <option value="">Sort by...</option>
        <option value="Company">Sort A</option>
        <option value="Phone">Sort B</option>
        <option value="Contact">Sort C</option>
    </select>
    <div id="sort"></div>
</body>

您可能还希望在对其中一列进行排序时更新下拉列表。为此，您应该收听sort event of the DataTable，并根据此更新DataTable。

JS YUI：如何通过单击按钮对数据表进行列排序？

1 个答案: