kendoui treeview grid spreadsheet
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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: "[email protected]", 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: "[email protected]", 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: "[email protected]", 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: "[email protected]", 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: "[email protected]", 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的主要内容，如果未能解决你的问题，请参考以下文章