国产熟女,亚洲精品久久AV,91自拍福利

国产自产第一-国产自产对白一区-国产自产精品-国产自产区44页-国产自产在线-国产自产自拍-国产自产自拍视频-国产自精品

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

原創(chuàng)|使用教程|編輯：龔雪|2017-10-13 09:36:11.000|閱讀 4687 次

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

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

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

【Kendo UI R3 2017最新版下載】

方法

1. 創(chuàng)建與控制器操作一致命名的后端，例如：

2. （此步驟適用于可讀網(wǎng)格的只讀網(wǎng)格，請轉(zhuǎn)到步驟3.）當(dāng)然，只讀網(wǎng)格只需要較少復(fù)雜的邏輯。我們創(chuàng)建了一個簡單的函數(shù)，在初始ajax請求的成功處理程序中調(diào)用。它增加了一些常用選項(xiàng)，其數(shù)據(jù)源只需要讀操作。

// add the grid options here
function populateGrid(response) {
var columns = generateColumns(response);
var gridOptions = {
dataSource: {
transport:{
read: function(options){
options.success(response);
}
},
pageSize: 10,
page: 1
},
columns: columns,
pageable: true,
height:300
};

// reuse the same grid, swapping its options as needed
var grid = $("#grid").data("kendoGrid");
if(grid){
grid.setOptions(gridOptions);
} else {
$("#grid").kendoGrid(gridOptions);
}
}

由于不希望“ID”列占用很多空間，所以創(chuàng)建了另一個generateColumns函數(shù)，因此我們可以更改列配置，此時(shí)可以自定義所有列屬性。

function generateColumns(response){
var columnNames = Object.keys(response[0]);
return columnNames.map(function(name){
var isIdColumn = name.indexOf("ID") > -1 || name.indexOf("Id") > -1;
return {
field: name,
width: isIdColumn ? 50 : 180,
title: isIdColumn ? "Id" : name
};
})
}

此時(shí)，具有動態(tài)數(shù)據(jù)的只讀Kendo UI Grids已經(jīng)準(zhǔn)備好，為了向您展示使用上述功能是多么容易，我們添加了一個帶有三個按鈕的Kendo UI ToolBar。當(dāng)按下每個按鈕時(shí)，點(diǎn)擊功能填充相應(yīng)的Kendo UI網(wǎng)格。