我需要在kendo UI中创建一个上下文菜单,并且需要为该上下文菜单添加一些功能。 我在jqgrid中看到了几乎相似的帖子, How to create jqGrid Context Menu?。 同样我需要在kendo中实现。非常紧急。请帮助我,谢谢
KendoGrid
<script type="text/javascript">
$(document).ready(function () {
//Bind with initial data
var people = [
{ firstName: "Hasibul", lastName: "Haque", email: "hasibul2363@gmail.com" }
, { firstName: "Jane", lastName: "Smith", email: "jane.smith@kendoui.com" }
];
$('#grid').kendoGrid({
scrollable: true,
sortable: true,
pageable: true,
selectable: "row",//""multiple row"",
filterable: true
, dataSource: { data: people, pageSize: 10 }
, columns:
[
{ field: "firstName", title: "First Name" }
, { field: "lastName", title: "Last Name" }
, { field: "email", title: "email" }
, {
title: "Action",
template: ' <input type="button" value="Delete" onclick="RemoveSelectedRow()" />'
, filterable: false
}
]
});
$(".k-content").dblclick(DoubleClickAction);
});
function Rebind() {
var people = [
{ firstName: "Robin", lastName: "Hood", email: "robin@gmail.com" }
, { firstName: "Hasibul", lastName: "Haque", email: "hasibul@gm.com" }
, { firstName: "Fauzul", lastName: "Hossain", email: "fauzul@gmail.com" }
];
var grid = $("#grid").data("kendoGrid");
grid.dataSource.data(people);
}
function InsertNewRow() {
var grid = $("#grid").data("kendoGrid");
var anis = { firstName: "Anisur", lastName: "Rahaman", email: "anis.com" };
grid.dataSource.insert(anis);
}
function RemoveSelectedRow() {
var grid = $("#grid").data("kendoGrid");
var selectedRow = grid.dataItem(grid.select());
grid.dataSource.remove(selectedRow);
}
function IterateThroughAllRows() {
var items = $("#grid").data("kendoGrid").dataSource.data();
for (i = 0; i < items.length; i++) {
alert(items[i].firstName);
}
}
function DoubleClickAction() {
var grid = $("#grid").data("kendoGrid");
var selectedRow = grid.dataItem(grid.select());
alert("You have double click on " + selectedRow.firstName);
}
function ReadSelectedRow() {
var grid = $("#grid").data("kendoGrid");
var selectedRow = grid.dataItem(grid.select());
alert("You have selected FirstName: " + selectedRow.firstName + " and Last Name: " + selectedRow.lastName);
}
function EnableSelectedIndexChangeEvent() {
var grid = $("#grid").data("kendoGrid");
grid.bind("change", RowSelectionChangeEvent);
}
function RowSelectionChangeEvent() {
ReadSelectedRow();
}
</script>
<div>
<input type="button" value="Rebind" onclick="Rebind()" />
<input type="button" value="Insert New Record" onclick="InsertNewRow()" />
<input type="button" value="Remove Selected Row" onclick="RemoveSelectedRow()" />
<input type="button" value="Iterate" onclick="IterateThroughAllRows()" />
<input type="button" value="Read Selected Row" onclick="ReadSelectedRow()" />
<input type="button" value="Enable Selected Index Chnage event" onclick="EnableSelectedIndexChangeEvent()" />
</div>
<div id="grid" class="k-content" >
</div>
答案 0 :(得分:2)
我认为你可以从 this jsfiddle 获得一些帮助。
<ul id="testMenu">
<li value=1>
<img src="someurl" />
Test 1
</li>
<li value=2>
<img src="someurl" />
Test 2
</li>
<li value=3>
<img src="someurl" />
Test 3
</li>
</ul>
此li
中的 ul
用作上下文菜单项。希望这有助于......