这个看起来很简单,只是不知道在哪里处理它。我正在通过 REST JSON 从 SQL 数据库中检索列名值。下拉列表中的值按预期带有下划线 (Customer_Name)。我想显示一个不带下划线的“友好”(客户名称)版本,但仍将我的值(客户名称)发送到我的 REST 服务。我查看了 Underscore.js,但不确定从哪里开始,这可能比我想象的要简单。谢谢!
问问题
521 次
1 回答
1
我不知道您是如何从您的休息服务接收数据的。
但基本上,您只需映射 REST 服务接收的数据,根据需要更改值。
这是一些示例代码:
// Call to the REST service and when done call the callback function loadDDL
$.ajax({
type: "POST",
url: "my-rest-service"
}).done(loadDDL);
// Callback function when returning from the REST service
// -> load data in the DDL (here, it has the id "my-ddl")
function loadDDL(data) {
$("#my-ddl").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: _.map(data, makeFriendlyName),
index: 0
});
}
// Function used by the _.map function in order
// change dynamically the labels in the DDL
function makeFriendlyName(obj) {
return {
text: obj.text,
value: obj.value.replace("_", " ")
};
}
编辑 :
基于 OP 的小提琴,这里是使用模板而不是直接更改数据源的示例代码:
function loadDDL(data) {
$("#my-ddl").kendoDropDownList({
autoBind: true,
dataTextField: "DOMAINQUERY",
dataValueField: "COLUMN_NAME",
dataSource: dataSourceSearch1,
template: "${DOMAINQUERY.replace(/_/g, ' ')}"
});
}
编辑 2:
为了直接翻译数据源,我再次通过在数据源change
事件中动态更改文本来重新映射数据源:
var dataSourceSearch1 = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.kendoui.com/service/Customers",
dataType: "jsonp"
}
},
change: changeDS // <-- Here add a change event : each time the datasource changes, this event is being raised
});
// This is the function call when the DS changes
// the data stuff is in the `items` property which is the object send via the REST service
function changeDS(datasource) {
_.map(datasource.items, makeFriendlyName);
}
// Function to apply to each data -> here I just replace all spaces in the
// `ContactName` field by `_`
function makeFriendlyName(data) {
data.ContactName = data.ContactName.replace(/ /g, '_');
return data;
}
// Fill the DDL with the previous datasource
var cboSearchField1 = $("#cboSearchField1").kendoDropDownList({
dataTextField: "ContactName",
dataValueField: "ContactName",
filter: "contains",
autobind: true,
select: cboSearchField1_Selected,
change: cboSearchField1_onChange,
dataSource: dataSourceSearch1
}).data("kendoDropDownList");
于 2013-10-28T13:34:10.627 回答