kendo-ui - KendoNumericTextBox百分比格式

kendo-ui - KendoNumericTextBox百分比格式,第1张

我想实现以下目标:应在Kendo NumericTextBox中编辑百分比值(在模型中表示,例如“0.7”表示70%)。 NumericTextBox的“P”格式的正常行为是,当您编辑值时,它显示“0.7”,当查看值时,它显示“70%”。现在在我们的场景中,我们想要在编辑值时显示“70”(而不是“0.7”)。

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

我找到了以下方法来定义一个新的“百分比”绑定,它可以正确地进行转换:http://boniestdeveloper.net/post/2013/04/16/Editing-percentage-values-with-a-KendoUI-NumericTextBox.aspx。现在我想在自定义小部件“kendoNumericPercentageTextBox()”中封装此绑定,其行为与“kendoNumericTextBox()”相同,但呈现“百分比”绑定。

任何人都可以给我一个提示,我如何定义这样一个呈现自定义绑定并扩展kendoNumericTextBox小部件的小部件?

最佳答案:

1 个答案:

答案 0 :(得分:1)

我知道这是一个老问题,但现在可以通过factor option开箱即可实现:

  

指定值乘以的因子。获得的结果用作编辑值。因此,如果在NumericTextBox中输入15作为字符串并且因子值设置为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/

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
教程弟学习网站 » kendo-ui - KendoNumericTextBox百分比格式

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情