javascript - 如何将多个命令按钮放入 Kendo 网格中的一个拆分按钮下拉列表中？

Question

我是 Kendo UI 和 Bootstrap 的初学者。

我当前的问题是:我有一个带有四个自定义命令按钮(检查个人资料、联系人、编辑、删除)的剑道网格。我想在一个 Bootstrap 拆分下拉按钮 ( http://getbootstrap.com/components/#btn-dropdowns ) 中显示这四个按钮。该按钮本身应该是“检查配置文件”，当我单击小下拉菜单时，其他三个命令按钮应该可用。

有人可以帮我解决这个问题吗？

23/8/2016 编辑:

这是我目前所拥有的，但老实说我并不完全理解它，所以我无法改进它。

$('.profile-menu').each(function (i, e) {
    var dropdownTemplate = "<div class='btn-group btn-group-xs'>" +
                                "<button type='button' class='btn btn-danger'> Check Profile </button>" +
                                "<button class='btn btn-danger dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>" +
                                    "<span class='caret'></span>" +
                                "</button>" +
                                "<ul class='profile-menu dropdown-menu' role='menu'>";
    var dropdownList = "";

    $('a', e).each(function (ind, elem) {
        dropdownList = dropdownList + "<li><a href='#' class='" + $(this).attr("class") + "'>" + $(this).html() + "</a></li>";
    });

    dropdownTemplate = dropdownTemplate + dropdownList + "</ul></div>";
    $(this).html(dropdownTemplate);
});

这里的问题是下拉列表的样式与按钮的样式完全不同，因为命令按钮内置于 Kendo 网格中，因此它们具有默认 CSS。此外，下拉按钮 (Caret) 以某种方式位于“检查配置文件”按钮下方。

另一件需要修复的事情是“检查配置文件”按钮无效但是下拉列表中有四个项目包括检查配置文件，但我只需要下拉列表中的其他三个命令并且检查配置文件应该转到“检查配置文件”按钮。

Answer 1

使用命令列的模板。它应该看起来像这样:

var $grid = $("#grid").kendoGrid({
    dataSource: {
        type: "json",
        transport: {
            read: function (e) {
                // Just an example
                e.success({
                    Items: [
                        {
                            Id: 1,
                            Name: "Name1",
                            Surname: "Surname1"
                        },
                        {
                            Id: 2,
                            Name: "Name2",
                            Surname: "Surname2"
                        }
                    ],
                    Total: 2
                });
            }
        },
        schema: {
            data: "Items",
            total: "Total",
            model: {
                id: "Id",
                fields: {
                    Name: { type: "string" },
                    Surname: { type: "string" }
                }
            },
        }
    },
    pageable: {
        pageSize: 10
    },
    columns: [
        { field: "Id", hidden: true },
        {
            field: "Name",
            title: "Name",
            width: 170,
            headerAttributes: {
                style: "font-weight: bold;"
            }
        },
        {
            field: "Surname",
            title: "Surname",
            width: 170,
            headerAttributes: {
                style: "font-weight: bold;"
            }
        },
        {
            command: [ {
                template:
                '<div class="btn-group">' +
                    '<button type="button" class="btn btn-primary">Check Profile</button>' +
                    '<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                        '<span class="caret"></span>' +
                        '<span class="sr-only">Toggle Dropdown</span>' +
                    '</button>' +
                    '<ul class="dropdown-menu">' +
                        '<li><a style="cursor:pointer">Contact</a></li>' +
                        '<li><a style="cursor:pointer">Edit</a></li>' +
                        '<li><a style="cursor:pointer">Delete</a></li>' +
                    '</ul>' +
                '</div>'
            }],
            title: "Actions",
            width: 50,
            headerAttributes: {
                style: "font-weight: bold;"
            }
        }
    ]
}).data("kendoGrid");

在模板中，您还可以将 CSS 选择器设置为操作按钮，然后为它们设置点击处理程序。但是当你打开下拉菜单时会出现一些单元格溢出的问题。使其工作设置样式:

<style>
    .k-grid td {
        overflow: visible;
        white-space: nowrap;
    }
    .k-grid tr {
        height: 100px;
    }
</style>

这是网格的 div:

<div id="example">
    <div id="grid"></div>
</div>

编辑: An image with the result of given code