Kendo-UI - 通过 JSON 创建动态表单 [英] Kendo-UI - Creating a Dynamic Form via JSON
问题描述
我已经能够使用 JSON 和 Kendo.Observable 成功构建动态表单,但是我无法在同一个 JSON 中成功初始化下拉列表值.我让它工作的唯一方法是在创建后将下拉列表绑定到单独的 json 请求.看下面的例子....
I have been able to successfully build out a dynamic form using JSON and Kendo.Observable, however I cannot initialize the dropdownlist values successfully within the same JSON. The only way I can get it to work is by binding the dropdown lists to a separate json request after creation. See the example below....
这是一些有效的 JSON 示例(无下拉列表)
Here is an example of some JSON that works (no dropdown list)
{"fields": [
{"name" : "FirstName", "label" : "First Name", "type" : "text", "css" : "test"},
{"name" : "LastName", "label" : "Last Name", "type" : "text", "css" : "test"},
{"name" : "Email", "label" : "Email", "type" : "text", "css" : "test"},
{"name" : "Phone", "label" : "Phone", "type" : "text", "css" : "test"},
{"name" : "Subscribed", "label" : "Subscribed", "type" : "checkbox", "css" : "test"}
]}
这是一个示例,我添加了一个下拉列表,不打算发布整个内容,我在下面尝试了许多不同的变体来尝试填充选择,但找不到任何有效的方法
Here is an example where I have added a dropdown, not going to post the whole thing, I have tried a number of different variations on the below to try and populate the select but can't find any that work
{"fields": [
{"name" : "Email", "label" : "Email", "type" : "text", "css" : "test"},
{"name" : "FirstName", "label" : "First Name", "type" : "text", "css" : "test"},
{"name" : "LastName", "label" : "Last Name", "type" : "text", "css" : "test"},
{"name" : "Company", "label" : "Company", "type" : "text", "css" : "test"},
{"name" : "ddlCountry", "label" : "Country", "type" : "select", "dataTextField" : "text", "dataValueField" : "value", "dataSource":[{"text" : "AF","value" : "Afghanistan"},{"text" : "AL","value" : "Albania"},{"text" : "DZ","value" : "Algeria"},{"text" : "AS","value" : "American Samoa"},{"text" : "AD","value" : "Andorra"},...etc...
这是绑定它的脚本
$.ajax({
url: "http://localhost/go/getformjson",
type: "GET",
dataType: "json",
success: function (model) {
// convert the JSON to observable object
var viewModel = kendo.observable(model);
// bind the model to the container
kendo.bind($("#example"), viewModel);
}
});
推荐答案
需要指定data-text-field和data-value-field属性:
You need to specify the data-text-field and data-value-field attributes:
<select data-bind="source: options" data-text-field="ddltext" data-value-field="ddlvalue" />
这是您的小提琴的更新版本:http://jsfiddle.net/aUAJv/64/
Here is updated version of your fiddle: http://jsfiddle.net/aUAJv/64/
这篇关于Kendo-UI - 通过 JSON 创建动态表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!