Kendo UI向Grid(表格)中添加Kendo UI控件
向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
在表格中添加控件基本上就是使用template来实现。