Kendo UI 中，ViewModel、DataSource 和 Grid的关系。Kendo 框架发起 HTTP 请求

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);
});

三、不同类型请求的配置

四、高级用法

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 无法绕过浏览器安全策略。