首页 > 代码库 > kendoui treeview grid spreadsheet

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: "ジョブ1", type: "folder", items: [                      {                          id: 11, name: "ジョブ2", type: "folder", expanded: true, items: [                            {                                id: 111, name: "ジョブ3", type: "folder", expanded: true, items: [                                    { id: 1111, name: "テスト1", type: "image" },                                    { id: 1112, name: "テスト2", type: "image" },                                    { id: 1113, name: "テスト3", type: "image" }                                ]                            },                            {                                id: 112, name: "ジョブ3", 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