Kendo ui 编辑/删除剑道网格工具栏中的按钮，而不是每行

在每一行上都有编辑/删除按钮，空间效率非常低。我想：

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

在我自己重新发明这个轮子之前，有没有人用示例代码来说明这个工作原理

谢谢， 布拉德

在剑道网格mvc上实现复选框选择以进行删除-下面的代码片段

@（Html.Kendo（）.Grid（新列表（））
.姓名（“grdStudentList”）
.列（列=>
{
//IsSelected是StudentViewModel中的布尔属性，用于在数据绑定上显示选中或未选中
columns.Template（@）
.ClientTemplate（（“”）
.HeaderTemplate（“”）
.宽度（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.alloworst（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（“”）
)

//为选中的行声明全局
var checkedds={}；
//单击剑道网格上的复选框选择
//处理程序说明-
//当用户第一次单击ChkBx时，id将添加到CHECKEDID中，如（id | true）->计数将为1
//当用户单击ChkBx（取消检查）时，id将更新为（id | false）->计数将为1
//同一程序
$（函数（）{
//用于复选框选择
$（'grdStudentList'）。在（'click'，'checkbox'，函数（）{
//获取选中的值
var checked=$（this）.is（':checked'）；
//获取网格
var grid=$（'#grdStudentList'）.data（）.kendoGrid；
//添加“选择行”事件
//网格.table.on（“单击“，”.checkbox选择”，选择行）；
var checked=此项已检查，
行=$（this）.closest（“tr”）.addClass（“k-state-selected”），
dataItem=grid.dataItem（行）；
checkedIds[dataItem.id]=已选中；
如果（选中）{
//-选择行
row.addClass（“k-state-selected”）；
}
否则{
//-删除所选内容
row.removeClass（“k-state-selected”）；
}
})
});
//选中所有行-选中此复选框可一次单击选择记录中的所有条目
函数checkAll（名称、元素）{
//创建临时列表
checkedStudIds={}；
//检查是否已检查
变量状态=$（元素）.is（':checked'）；
var gridName='#'+name.id；
var grid=$（gridName）.data（）.kendoGrid；
$.each（grid.dataSource.view（），函数（）{
CheckedStudId[此['id']]=状态；
//推送到“checkedds”
checkedds[this['id']]=状态；
如果（此['IsSelected']！=状态）
this.dirty=true；
该['IsSelected']=州；
});
如果（！状态）{
checkedds={}；
}
grid.refresh（）；
}
//点击按钮
//对于您的情况，将单击“删除”按钮
$（“#btnDelete”）。单击（函数（）{
var gridData=$（'grdStudentList'）.data（“kendoGrid”）.dataSource.\u data；
//仅获取在最后阶段检查的ID
检查的var=[]；
//遍历所有已检查ID的数组
//只有（id | true）->这样的checkedId添加到只有[id]的checked[0]
for（checkedds中的变量i）{
如果（检查EDIDS[i]）{
检查。推（i）；
}
}
**//在此处执行操作：）**
});

在每行上使用漂亮的

字形图标如何？我认为它更具可读性，而不是现场消费者。下面是一个我通常在项目中使用的示例。关于一次删除功能，您可以将
复选框
添加到网格的左前几列

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>"
    }           
]
//...

var grid=$（“#employeeGrid”）.kendoGrid({
//为简洁起见省略了代码
柱：
[
{
字段：“EmployeeID”，类型：“日期”，宽度：“65px”，标题：“操作”，
模板：
"" +
"" +
""
}           
]
//...



希望这有助于

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>"
    }           
]
//...