精品午夜成人,高清无码免费,91影院在

Kendo UI使用教程：Kendo UI Grid中的動(dòng)態(tài)數(shù)據(jù)（三）

原創(chuàng)|使用教程|編輯：龔雪|2017-10-19 10:31:07.000|閱讀 1472 次

概述：通過(guò)70多個(gè)可自定義的UI組件，Kendo UI Professional可以創(chuàng)建數(shù)據(jù)豐富的桌面、平板和移動(dòng)Web應(yīng)用程序。本教程將為大家介紹如何逐步創(chuàng)建具有動(dòng)態(tài)數(shù)據(jù)的Kendo UI grids。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>

【Kendo UI R3 2017最新版下載】

本教程將為大家介紹如何逐步創(chuàng)建具有動(dòng)態(tài)數(shù)據(jù)的Kendo UI grids。當(dāng)您在一遍又一遍輸入相同代碼時(shí)，可以知道有些是可以關(guān)閉的，您輸入的代碼正在獲取WET。創(chuàng)建具有動(dòng)態(tài)數(shù)據(jù)的可編輯Kendo UI Grids是非常簡(jiǎn)單的，Progress的技術(shù)支持工程師幫助很多客戶解決了有關(guān)動(dòng)態(tài)數(shù)據(jù)的問(wèn)題，并且提供了有關(guān)動(dòng)態(tài)數(shù)據(jù)的建議，在本文中我們將會(huì)為大家一一解答。

5. 下一行是網(wǎng)格列。使用此功能自定義格式、寬度或其他列設(shè)置。

function generateColumns(sampleDataItem) {
var columnNames = Object.keys(sampleDataItem);
return columnNames.map(function(name) {
var isIdField = name.indexOf("ID") !== -1;
return {
field: name,
width: (isIdField ? 40 : 200),
title: (isIdField ? "Id" : name)
};
});
}

6. 這是最后一步。模式、數(shù)據(jù)源和列是已知的，我們可以初始化動(dòng)態(tài)Kendo UI Grid。在我們的函數(shù)中，傳遞了初始化網(wǎng)格元素的ID，但是可以擴(kuò)展createGrid函數(shù)，并將新生成的網(wǎng)格附加在其他位置。

function createGrid(gridName, baseUrl) {
$.ajax({
url: baseUrl,
success: function(response) {
var sampleDataItem = response[0];
var model = generateModel(sampleDataItem);
var dataSource = generateDataSource(baseUrl, model, editable);
var columns = generateColumns(sampleDataItem);
var gridOptions = {
toolbar: ["create", "save", "cancel"],
dataSource: dataSource,
columns: columns,
pageable: true,
editable: editable,
height: 450
};

columns.push({ command: "destroy", title: " ", width: 170 });

$("#" + gridName).kendoGrid(gridOptions);
}
});
}

具有單行代碼的動(dòng)態(tài)可編輯網(wǎng)格的結(jié)果初始化：

<div id="products"></div>
<script>
createGrid("products", "//demos.telerik.com/kendo-ui/service/products/");
</script>

這只是Kendo UI Grid中最基本的動(dòng)態(tài)數(shù)據(jù)，還有很多可以做，可以根據(jù)需求擴(kuò)展和插入。在這里創(chuàng)建的示例可以重復(fù)使用，以便節(jié)省您的時(shí)間和精力。當(dāng)需要?jiǎng)?chuàng)建許多類似網(wǎng)格時(shí)——一個(gè)命名約定、一個(gè)額外單一的ajax請(qǐng)求和編寫(xiě)一個(gè)更抽象的主要邏輯，以便可以重復(fù)使用。