Question

每行都有编辑/删除按钮，空间效率很低。我想：

能够选择一行。
点击“添加新按钮”旁边网格顶部（或底部）的“编辑”或“删除”按钮。
每行都有复选框或多选，因此我一次删除多行。

在我不得不自己重新发明这个轮子之前，有没有人有示例代码显示这个工作？

谢谢，布拉德

Answer 1

在Kendo grid mvc上执行复选框选择以进行删除 - 下面的代码片段

 @(Html.Kendo().Grid(new List<UI.Models.StudentViewModel>())
     .Name("grdStudentList")
     .Columns(columns =>
     {
         //IsSelected is bool property in StudentViewModel to show Checked or Unchecked on data bound
         columns.Template(@<text></text>)
             .ClientTemplate(("<input type='checkbox' #= IsSelected ? checked='checked':'' # class='checkbox' />"))
             .HeaderTemplate("<input type='checkbox' id='masterCheckBoxStudentList' onclick='checkAll(grdStudentList, this)'/>")
             .Width(5);
         columns.Bound(item => item.ID).Visible(false);
         columns.Bound(item => item.Name).Width(100);
         columns.Bound(item => item.City).Width(100);
     })
     .Sortable(sort => sort.AllowUnsort(false))
     .DataSource(dataSource => dataSource
         .Ajax()
         .Read(read => read.Action("GetStudentList", "StudentController", new { @area = "Student" }))
         .Model(model =>
         {
             model.Id(item => item.ID);
         })
     )
     //.Events(events => events.DataBound(""))
)

＆＃13;

<script type="text/javascript">

    // Declare the global for checked rows
    var checkedIds = {};

    // On Click of check box selection on Kendo grid
    // Handler description- 
    // When user clicks on ChkBx 1st time id will be added to checkedIds like ( id | true)  -> Count will be 1
    // When user clicks on ChkBx (Un Check) id will be updated like ( id | false) -> Count will be 1
    // Same proc
    $(function () {
        // For checkbox selection
        $('#grdStudentList').on('click', '.checkbox', function () {
            // Get the checked values
            var checked = $(this).is(':checked');
            // Get the grid
            var grid = $('#grdStudentList').data().kendoGrid;
            // Add the select row event
            // grid.table.on("click", '.checkboxSelect', selectRow);
            var checked = this.checked,
            row = $(this).closest("tr").addClass("k-state-selected"),
            dataItem = grid.dataItem(row);
            checkedIds[dataItem.id] = checked;
            if (checked) {
                // -select the row
                row.addClass("k-state-selected");                
            }
            else {
                //-remove selection
                row.removeClass("k-state-selected");
            }
        })
    });

    // Check all Rows - Check box to select all entries in a record at a single click
    function checkAll(name, element) {
        // Creating temporay list  
        checkedStudIds = {};

        // Checking wheather checked or not
        var state = $(element).is(':checked');
        var gridName = '#' + name.id;
        var grid = $(gridName).data().kendoGrid;

        $.each(grid.dataSource.view(), function () {
            checkedStudIds[this['id']] = state;
            // Pushing to "checkedIds"
            checkedIds[this['id']] = state;
            if (this['IsSelected'] != state)
                this.dirty = true;
            this['IsSelected'] = state;
        });

        if (!state) {
            checkedIds = {};
        }
        grid.refresh();
    }

    // On Button click
    // For your case it will be delete button click  
    $("#btnDelete").click(function () {

        var gridData = $('#grdStudentList').data("kendoGrid").dataSource._data;

        // Gets only the ids which is checked at final stage
        var checked = [];

        // Iterate throuh the array of all checked IDs
        // Having only checkedIds like ( id | true)  -> Added to checked[0] with only [ID]
        for (var i in checkedIds) {
            if (checkedIds[i]) {
                checked.push(i);
            }
        }

        **// Do your action here :) **
   });
</script>

＆＃13;

Answer 2

在每一行上使用漂亮glyphicons怎么样？我认为它更具可读性，而不是现场消费者。这是我通常在我的项目中使用的示例。关于一次删除功能，您可以将checkbox添加到网格的左侧第一列。

var grid = $("#employeeGrid").kendoGrid({
//code omitted for brevity
columns:
[
    {
        field: "EmployeeID", type: "date", width: "65px", title: "Operation",
        template:
        "<a title='Detail' style='height:20px !important; width:26px !important; padding-left:5px;' href='./Employee/Details/#=EmployeeID#'><span class='glyphicon glyphicon-search'></span></a>" +

        "<a title='Edit' style='height:20px !important; width:26px !important; padding-left:15px;' href='./Employee/Edit/#=EmployeeID#'><span class='glyphicon glyphicon-edit'></span></a>" +

        "<a title='Delete' style='height:20px !important; width:26px !important; padding-left:15px;' href='./Employee/Delete/#=EmployeeID#'><span class='glyphicon glyphicon-trash'></span></a>"
    }           
]
//...

希望这会有所帮助...

编辑/删除Kendo Grid工具栏中的按钮，而不是每行

2 个答案: