Kendo UI向Grid(表格)中添加Kendo UI控件

最新推荐文章于 2021-03-25 17:16:32 发布

dingfanjian6736

最新推荐文章于 2021-03-25 17:16:32 发布

阅读量434

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/Alsace/archive/2013/03/14/2960398.html

版权

　　向Kendo UI的Grid(表格)中添加Kendo UI的控件，如upload, DateTimePicker, DropDownList控件，源代码如下(代码需放在Kendo UI的根目录下)：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <link href="examples/content/shared/styles/examples-offline.css" rel="stylesheet">
 6     <link href="styles/kendo.common.min.css" rel="stylesheet">
 7     <link href="styles/kendo.default.min.css" rel="stylesheet">
 8 
 9     <script src="js/jquery.min.js"></script>
10     <script src="js/kendo.web.min.js"></script>
11     <script src="examples/content/shared/js/console.js"></script>
12 </head>
13  <body> 
14  <div id="example" class="k-content">
15                                 
16             信访单操作：<div id="grid1"></div>    
17             
18             <!--template for upload-->
19             <script type="text/x-kendo-template" id="template">
20                 <input name="files"  type="file" />       <!-- upload files -->         
21             </script>
22             
23             <!--template for DropDownList-->
24             <script type="text/x-kendo-template" id="listTemplate">
25                 <label>选择监察科室：</label><input name="list"/>
26             </script>
27             
28          <script>
29                 $(document).ready(function () {    
30                     var data = [
31                         {text: "科室1", value:"1"},
32                         {text: "科室2", value:"2"},
33                         {text: "科室3", value:"3"},
34                     ];                
35                     var sharedDataSource = new kendo.data.DataSource({
36                      data: [{title: "信访单1", warningTime: new Date(2013, 05, 24)}, {title: "信访单2", warningTime: new Date(2013, 05, 26)}],
37                      pageSize: 10    
38                 });                     
39                 $("#grid1").kendoGrid({
40                         navigatable: true,
41                         pageable: true,
42                         height: 200,
43                         editable: true,
44                         toolbar: ["save", "cancel"],
45                         dataSource: sharedDataSource,                        
46                         columns: [ 
47                                    { title: "信访处理单", field: "title"},
48                                    { title: "导入信访单", template: kendo.template($("#template").html()) },//创建upload控件
49                                    //创建DateTimePicker控件
50                                    { title: "预警时间设置",field: "warningTime", template: "#= (warningTime == null) ? ' ' : kendo.toString(warningTime, 'dd MMMM yyyy') #"},                                   
51                                    //创建DropDownList控件f
52                                    { title: "选择监察科室", template: kendo.template($("#listTemplate").html())},                                 
53                                    { title: "删除", command: "destroy" }    // creates a column with delete buttons});                                  
54                                    ]                                                                                                                            
55                                 });            
56                                 $("[name=files]").kendoUpload();            //upload控件
57                                 $("[name=list]").kendoDropDownList({        //DropDownList控件
58                                       dataTextField: "text",
59                                       dataValueField: "value",
60                                       dataSource: data
61                                   })
62                                   .closest(".k-widget")
63                                   .attr("id", "products_wrapper");
64 
65                             var dropdownlist = $("#products").data("kendoDropDownList"),
66                                 setValue = function(e) {
67                                     if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
68                                         dropdownlist.value($("#value").val());
69                                 },
70                                 setIndex = function(e) {
71                                     if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
72                                         var index = parseInt($("#index").val());
73                                         dropdownlist.select(index);
74                                     }
75                                 },
76                                 setSearch = function(e) {
77                                     if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
78                                         dropdownlist.search($("#word").val());
79                                 };
80 
81                                 
82                                 });
83             </script>
84                                 
85         </div>
86  </body>
87 </html>
88         
89