treeview *方式获取id
<!DOCTYPE html>
<html>
<head>
<title>API</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../styles/kendo.common.min.css" rel="stylesheet">
<link href="../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../styles/kendo.default.min.css" rel="stylesheet">
<link href="../styles/kendo.default.mobile.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/jszip.min.js"></script>
<script src="../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<h4>ジョブ図</h4>
<div class="files"
data-role="treeview"
data-drag-and-drop="true"
data-text-field="name"
data-spritecssclass-field="type"
data-bind="visible: isVisible,
source: files,
events: { select: onSelect }"></div>
</div>
<div style="padding-top: 2em;">
<h4>Console</h4>
<div class="console"></div>
</div>
<div style="padding-top: 2em;">
<h4>Current view model state:</h4>
<pre>
{
name: <span data-bind="text: name"></span>,
files: <span data-bind="text: printFiles"></span>
}
</pre>
</div>
</div>
</div>
<script>
var viewModel = kendo.observable({
isVisible: true,
files: kendo.observableHierarchy([
{
id: 1, name: "ジョブ１", type: "folder", items: [
{
id: 11, name: "ジョブ２", type: "folder", expanded: true, items: [
{
id: 111, name: "ジョブ３", type: "folder", expanded: true, items: [
{ id: 1111, name: "テスト１", type: "image" },
{ id: 1112, name: "テスト２", type: "image" },
{ id: 1113, name: "テスト３", type: "image" }
]
},
{
id: 112, name: "ジョブ３", type: "folder", expanded: true, items: [
{ id: 1121, name: "image", type: "image" },
{ id: 1122, name: "pdf", type: "pdf" }
]
}
]
}
]
}
]),
onSelect: function (e) {
var treeView = e.sender;
var text = treeView.text(e.node);
var items = this.get("files").toJSON();
var jsonString = eval(JSON.stringify(items, null, 2));
$.each(jsonString, function (index, item1) {
$.each(item1.items, function (index, item2) {
$.each(item2.items, function (index, item3) {
$.each(item3.items, function (index, item4) {
if (item4.name == text) {
kendoConsole.log("event : 画面 (" + text + ")を開ける");
kendoConsole.log("event : 画面ID=(" + item4.id + ")");
}
});
});
});
});
}
});
kendo.bind($("#example"), viewModel);
</script>
<style>
.demo-section pre {
font-size: 12px;
width: 100%;
white-space: pre-wrap;
}
.files h3 {
color: #787878;
border-bottom: 1px solid #ccc;
padding-bottom: .4em;
margin-bottom: .4em;
}
.files .k-treeview {
height: 300px;
}
.files .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.rootfolder {
background-position: 0 0;
}
.folder {
background-position: 0 -16px;
}
.pdf {
background-position: 0 -32px;
}
.html {
background-position: 0 -48px;
}
.image {
background-position: 0 -64px;
}
</style>
</body>
</html>
spreadsheet *方式获取数据
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../styles/kendo.common.min.css" rel="stylesheet">
<link href="../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../styles/kendo.default.min.css" rel="stylesheet">
<link href="../styles/kendo.default.mobile.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/jszip.min.js"></script>
<script src="../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<a class="offline-button" href="###" id="getdata">getData</a>
<div id="example">
<div id="spreadsheet" style="width: 100%;"></div>
<script>
$(function () {
$("#spreadsheet").kendoSpreadsheet({
columns: 6,
rows: 3,
sheetsbar: false,
excel: {
// Required to enable Excel Export in some browsers
proxyURL: "//demos.telerik.com/kendo-ui/service/export"
},
selection: {
area: "selection"
},
sheets: [
{
name: "ContactsForm",
mergedCells: [
"A1:E1"
],
rows: [
{
height: 70,
cells: [
{
index: 0, value: "CONTACTS FORM", fontSize: 32, background: "rgb(96,181,255)", enable: false,
textAlign: "center", color: "white"
}
]
},
{
height: 25,
cells: [
{
value: "Full Name", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)", enable: false
},
{
value: "Email", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)", enable: false
},
{
value: "Date of Birth", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)", enable: false
},
{
value: "Phone", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)", enable: false
},
{
value: "Confirmed", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)", enable: false
}
]
},
{
height: 25,
cells: [
{
value: "Maria Anders",
validation: {
dataType: "custom",
from: "AND(LEN(A3)>3, LEN(A3)200)",
allowNulls: true,
type: "reject",
titleTemplate: "Full Name validation error",
messageTemplate: "The full name should be longer than 3 letters and shorter than 200."
}
},
{
value: "maria.anders@mail.com",
validation: {
dataType: "custom",
from: "AND(NOT(ISERROR(FIND(\"\", B3))), NOT(ISERROR(FIND(\".\", B3))), ISERROR(FIND(\" \", J1)), LEN(B3)>5)",
allowNulls: true,
type: "reject",
titleTemplate: "Email validation error",
messageTemplate: "The value entered is not an valid email address."
}
},
{
value: 31232,
format: "m/d/yyyy",
validation: {
dataType: "date",
showButton: true,
comparerType: "between",
from: "DATEVALUE(\"1/1/1900\")",
to: "DATEVALUE(\"1/1/1998\")",
allowNulls: true,
type: "reject",
titleTemplate: "Birth Date validaiton error",
messageTemplate: "Birth Date should be between 1899 and 1998 year."
}
},
{
value: 0921123465,
validation: {
dataType: "custom",
from: "AND(ISNUMBER(D3),LEN(D3)<14)",
allowNulls: true,
type: "reject",
titleTemplate: "Phone validation error",
messageTemplate: "The value entered is not an valid phone number. Please enter numeric value with less than 14 digits."
}
},
{
value: true,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
},
{
value: 1,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
}
]
},
{
height: 25,
cells: [
{
value: "Ana Trujillo",
validation: {
dataType: "custom",
from: "AND(LEN(A4)>3, LEN(A4)200)",
allowNulls: true,
type: "reject",
titleTemplate: "Full Name validation error",
messageTemplate: "The full name should be longer than 3 letters and shorter than 200."
}
},
{
value: "ana.trujillo@mail.com",
validation: {
dataType: "custom",
from: "AND(NOT(ISERROR(FIND(\"\", B4))), NOT(ISERROR(FIND(\".\", B4))), ISERROR(FIND(\" \", J1)), LEN(B4)>5)",
allowNulls: true,
type: "reject",
titleTemplate: "Email validation error",
messageTemplate: "The value entered is not an valid email address."
}
},
{
value: 31222,
format: "m/d/yyyy",
validation: {
dataType: "date",
showButton: true,
comparerType: "between",
from: "DATEVALUE(\"1/1/1900\")",
to: "DATEVALUE(\"1/1/1998\")",
allowNulls: true,
type: "reject",
titleTemplate: "Birth Date validaiton error",
messageTemplate: "Birth Date should be between 1899 and 1998 year."
}
},
{
value: 55554729,
validation: {
dataType: "custom",
from: "AND(ISNUMBER(D4),LEN(D4)<14)",
allowNulls: true,
type: "reject",
titleTemplate: "Phone validation error",
messageTemplate: "The value entered is not an valid phone number. Please enter numeric value with less than 14 digits."
}
},
{
value: true,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
},
{
value: 2,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
}
]
},
{
height: 25,
cells: [
{
value: "Antonio Moreno",
validation: {
dataType: "custom",
from: "AND(LEN(A5)>3, LEN(A5)200)",
allowNulls: true,
type: "reject",
titleTemplate: "Full Name validation error",
messageTemplate: "The full name should be longer than 3 letters and shorter than 200."
}
},
{
value: "antonio.moreno@mail.com",
validation: {
dataType: "custom",
from: "AND(NOT(ISERROR(FIND(\"\", B5))), NOT(ISERROR(FIND(\".\", B5))), ISERROR(FIND(\" \", J1)), LEN(B5)>5)",
allowNulls: true,
type: "reject",
titleTemplate: "Email validation error",
messageTemplate: "The value entered is not an valid email address."
}
},
{
value: 32232,
format: "m/d/yyyy",
validation: {
dataType: "date",
showButton: true,
comparerType: "between",
from: "DATEVALUE(\"1/1/1900\")",
to: "DATEVALUE(\"1/1/1998\")",
allowNulls: true,
type: "reject",
titleTemplate: "Birth Date validaiton error",
messageTemplate: "Birth Date should be between 1899 and 1998 year."
}
},
{
value: "(5) 555-3932",
validation: {
dataType: "custom",
from: "AND(ISNUMBER(D5),LEN(D5)<14)",
allowNulls: true,
type: "reject",
titleTemplate: "Phone validation error",
messageTemplate: "The value entered is not an valid phone number. Please enter numeric value with less than 14 digits."
}
},
{
value: true,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
},
{
value: 3,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
}
]
},
{
height: 25,
cells: [
{
value: "Thomas Hardy",
validation: {
dataType: "custom",
from: "AND(LEN(A6)>3, LEN(A6)200)",
allowNulls: true,
type: "reject",
titleTemplate: "Full Name validation error",
messageTemplate: "The full name should be longer than 3 letters and shorter than 200."
}
},
{
value: "thomas.hardy@mail.com",
validation: {
dataType: "custom",
from: "AND(NOT(ISERROR(FIND(\"\", B6))), NOT(ISERROR(FIND(\".\", B6))), ISERROR(FIND(\" \", J1)), LEN(B6)>5)",
allowNulls: true,
type: "reject",
titleTemplate: "Email validation error",
messageTemplate: "The value entered is not an valid email address."
}
},
{
value: 21232,
format: "m/d/yyyy",
validation: {
dataType: "date",
showButton: true,
comparerType: "between",
from: "DATEVALUE(\"1/1/1900\")",
to: "DATEVALUE(\"1/1/1998\")",
allowNulls: true,
type: "reject",
titleTemplate: "Birth Date validaiton error",
messageTemplate: "Birth Date should be between 1899 and 1998 year."
}
},
{
value: 1715557788,
validation: {
dataType: "custom",
from: "AND(ISNUMBER(D6),LEN(D6)<14)",
allowNulls: true,
type: "reject",
titleTemplate: "Phone validation error",
messageTemplate: "The value entered is not an valid phone number. Please enter numeric value with less than 14 digits."
}
},
{
value: true,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
},
{
value: 4,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
}
]
},
{
height: 25,
cells: [
{
value: "Christina Toms",
validation: {
dataType: "custom",
from: "AND(LEN(A7)>3, LEN(A7)200)",
allowNulls: true,
type: "reject",
titleTemplate: "Full Name validation error",
messageTemplate: "The full name should be longer than 3 letters and shorter than 200."
}
},
{
value: "christina.toms",
validation: {
dataType: "custom",
from: "AND(NOT(ISERROR(FIND(\"\", B7))), NOT(ISERROR(FIND(\".\", B7))), ISERROR(FIND(\" \", J1)), LEN(B7)>5)",
allowNulls: true,
type: "reject",
titleTemplate: "Email validation error",
messageTemplate: "The value entered is not an valid email address."
}
},
{
value: 30102,
format: "m/d/yyyy",
validation: {
dataType: "date",
showButton: true,
comparerType: "between",
from: "DATEVALUE(\"1/1/1900\")",
to: "DATEVALUE(\"1/1/1998\")",
allowNulls: true,
type: "reject",
titleTemplate: "Birth Date validaiton error",
messageTemplate: "Birth Date should be between 1899 and 1998 year."
}
},
{
value: 0921123465,
validation: {
dataType: "custom",
from: "AND(ISNUMBER(D7),LEN(D7)<14)",
allowNulls: true,
type: "reject",
titleTemplate: "Phone validation error",
messageTemplate: "The value entered is not an valid phone number. Please enter numeric value with less than 14 digits."
}
},
{
value: true,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
},
{
value: 5,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
}
]
},
{
height: 25,
cells: [
{
value: "Hanna Moos",
validation: {
dataType: "custom",
from: "AND(LEN(A8)>3, LEN(A8)200)",
allowNulls: true,
type: "reject",
titleTemplate: "Full Name validation error",
messageTemplate: "The full name should be longer than 3 letters and shorter than 200."
}
},
{
value: "hanna.moos@mail.com",
validation: {
dataType: "custom",
from: "AND(NOT(ISERROR(FIND(\"\", B8))), NOT(ISERROR(FIND(\".\", B8))), ISERROR(FIND(\" \", J1)), LEN(B8)>5)",
allowNulls: true,
type: "reject",
titleTemplate: "Email validation error",
messageTemplate: "The value entered is not an valid email address."
}
},
{
value: 0,
format: "m/d/yyyy",
validation: {
dataType: "date",
showButton: true,
comparerType: "between",
from: "DATEVALUE(\"1/1/1900\")",
to: "DATEVALUE(\"1/1/1998\")",
allowNulls: true,
type: "reject",
titleTemplate: "Birth Date validaiton error",
messageTemplate: "Birth Date should be between 1900 and 1998 year."
}
},
{
value: 062108460,
validation: {
dataType: "custom",
from: "AND(ISNUMBER(D8),LEN(D8)<14)",
allowNulls: true,
type: "reject",
titleTemplate: "Phone validation error",
messageTemplate: "The value entered is not an valid phone number. Please enter numeric value with less than 14 digits."
}
},
{
value: true,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
},
{
value: 6,
validation: {
dataType: "list",
from: "ListValues!A1:B1",
allowNulls: true,
type: "reject",
titleTemplate: "Invalid value",
messageTemplate: "Valid values are 'true' and 'false'."
}
}
]
}
],
columns: [
{
width: 100
},
{
width: 215
},
{
width: 115
},
{
width: 115
},
{
width: 115
},
{
width: 0
}
]
}
]
});
$.each($("div .k-vertical-align-center"), function (index, item) {
if (item.innerText == "F")
item.innerText = "";
})
$("#getdata").click(function () {
var kendoSpreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
var sheetJson = eval(kendoSpreadsheet.toJSON());
// 判断是否选择整行
if (kendoSpreadsheet._controller._selectionMode == "row") {
//// 输出选择行数
//alert(kendoSpreadsheet._view._focus.bottomRight.row);
//// 输出选择区域
//alert(sheetJson.sheets[0].selection);
//// 输出选择数据
//var selectionStr = sheetJson.sheets[0].rows[kendoSpreadsheet._view._focus.bottomRight.row].cells[0].value + ">"
//+ sheetJson.sheets[0].rows[kendoSpreadsheet._view._focus.bottomRight.row].cells[1].value + ">"
//+ sheetJson.sheets[0].rows[kendoSpreadsheet._view._focus.bottomRight.row].cells[2].value + ">"
//+ sheetJson.sheets[0].rows[kendoSpreadsheet._view._focus.bottomRight.row].cells[3].value + ">"
//+ sheetJson.sheets[0].rows[kendoSpreadsheet._view._focus.bottomRight.row].cells[4].value
//alert(selectionStr);
// 判断选择的是数据行
if (kendoSpreadsheet._view._focus.bottomRight.row > 1) {
alert("id=" + sheetJson.sheets[0].rows[kendoSpreadsheet._view._focus.bottomRight.row].cells[5].value);
}
}
});
});
</script>
</div>
</body>
</html>
grid 行选
<!DOCTYPE html>
<html>
<head>
<title>Selection</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../styles/kendo.common.min.css" rel="stylesheet">
<link href="../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../styles/kendo.default.min.css" rel="stylesheet">
<link href="../styles/kendo.default.mobile.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/jszip.min.js"></script>
<script src="../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<a class="offline-button" href="###" id="getdata">getData</a>
<script src="../content/shared/js/orders.js"></script>
<div id="example">
<div class="demo-section k-content wide">
<h4>Grid with multiple row selection enabled</h4>
<div id="rowSelection"></div>
</div>
<script>
$(document).ready(function () {
$("#rowSelection").kendoGrid({
dataSource: {
data: orders,
pageSize: 6
},
//selectable: "multiple",
selectable: "row",
pageable: {
buttonCount: 5
},
scrollable: false,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
]
});
$("#getdata").click(function () {
var grid = $("#rowSelection").data("kendoGrid");
var dataRows = grid.items();
// 获取行号
var rowIndex = dataRows.index(grid.select());
// 获取行对象
var data = grid.dataItem(grid.select());
alert(data.ShipCountry);
});
});
</script>
</div>
</body>
</html>