(一) kendo UI 数据绑定种类小结

最新推荐文章于 2019-09-12 09:05:18 发布

转载最新推荐文章于 2019-09-12 09:05:18 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yzs1013/p/3863014.html

文章标签：

#ui #javascript #php #ViewUI

本文详细介绍了Kendo UI中不同组件的使用方法，包括自动完成、数据绑定、日期选择器、网格和事件监听等，并通过实例展示了如何在实际应用中实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

====================autocomplete自动完成绑定 ====================
 <input id="autocomplete" />
 < script >
 $("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
 </script>
获取引用对象
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
该引用对象操作
autocomplete.value("Cherries");
 var value = autocomplete.value();
 ====================绑定函数取本类属性============================
var viewModel = kendo.observable({
 name: "John Doe",
 displayGreeting: function() {
 var name = this.get("name");//this.get 这个方法
this.set("name", "yzs");//this.set 这个方法
alert("Hello, " + name + "!!!");
 }
 });
 kendo.bind(document.body, viewModel);

如果是类外面(bind之后)，用实例化的对象名操作,如
viewModel.get("name");
 viewModel.set("name","yzs1013");

=========================
 <div data-bind="text: person.lowerCaseName"></div>
 <script>
 var viewModel = kendo.observable({
 person: {
 name: "John Doe",
 lowerCaseName: function() {
 return this.get("name").toLowerCase();
 }
 }
 });
 kendo.bind($("div"), viewModel);
 </script>

====================利用autocomplete监听============================
 <input id="autocomplete" />
 <script>
 function autocomplete_change(e) {
 var autocomplete = e.sender;//取得引用对象
//var autocomplete = this;//这种方法也可以取得引用对象
var value = autocomplete.value();
 }
 $("#autocomplete").kendoAutoComplete({
 change: autocomplete_change //绑定
//autocomplete.bind("change", autocomplete_change); //这种方法也可以绑定

});
 </script>
 ===========================grid绑定=====================================
 <div id="grid"></div>
 <script>
 $("#grid").kendoGrid({
 height: 200,
 columns:[
 {
 field: "FirstName",
 title: "First Name"
 },
 {
 field: "LastName",
 title: "Last Name"
 }
 ],
 dataSource: {
 data: [
 {
 FirstName: "John",
 LastName: "Doe"
 },
 {
 FirstName: "Jane",
 LastName: "Doe"
 }
 ]
 }
 });
 </script>
 ===========================DatePicker绑定=====================================
 <!doctype html>
 <html>
 <head>
<title>Kendo UI Web</title>
 <link href="styles/kendo.common.min.css" rel="stylesheet" />
 <link href="styles/kendo.default.min.css" rel="stylesheet" />
 <script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
 </head>
 <body>
 <input id="datepicker" />
 <script>
 $(function () {
 $("#datepicker").kendoDatePicker();
 });
 </script>
 </body>
 </html>
 ====================================jquery获取数据绑定===================================================
 $(document).ready(function (){
 $.ajax({
 type: 'GET',
 async: false,
 url: "http://t.sogx.cn/wap/index.php?m=user&c=show&id=2",
 data: "ajax=1",
 dataType: "jsonp",
 success: function (obj) {
 var viewMode5222 = kendo.observable({
 data2: obj.data
 });
 kendo.bind($("#drawer-resume"), viewMode5222);
 }
 })
 });

================================= 一些经验 =============================================
绑定时
1.kendoUI模板的数据##，在数据源里要能找到
2.数据源的格式（一维还是多维的），要对应得上。
 如果不符合以上条件，非但绑定不进去，还会显示空白错误。

 

绑定一个Kendo datasource到kendo.observable对象：
var formVM = kendo.observable({
 sources: formDS,
 source: null
 });


绑定指定的formVM到某个Div元素：
kendo.bind($("#form_div"),formVM);


在页面数据改变时，更新绑定的数据源(DataSource):
 formDS.bind("change", function() {
 formVM.set("source", this.view()[0]);
 });


强制更新form_div中的值：
formVM.set("source.userName", 'gloomyfish');对应的HTML为
<input id="uname"name="uname" data-bind="value: source.userName"/>