Kendo UI使用教程:Kendo UI Grid中的動態資料(二)
Kendo UI首推團隊升級培訓套包,享超低折扣!檢視詳情>>>
本教程將為大家介紹如何逐步建立具有動態資料的Kendo UI grids。當您在一遍又一遍輸入相同程式碼時,可以知道有些是可以關閉的,您輸入的程式碼正在獲取WET。建立具有動態資料的可編輯Kendo UI Grids是非常簡單的,Progress的技術支援工程師幫助很多客戶解決了有關動態資料的問題,並且提供了有關動態資料的建議,在本文中我們將會為大家一一解答。
3. 想要建立一個動態可編輯的Kendo UI Grid,我們首先需要在dataSource之前建立dataSource模式模型。在初始ajax請求的成功回撥中,將示例dataItem傳遞給generateModel函式。 該功能完成兩個非常重要的任務:
- 檢查每個屬性的型別,以便網格可以初始化正確的編輯器。例如,數字型別將建立一個Kendo UI NumericTextBox,日期型別將在編輯模式下配備Kendo UI DatePicker。
- 查詢唯一的模式模型ID,使其不可編輯。 唯一ID是編輯功能的先決條件。
該功能可以擴充套件為包括其他模式模型設定,如驗證和預設值。或者您可以收集日期型別的欄位名稱,以便稍後在列設定中進行格式化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
var
dateFields = []; function
generateModel(sampleDataItem) { var
model = {}; var
fields = {}; for
( var
property in
sampleDataItem) { if
(property.indexOf( "ID" )
!== -1) { model[ "id" ]
= property; } var
propType = typeof
sampleDataItem[property]; if
(propType === "number" )
{ fields[property]
= { type: "number" }; if (model.id
=== property){ fields[property].editable
= false ; } } else
if
(propType === "boolean" )
{ fields[property]
= { type: "boolean" }; } else
if
(propType === "string" )
{ var
parsedDate = kendo.parseDate(sampleDataItem[property]); if
(parsedDate) { fields[property]
= { type: "date" }; dateFields[property]
= true ; } } } model.fields
= fields; return
model; } |
4. 現在我們有了模式模型,可以建立Kendo UI資料來源。該函式應該接收基本URL和模型作為引數。 由於服務遵循命名約定,因此可以使用CRUD操作輕鬆建立此動態資料來源:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
function
generateDataSource(baseURL, model) { var
dataSource = { transport:
{ read:
{ url:
baseURL }, create:{ url:
baseURL + "Create" }, update:{ url:
baseURL + "Update" }, destroy:{ url:
baseURL + "Destroy" }, parameterMap: function (options,
operation) { if
(operation !== "read"
&& options.models) { return
{models: kendo.stringify(options.models)}; } } }, batch: true , schema:
{ model:model }, pageSize:
10 }; return
dataSource; } |
相關文章
- Kendo UI Grid中的動態資料(三)UI
- Kendo UI Grid中的動態資料(一)UI
- Kendo UI Grid 使用總結UI
- Kendo UI:Grid 表格元件UI元件
- kendo uiUI
- Kendo UI Grid 批量編輯使用總結UI
- Kendo UI:grid完成增刪改查(*)UI
- Kendo UI常用示例彙總(二十)UI
- Kendo UI常用示例彙總(十九)UI
- Kendo UI常用示例彙總(二十四)UI
- Kendo UI常用示例彙總(二十二)UI
- Kendo UI常用示例彙總(二十一)UI
- kendo ui:開源的html5開發框架UIHTML框架
- Kendo UI常用示例彙總(I樹列表示例)UI
- UI元件Kendo UI釋出R2 2018|附下載UI元件
- kendo-ui彈窗window外掛引數及方法UI
- 靈活使用Kendo UI 核心元件開發web應用資訊提示功能UI元件Web
- 【版本更新】完整UI庫Kendo UI釋出R3 2017|附下載UI
- ui-grid入門教程(二)UI
- Kendo UI ASP.NET MVC使用教學視訊集錦(高清線上觀看)UIASP.NETMVC
- UI控制元件 Kendo UI釋出R2 2018 SP1|附下載UI控制元件
- 【更新】Kendo UI for jQuery釋出R2 2018|附下載UIjQuery
- 【全網獨家】Kendo UI培訓正式上線,搶先預約有驚喜!UI
- vue+element-ui 修改動態生成的表格(el-table)中的資料VueUI
- ADF 第二篇:使用UI建立資料工廠UI
- cube ui RecycleList 不自動追加資料UI
- UI培訓教程分享:APP啟動頁UI介面設計UIAPP
- UI設計培訓教程分享:UI設計師的色彩使用技巧UI
- SAP UI5 sap.ui.layout.Grid 控制元件概述UI控制元件
- Flutter 熱更新及動態UI生成FlutterUI
- SAP UI5 初學者教程之十九 - SAP UI5 資料型別和複雜的資料繫結UI資料型別
- 探索AI驅動Web開發動態UIAIWebUI
- SAP UI5 應用中的 sap.ui.require 使用場景UI
- iOS10 UI教程禁用檢視與使用者的互動iOSUI
- SAP UI5 應用中的 sap.ui.require.toUrl 使用場景UI
- UI培訓教程分享:UI設計的分類有哪些?UI
- Swift UI 學習資料SwiftUI
- SAP 電商雲 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用UIAngularJS