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 ...
随机推荐
- 天地图应用ArcGIS发布的服务
本文包含三个部分:利用ArcMap将Excel的数据转化为ArcGIS MXD文件.利用ArcMap发布服务.天地图添加ArcGIS发布的服务. 一 MXD文件的生成 假设在Excel中存有两个点的坐 ...
- Java应用程序访问网络资源--HttpClient
HttpClient的最本质的功能是执行HTTP方法.一个HTTP方法的执行涉及到一个或几个HTTP请求/ HTTP响应的交流,通常由HttpClient的内部处理.用户预计将提供一个请求对象来执行和 ...
- ajax学习总结
一.ajax简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),AJAX 是一种与服务器交换数据的技术,他可以在 ...
- JS数组push会覆盖前面的数据问题
这是一个作用域和重新赋值的问题. 检查声明数组所在位置,特别在是多层嵌套中,检查是否在内层循环结束时 跳到外层循环就重新将 数组 赋值为空.
- PCI Express(六) - Simple transactions
原文地址:http://www.fpga4fun.com/PCI-Express6.html Let's try to control LEDs from the PCI Express bus. X ...
- GNS3 桥接虚拟网卡 telnet 实验
网上很多桥接本地网卡的,一直测试不通.无奈,本人桥接vmware 虚拟网卡通! 1: 2: 3:telnet 加密实验 R1(config)#line vt R1(config)#line vty 0 ...
- NET 强签名
强签名: 1. 可以将强签名的dll注册到GAC,不同的应用程序可以共享同一dll. 2. 强签名的库,或者应用程序只能引用强签名的dll,不能引用未强签名的dll,但是未强签名的dll可以引用强签名 ...
- 用ARCGIS配出一张DEM专题图
专题图是指突出而尽可能完善.详尽地表达制图区内的一种或几种自然或社会经济要素的地图.专题图的制图领域宽广,凡具有空间属性的信息数据都可以用其来表示.由于DEM描述的是地面高程信息,它在测绘.水文.气象 ...
- vs2013单元测试练习过程
1.打开VS2013 --> 新建一个项目.这里我们默认创建一个控制台项目.取名为UnitTestDemo 2.在解决方案里面新增一个单元测试项目.取名为UnitTestDemoTest 创建完 ...
- Hbase资料汇总
1.hbase api http://blog.csdn.net/u010967382/article/details/37878701