【问题标题】:Kendo-UI - Creating a Dynamic Form via JSONKendo-UI - 通过 JSON 创建动态表单
【发布时间】:2014-04-18 00:10:54
【问题描述】:

我已经能够使用 JSON 和 Kendo.Observable 成功构建动态表单,但是我无法在同一个 JSON 中成功初始化下拉列表值。我可以让它工作的唯一方法是在创建后将下拉列表绑定到单独的 json 请求。请参阅下面的示例....

这是一些有效的 JSON 示例(没有下拉列表)

{"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"}
                ]}

这是一个示例,我添加了一个下拉列表,而不是发布整个内容,我在下面尝试了许多不同的变体来尝试填充选择,但找不到任何有效的方法

 {"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);
        }
    });

【问题讨论】:

  • 你能提供同样的 JSFiddle 吗?
  • 这是一个没有下拉列表的工作表单的 JSFiddle jsfiddle.net/SKmX6/32
  • 我已经更接近了这一点,但唯一突出的一点是为什么下拉菜单显示 [Object] 而不是文本。在这里更新了小提琴jsfiddle.net/aUAJv/64

标签: json kendo-ui telerik-mvc


【解决方案1】:

需要指定data-text-field和data-value-field属性:

<select data-bind="source: options" data-text-field="ddltext" data-value-field="ddlvalue" />

这里是你的小提琴的更新版本:http://jsfiddle.net/aUAJv/64/

【讨论】:

  • 做到了。谢谢。
  • @Atanas Korchev 我使用你的答案。在某些情况下,在我的应用程序中,它会在控制台中返回错误“未捕获的 ReferenceError:ddlvalue 未定义”。有时它有时会起作用,有时不起作用。有什么需要注意的吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-02-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多