Kendo UI

1. 如何开始使用Kendo UI？
   • 准备文件
   • css > bootstrap.min.css kendo.bootstrap-v4.min.css
   • js > jquery.min.js kendo.all.min.js kendo.timezones.min.js
   • 汉化 > kendo.culture.zh-CN.min.js kendo.messages.zh-CN.min.js
   • 在页面引入相应的脚本文件和样式文件

一、Templates

1. DataSource

“数据源”，构建所有web Applcation的核心应用，它是本地数据（例如Javascript的数组或对象）或者远程数据（例如web Service返回的JSON、JSONP、OData或者是XML）的抽象表示。

它可以做以下的事情：

* 从远程终端检索数据；
* 维护数据的结构和类型（data schema）；
* 在和远程终端交互的过程中处理数据的序列化（读取或写入）；
* 在和远程终端交互的过程中进行数据同步（创建、更新、删除）；
* 维护一个用于远程更新的本地的数据缓存；
* 计算和维护数据的聚合，排序以及分页；
* 为数据过滤提供查询语法。

概括起来说，DataSource提供对数据的CRUD操作，以及无论是本地还是远程数据的排序、分页、检索（过滤）、分组和聚合操作。

2. 如何将本地数据绑定到DataSource？

将Javascript的数组指定到DataSource实例的data配置项：

var movies = [{
    title: "Star Wars: A New Hope",
    year: 1977
}, {
    title: "Star Wars: The Empire Strikes Back",
    year: 1980
}, {
    title: "Star Wars: Return of the Jedi",
    year: 1983
}];

var localDataSource = new kendo.date.DataSource({
    data: movies
});

3. 如何将远程数据绑定到DataSource？

使用DataSource.transport.read来指定一个远程的数据源

var remoteDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "",
            type: "get",
            dataType: "json",
            data: {
                id: ""
            }
        }
    }
});

• url：指定一个远程的地址来获取数据；
• type：http请求的类型，get或者是post；
• dataType：指定返回的数据格式，通常是json；
• data：http请求附加的参数。

4. 如何将DataSource应用到widgets上？

大部分Kendo UI的widgets都支持数据绑定，通过对组件的dataSource配置项赋值来将DataSource应用到组件上。有两种方式：
（1）在指定dataSource属性时，对DataSource进行相应的配置，如下：

$("#chart").kendoChart({
    …,
    dataSource: new kendo.data.DataSource({
        data: [
        {
            employee: "Joe Smith",
            sales: 2000
        },
        {
            employee: "Jane Smith",
            sales: 2250
        },
        {
            employee: "Will Roberts",
            sales: 1550
        }]
    }),
    …
});

（2）声明独立的DataSource实例，将其指定到组件的dataSource配置项上。这样做的好处在于，数据可以在多个widgets之间进行共享或者传递。如下：

var sharedDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "data-service.json",
            dataType: "json"
        }
    }
});

// 将相同的DataSource绑定到两个组件上面：Chart和Grid
$("#chart").kendoChart({
    …,
    dataSource: sharedDataSource,
    series: [{
        field: "sales",
        name: "Sales in Units"
    }],
    categoryAxis: {
        field: "employee"
    }
});

$("#grid").kendoGrid({
    dataSource: sharedDataSource,
    …
});

二、Templates

1. Templates渲染界面的语法有几种？

有三种语法：
（1）#=……#：以HTML的语法来渲染UI；
（2）#: ……#：忽略HTML语法，直接将获取得值渲染到UI上面；
（3）# …… #：在界面上引用Javascript代码段。

第（1）种和第（2）种情况，他们的区别是：假设有一个数据源是下面的格式：

var data = { firstName: "<b>Keanu</b>" };

<div id="example"></div>

// 第一种模板语法：
<script>
    var template = kendo.template("#= firstName #"); 
    var result = templete(data);
    $('#example').html(result);
</script>
/* --------  此时，界面输出的是粗体的keanu，即keanu。
   --------  因为它是按照HTML语法将<b>解释为粗体，并将其渲染到id为example的div里面。
*/

// 第二种模板语法：
<script>
    var template = kendo.template("#= firstName #"); 
    var result = templete(data);
    $('#example').html(result);
</script>
// 此时，界面输出的是<b>keanu<b>。它直接将值渲染到界面UI上面。

2. 快速建立Templates?

首先，创建一个<script></script>代码块，在这里代码块里面包含需要模板的HTML预制内容。如下，注意type属性的设置：

<script id="javascriptTemplate" type="text/x-kendo-template">
    <input type="text" value="#: firstName #" />
</script>

其次，将这个id为javascriptTemplate的html()指定给模板。如下：

<div id="example"></div>
<script>
    var template = kendo.template($('#javascriptTemplate').html());
    var data = { firstName: "Keanu" };
    var result = template(data);
    $('#example').html(result);
</script>

有一点需要注意，写在script里面的html代码是没有自动提示的。因此，可以现在页面的其他地方写好需要的HTML代码，然后拷贝到<script>代码块里面。

3. 什么时候使用#...#语法？

如果在界面上需要动态的，重复性的进行模板构建，可以使用这个语法。比如，动态构建菜单，假设从数据库里面获取了5个菜单项，都需要放置在标签<li>里面，那么我们无需在模板中写五次，只要做一个循环就可以了，如下：

<div id="example"></div>
<script id="javascriptTemplate" type="text/x-kendo-template">
    <ul>
    # for(var i=0; i<data.length; i++) { #
        <li>#: data[i] #</li>
    # } #
    </ul>
</script>
<script>
    var template = kendo.template($('#javascriptTemplate').html());
    var data = ["keanu", "diago", "ada", "sike", "sixin"];
    var result = template(data);
    $('#example').html(result);
</script>

总结来说，##语法可以包含任意的js代码段，也适用于用户自定义的变量。或者说，完全可以在页面的某个地方写好完整的javascript代码，然后将其拷贝到模板中。

4. 如何在模板中使用字符#？

如果在模板中要输出字符#，则需要转义。格式为“\#”，如下所示：

<script type="text/javascript">
    var templateString = '<a href="\\#index">#: myName #</a>';
    var template = kendo.template(templateString);
    $("#example").html(template({ myName: "Todd" }));
</script>

addEvent

添加新的调度程序事件并打开编辑表单

<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6")
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.addEvent({ title: "(No title)" });
</script>

---

editEvent

<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
var scheduler = $("#scheduler").data("kendoScheduler");
var event = scheduler.dataSource.at(0);
scheduler.editEvent(event);
</script>

---

editable.template

自定义弹出编辑器

<script id="editor" type="text/x-kendo-template">
   <h3>Edit meeting</h3>
   <p>
       <label>Title: <input name="title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="start" /></label>
   </p>
   <p>
       <label>End: <input data-role="datetimepicker" name="end" /></label>
   </p>
</script>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  editable: {
    template: $("#editor").html()
  },
  views: [
    { type: "day" }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

---

edit

当用户在编辑模式下打开调度程序事件或创建新事件时触发。
事件处理程序函数上下文（通过this关键字可用）将设置为窗口小部件实例。

事件数据

e.container jQuery

表示容器元素的jQuery对象。该元素包含编辑UI。

e.event kendo.data.SchedulerEvent

正在编辑的事件。

e.preventDefault Function

如果调用则阻止编辑操作。

e.sender kendo.ui.Scheduler

触发事件的小部件实例。

在初始化期间订阅“edit”事件

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [ "day", "month" ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ],
  edit: function(e) {
    console.log("Editing", e.event.title);
  }
});
</script>

初始化后订阅“edit”事件

<div id="scheduler"></div>
<script>
function scheduler_edit(e) {
  console.log("Editing", e.event.title);
}
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [ "day", "month" ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.bind("edit", scheduler_edit);
</script>

---

dataSource kendo.data.SchedulerDataSource

将数据项添加到数据源:

<script>
    $("#scheduler").kendoScheduler({
      date: new Date("2013/6/6")
    });
    var scheduler = $("#scheduler").data("kendoScheduler");
    scheduler.dataSource.add( {
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    });
</script>

更新数据源中的数据项:

<script>
    $("#scheduler").kendoScheduler({
      date: new Date("2013/6/6"),
      dataSource: [
        {
          id: 1,
          start: new Date("2013/6/6 08:00 AM"),
          end: new Date("2013/6/6 09:00 AM"),
          title: "Interview"
        }
      ]
    });
    var scheduler = $("#scheduler").data("kendoScheduler");
    var event = scheduler.dataSource.at(0);
    event.set("end", new Date("2013/6/6 10:00 AM"));
</script>

从数据源中删除数据项:

<script>
    $("#scheduler").kendoScheduler({
      date: new Date("2013/6/6"),
      dataSource: [
        {
          id: 1,
          start: new Date("2013/6/6 08:00 AM"),
          end: new Date("2013/6/6 09:00 AM"),
          title: "Interview"
        }
      ]
    });
    var scheduler = $("#scheduler").data("kendoScheduler");
    var event = scheduler.dataSource.at(0);
    scheduler.dataSource.remove(event);
</script>

功能特点：

1. 键盘操作
2. TimeZones（时区）
3. 轻松订阅资源和任务
4. 用户可自由编辑任务
5. 支持多种任务视图
6. 数据绑定：本地JavaScript数组或远程服务