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 無法繞過瀏覽器安全策略。