kendoui treeview grid spreadsheet
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>
kendoui treeview grid spreadsheet的更多相关文章
- 使用kendoui对grid指定行变色
关键点在于绑定数据源后进行判断,可直接获取当前绑定对象的属性 dataBound: function () { dataView = this.dataSource.view(); ; i < ...
- 中文版kendoUI API — Grid（一）
1.altRowTemplate 类型:Function | String 说明:提供表格行的交替模板,默认grid表格为每一个数据元素提供一个tr 注意:模板中最外层的html元素必须是<tr ...
- IE10中KendoUI treeview 点击后出现虚线框的解决方案
在head中添加:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 修改渲染模式即可.
- wpf TreeView
<Window x:Class="WpfTutorialSamples.TreeView_control.TreeViewDataBindingSample" ...
- 简单的通用TreeView(WPF)
工作中要为很多类创建TreeView, 很多时候仅仅是因为要显示字段不同, 就得Ctrl+C.Ctrl+V复制一份几乎相同的代码, 这难免让人生厌, 于是希望像泛型集合的扩展方法那样, 可以在使用的时 ...
- WPF:带复选框CheckBox的树TreeView
最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo. 先放一下效果图(3棵树): 这个树索要满足的条件是: 父节点.Checked=true时,子节 ...
- WPF—TreeView无限极绑定集合形成树结构
1.如图所示:绑定树效果图 2.前台Xaml代码: <Window x:Class="WpfTest.MainWindow" xmlns="http://schem ...
- WPF如何用TreeView制作好友列表、播放列表
WPF如何用TreeView制作好友列表.播放列表 前言 TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表).音乐播放器(播放列表).类库展示器(树形类结构)等都用的是T ...
- WPF-控件-层级控件-TreeView
<?xml version="1.0" encoding="utf-8" ?> <Data xmlns=""> &l ...
随机推荐
- Linux安装MySql.Data for mono
wget http://dev.mysql.com/get/Downloads/Connector-Net/mysql-connector-net-6.8.3-noinstall.zipunzip m ...
- Object-C 中各数据类型转换 NSData转NSString，Byte，UIImage
1,NSData 与 NSString NSData --> NSString NSString *aString = [[NSString alloc] initWithData:adata ...
- sqlldr
1.字符集 sqlldr可以指定读取的文件的字符集,如果数据库为gbk,读取的文件为utf-8,这个时候就需要指定字符集 load data CHARACTERSET 'UTF8' 2.sqlldr导 ...
- vs中使用openGL
一.准备工作 创建Empty Project,为了能够使用OpenGL的库函数,需要把相关的库连接到项目中: 1.首先添加库的路径 如上,可以把需要添加的include.lib放到一起比较方便管理 这 ...
- JS定义函数的两种方式：函数声明和函数表达式
函数声明 关于函数声明的方式,它的一个重要的特性就是函数声明提升(function declaration hoisting),意思是在执行代码之前会先读取函数声明.这就意味着可以把函数声明放在调用它 ...
- C#实现获取文本文件的编码的一个类（区分GB2312和UTF8）-来自转载收集
using System; using System.IO; using System.Text; /// <summary> /// FileEncoding 的摘要说明 /// < ...
- Protocol buffers 介绍
Protocol buffers和mxl一样在序列化数据结构时很灵活.高效和智能,但是它的优势在于定义文件更小,读取速度更快,使用更加简单.目前protocol buffers支持C++.java和p ...
- 解析json
String json = "{\"elements\":[{\"distance\":{\"text\":\"1364 ...
- 优秀的JavaScript开发框架
JavaScript基本上是一个面向对象的脚本语言,创建web应用程序和互动网站.Javascript框架也被称为Javascript库.JavaScript框架很容易提高设计web开发工作,提供了许 ...
- mysql source导入报错ERROR 1366的解决方法
文件是utf8的,数据库表是utf8的,为什么客户端导入会报错呢? 发现客户端用的是gbk的 改为utf8后正常 SHOW VARIABLES LIKE 'character%'; +-------- ...