如何在 Kendo UI 中将动态输入字段制作为数字文本框?
How to make a dynamic input field as a numeric textbox in Kendo UI?
这是我的情况。
我正在借助此 article 制作动态表单。
在这里你可以看到它(文章演示)使用 kendo template
。
<script id="fieldsTemplate" type="text/x-kendo-template">
<li>
<label data-bind="attr: { for: name}, text: label"></label>
<input data-bind="attr: { type: type, name: name, class: css}" # if (get("required")) {# required #} # />
</li>
</script>
表格生成后,此表格只是使用HTML5
制作表格。它没有 kendo 属性。例如,如果我绑定 data-role
属性并且值为 numerictextbox
它不会给我一个数字文本框(认为它的类型是数字)。它没有这些属性。(如果我输入一个数字,它不会显示默认的小数点。它只显示那个数字。)
但是在 this 示例中说,如果我们将数据角色属性和值添加为数字文本框,它将成为数字文本框。
但在 documentation or in this 中,似乎我必须调用 kendoNumericTextBox 方法来制作数字文本框。
即使我尝试将此代码添加到模板,但它不起作用(请假设我使用 this 正确添加了此代码)。
$("#mytextboxid").kendoNumericTextBox();
那我还有什么选择呢??
非常感谢
您必须将 data-role 属性设置为输入元素才能将元素转换为 kendo control/element。请尝试使用以下代码片段。
<body>
<div id="example">
<!-- container UL to host input fields -->
<ul data-template="fieldsTemplate" data-bind="source: fields"></ul>
</div>
<!-- Kendo Template binds properties from model to input fields -->
<script id="fieldsTemplate" type="text/x-kendo-template">
<li>
<label data-bind="attr: { for: name}, text: label"></label>
<input name=#= name # class=#= css # # if (get("required")) {# required #} #
# if (type == 'number') {# data-role="numerictextbox" #}else{# type=#=type# #}# />
</li>
</script>
<script type="text/javascript">
// retrieve the model from an API call
var model = {
"fields": [{
"css": "cssClass1",
"label": "Field 1",
"name": "Field1",
"required": false,
"type": "text"
},
{
"css": "cssClass2",
"label": "Field 2",
"name": "Field2",
"required": true,
"type": "number"
},
{
"css": "cssClass2",
"label": "Checkbox Field",
"name": "CheckField",
"required": false,
"type": "checkbox"
},
{
"css": "cssClass2",
"label": "Email Address",
"name": "Email",
"required": true,
"type": "email"
},
{
"css": "cssClass2",
"label": "Password",
"name": "Password",
"required": true,
"type": "password"
}
]
};
// convert the JSON to observable object
var viewModel = kendo.observable(model);
// bind the model to the container
kendo.bind($("#example"), viewModel);
</script>
</body>
如有任何疑问,请告诉我。
这是我的情况。
我正在借助此 article 制作动态表单。
在这里你可以看到它(文章演示)使用 kendo template
。
<script id="fieldsTemplate" type="text/x-kendo-template">
<li>
<label data-bind="attr: { for: name}, text: label"></label>
<input data-bind="attr: { type: type, name: name, class: css}" # if (get("required")) {# required #} # />
</li>
</script>
表格生成后,此表格只是使用HTML5
制作表格。它没有 kendo 属性。例如,如果我绑定 data-role
属性并且值为 numerictextbox
它不会给我一个数字文本框(认为它的类型是数字)。它没有这些属性。(如果我输入一个数字,它不会显示默认的小数点。它只显示那个数字。)
但是在 this 示例中说,如果我们将数据角色属性和值添加为数字文本框,它将成为数字文本框。
但在 documentation or in this 中,似乎我必须调用 kendoNumericTextBox 方法来制作数字文本框。
即使我尝试将此代码添加到模板,但它不起作用(请假设我使用 this 正确添加了此代码)。
$("#mytextboxid").kendoNumericTextBox();
那我还有什么选择呢?? 非常感谢
您必须将 data-role 属性设置为输入元素才能将元素转换为 kendo control/element。请尝试使用以下代码片段。
<body>
<div id="example">
<!-- container UL to host input fields -->
<ul data-template="fieldsTemplate" data-bind="source: fields"></ul>
</div>
<!-- Kendo Template binds properties from model to input fields -->
<script id="fieldsTemplate" type="text/x-kendo-template">
<li>
<label data-bind="attr: { for: name}, text: label"></label>
<input name=#= name # class=#= css # # if (get("required")) {# required #} #
# if (type == 'number') {# data-role="numerictextbox" #}else{# type=#=type# #}# />
</li>
</script>
<script type="text/javascript">
// retrieve the model from an API call
var model = {
"fields": [{
"css": "cssClass1",
"label": "Field 1",
"name": "Field1",
"required": false,
"type": "text"
},
{
"css": "cssClass2",
"label": "Field 2",
"name": "Field2",
"required": true,
"type": "number"
},
{
"css": "cssClass2",
"label": "Checkbox Field",
"name": "CheckField",
"required": false,
"type": "checkbox"
},
{
"css": "cssClass2",
"label": "Email Address",
"name": "Email",
"required": true,
"type": "email"
},
{
"css": "cssClass2",
"label": "Password",
"name": "Password",
"required": true,
"type": "password"
}
]
};
// convert the JSON to observable object
var viewModel = kendo.observable(model);
// bind the model to the container
kendo.bind($("#example"), viewModel);
</script>
</body>
如有任何疑问,请告诉我。