2016-08-17 127 views
0

我使用KendoUI和angular來實現一個非常類似的場景,就像這個例子來自Telerik網站。 http://dojo.telerik.com/AreTa/2Kendo Datasource CRUD with templates

這是我

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>Kendo UI Snippet</title> 

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"/> 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"/> 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css"/> 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"/> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> 
</head> 
<body> 

<style>html { font: 12px sans-serif; }</style> 

<div id="grid"></div> 

<script> 
var sampleData = [ 
{ProductName: "Sample Name", Description: "Sample Description"} 
]; 

// custom logic start 

var sampleDataNextID = sampleData.length + 1; 

function getIndexByName(name) { 
var idx, 
l = sampleData.length; 

for (var j=0; j < l; j++) { 
if (sampleData[j].getIndexById == name) { 
return j; 
} 
} 
return null; 
} 

// custom logic end 

$(document).ready(function() { 
var dataSource = new kendo.data.DataSource({ 
transport: { 
read: function (e) { 
// on success 
e.success(sampleData); 
// on failure 
//e.error("XHR response", "status code", "error message"); 
}, 
create: function (e) { 
// assign an ID to the new item 
//e.data.ProductName = e.data; 
// save data item to the original datasource 
sampleData.push(e.data); 
// on success 
e.success(e.data); 
// on failure 
//e.error("XHR response", "status code", "error message"); 
}, 
update: function (e) { 
// locate item in original datasource and update it 
sampleData[getIndexByName(e.data.ProductName)] = e.data; 
// on success 
e.success(); 
// on failure 
//e.error("XHR response", "status code", "error message"); 
}, 
destroy: function (e) { 
// locate item in original datasource and remove it 
sampleData.splice(getIndexByName(e.data.ProductName), 1); 
alert("Delete Success"+e.data.ProductName) ; 
// on success 
e.success(); 
// on failure 
//e.error("XHR response", "status code", "error message"); 
} 
}, 
error: function (e) { 
// handle data operation error 
alert("Status: " + e.status + "; Error message: " + e.errorThrown); 
}, 
pageSize: 10, 
batch: false, 
schema: { 
model: { 
id: "ProductName", 
fields: {        
    ProductName: { validation: { required: true } },        
    Description: { type: "text"} 
} 
} 
} 
}); 

$("#grid").kendoGrid({ 
dataSource: dataSource, 
pageable: true, 
toolbar: ["create"], 
columns: [ 
{ field: "ProductName", title: "Mobile Phone" }, 
{ field: "Description", width: "120px" }, 
{ command: ["destroy"], title: "Action;", width: "200px" } 
], 
editable: "inline" 
}); 
}); 
</script> 
</body> 
</html> 

和它的作品,它是Telerik的網站的方式

我想要做的變化是,在「創造」,我想將產品名稱字段是一個下拉,而不是文本字段,填充了我在另一個json(不sampleData)中的值。它有一個值(productName)和說明 - 說明 此外,說明字段不可鍵入,而是從所選內容的下拉列表的描述中「獲得」。

任何人都可以幫忙嗎?

回答

0

使用用於ProductName字段自定義編輯器:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor

http://demos.telerik.com/kendo-ui/grid/editing-custom

附上change處理程序,以將DropDownList和set()對應的值,以所述數據項的Description字段(這是Kendo UI模型實例,你已經從編輯器函數的參數中獲得了)。

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#events-change

http://docs.telerik.com/kendo-ui/api/javascript/data/observableobject#methods-set

您還需要防止Description領域的直接編輯。如果您爲此字段使用自定義的「編輯器」,則可以輕鬆實現此功能,該功能僅在<span>元素中輸出當前值。