KendoNumericTextBox百分比格式

Question

我想实现以下目标:一个百分比值(在模型中用"0.7“表示为70%)应该在一个Kendo NumericTextBox中编辑。NumericTextBox的"P“格式的正常行为是编辑值时显示"0.7”，查看值时显示"70%“。现在，在我们的场景中，我们希望在编辑值时显示"70“(而不是"0.7")。

我发现Kendo NumericTextBox不支持这种行为。当然，我可以使用自定义格式，例如"format：'#.00 \%'“--但是在这种情况下，模型值必须为70%而不是”0.7“.

我找到了一种定义新的“百分比”绑定的方法，它正确地执行转换：http://boniestdeveloper.net/post/2013/04/16/Editing-percentage-values-with-a-KendoUI-NumericTextBox.aspx。现在，我希望将此绑定封装在自定义小部件"kendoNumericPercentageTextBox()“中，它的行为与"kendoNumericTextBox()”相同，但呈现“百分比”绑定。

有人能告诉我如何定义这样一个小部件来呈现自定义绑定并扩展kendoNumericTextBox小部件吗？

Answer 1

我知道这是个老生常谈的问题，但现在你想要实现的是，用 option来实现这一目标。

指定将值乘以的因子。得到的结果被用作编辑值。因此，如果在NumericTextBox中输入15 as字符串，并将因子值设置为100，则可视值将为1500。在blur上，视觉值将被除以100，从而将小部件值缩放到原来的比例。

示例：

$("#numerictextbox").kendoNumericTextBox({
   format: "p0",
   factor: 100,
   min: 0,
   max: 1,
   step: 0.01, 
   change: function() {
     console.log(this.value());
   }
});

JSfiddle：https://jsfiddle.net/qs4jnLqs/3/