Kendo UI 中，ViewModel、DataSource 和 Grid的关系

在 Kendo UI 中，ViewModel、DataSource 和 Grid 是构建动态数据应用的核心组件，三者协同工作实现数据的绑定、管理和展示。

---

一、三者关系图解

• ViewModel：数据管理层，使用 kendo.observable 创建响应式对象，监听数据变化。
• DataSource：数据管道，负责数据的获取、排序、分页、过滤等操作，支持本地/远程数据。
• Grid：数据展示层，依赖 DataSource 提供数据渲染表格，支持编辑、排序等功能。

---

二、基础使用步骤

1. 创建 ViewModel

   var viewModel = kendo.observable({users: [ // 数据集合 { id: 1, name: "John", age: 30 },{ id: 2, name: "Jane", age: 25 }],selectedUser: null // 响应式属性 
   });
   kendo.bind($("#app"), viewModel); // 绑定到DOM 
   

   • 通过 kendo.bind 将 ViewModel 与 HTML 元素关联，实现双向绑定。

2. 配置 DataSource

   var dataSource = new kendo.data.DataSource({data: viewModel.users, // 绑定 ViewModel 数据schema: {model: { id: "id", fields: { name: "string", age: "number" } } // 定义数据结构 },pageSize: 5, // 分页 sort: { field: "age", dir: "asc" } // 排序
   });
   

   • 支持远程数据：设置 transport 属性指定 API 地址。

3. 初始化 Grid 并绑定 DataSource

   $("#grid").kendoGrid({dataSource: dataSource, // 指定数据源 columns: [{ field: "name", title: "姓名" },{ field: "age", title: "年龄" },{ command: ["edit", "destroy"] } // 内置编辑按钮 ],editable: "popup", // 编辑模式 pageable: true // 启用分页 
   });
   

   • 关键配置：
     • columns 定义列信息，field 需与 DataSource 字段一致。
     • editable 启用行内编辑（默认需配置 DataSource 的 CRUD 方法）。

---

三、进阶交互场景

1. 动态更新数据

   // 添加新数据
   viewModel.users.push({ id: 3, name: "Tom", age: 28 });
   dataSource.read(); // 刷新 DataSource
   $("#grid").data("kendoGrid").refresh(); // 更新 Grid 视图
   

   • 修改 ViewModel 后需手动触发 read() 和 refresh() 同步。

2. 响应 Grid 事件

   $("#grid").kendoGrid({dataBound: function(e) {// 数据渲染完成后执行console.log("当前数据量:", e.sender.dataSource.total());},edit: function(e) {// 编辑行时获取数据 console.log("编辑的行数据:", e.model.toJSON());}
   });
   

   • dataBound 用于自适应列宽、数据校验等。

3. 服务端分页/过滤

   var remoteDataSource = new kendo.data.DataSource({transport: {read: {url: "/api/users",dataType: "json"}},serverPaging: true, // 启用服务端分页 serverFiltering: true // 启用服务端过滤
   });
   

   • 需后端配合处理 page、pageSize、filter 参数。

---

四、常见问题解决

1. 数据变更后 Grid 未更新

   • 确保调用 dataSource.read() 和 grid.refresh()。

2. 自定义编辑列（如 DropDownList）

   • 在 columns.template 中定义编辑控件，在 dataBound 中初始化组件。

3. 获取 Grid 全部数据

   var allData = $("#grid").data("kendoGrid").dataSource.data();
   

Kendo 框架发起 HTTP 请求

一、核心机制：DataSource 的 transport 配置
Kendo 框架通过 DataSource 组件管理数据请求，其核心是 transport 属性配置。该属性定义了与后端交互的 HTTP 方法（GET/POST/PUT/DELETE），并支持异步操作。

二、发起请求的步骤

1. 配置 DataSource

var dataSource = new kendo.data.DataSource({transport: {read: { // GET 请求示例 url: "/api/data",type: "GET",dataType: "json"},update: { // POST/PUT 请求示例 url: "/api/update",type: "POST",contentType: "application/json",data: function (item) {return JSON.stringify(item); // 序列化数据 }}},schema: { model: { id: "id" } }, // 定义主键 batch: true // 批量模式（可选）
});

2. 手动触发请求

• 读取数据：

  dataSource.read(); // 触发 transport.read 配置的 GET 请求 
  

• 提交变更：

  dataSource.sync(); // 自动根据数据状态（新增/修改/删除）触发对应 transport 方法 
  

3. 处理响应与错误

dataSource.bind("requestEnd", function(e) {if (e.type === "read") {console.log("数据加载完成:", e.response);} else if (e.type === "update") {console.log("数据更新成功:", e.response);}
});dataSource.bind("error", function(e) {console.error("请求失败:", e.xhr.status, e.errorThrown);
});

三、不同类型请求的配置

请求类型	适用场景	配置要点
GET	数据查询	使用 transport.read，参数通过 data 函数动态附加到 URL
POST	数据提交/创建新记录	设置 type: "POST"，通过 data 处理请求体格式（如 JSON）
PUT	更新已有数据	类似 POST，但需指定 type: "PUT"
DELETE	删除数据	配置 transport.destroy，通常传递主键参数

四、高级用法

1. 自定义请求头：

   transport: {read: {url: "/api/data",headers: { "Authorization": "Bearer " + token } // 添加认证头}
   }
   

2. 动态参数处理：

   data: function(options) {return { page: dataSource.page(), size: dataSource.pageSize() }; // 分页参数 
   }
   

3. 文件上传：
   • 需结合 <input type="file"> 和 FormData 处理（类似通用 HTTP 文件上传逻辑）。

五、常见问题排查

• 403 禁止访问：
  • 检查接口权限配置（如 CORS、Token 有效性）。
  • 确保请求头包含正确的认证信息（如 Authorization）。
• 数据未刷新：
  • 调用 dataSource.read() 后需等待异步响应，通过 requestEnd 事件监听完成状态。
• 跨域问题：
  • 服务端需配置 Access-Control-Allow-Origin，Kendo 无法绕过浏览器安全策略。