数字框（numberbox）

最新推荐文章于 2024-05-09 14:30:07 发布
最新推荐文章于 2024-05-09 14:30:07 发布
阅读量3.2k 收藏 1
点赞数 1
分类专栏： easy_ui

数字框（numberbox）用于让用户仅能输入数字的值。它可以把输入元素转换为不同类型的输入（比如：数字 numeric、百分比 percentage、货币 currency，等等）。更多的输入类型依赖 'formatter' 和 'parser' 函数来定义。

1、用法

（1）、从标记创建数字框（numberbox）。

[html]  view plain  copy
  1. <input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2">  

（2）、使用 javascript 创建数字框（numberbox）。

[html]  view plain  copy
  1. <input type="text" id="nn">  
  2. $('#nn').numberbox({  
  3.     min:0,  
  4.     precision:2  
  5. });  

2、属性

该属性扩展自验证框（validatebox），下面是为数字框（numberbox）添加的属性。

名称

类型

描述

默认值

disabled

boolean

定义是否禁用该字段。

false

value

number

默认值。

 

min

number

允许的最小值。

null

max

number

允许的最大值。

null

precision

number

显示在小数点后面的最大精度。

0

decimalSeparator

string

分隔数字的整数部分和小数部分的分隔字符。

.

groupSeparator

string

分隔整数组合的字符。

 

prefix

string

前缀字符串。

 

suffix

string

后缀字符串。

 

filter

function(e)

定义如何过滤被按下的键，返回 true 则接受输入字符。

该属性自版本 1.3.3 起可用。

 

formatter

function(value)

用来格式数字框（numberbox）值的函数。返回显示在框中的字符串值。

 

parser

function(s)

用来解析字符串的函数。返回数字框（numberbox）值。

 

 

3、事件

名称

参数

描述

onChange     

newValue,oldValue           

当字段值改变时触发。                    

4、方法

  该方法扩展自验证框（validatebox），下面是为数字框（numberbox）添加或重写的方法。

名称

参数

描述

options

none          

返回选项（options）对象。

destroy

none

销毁数字框（numberbox）对象。

disable

none

禁用该域。

enable

none

启用该域。

fix

none

把值固定为有效的值。

setValue      

none

设置数字框（numberbox）的值。
代码实例：

$('#nn').numberbox('setValue', 206.12);

getValue

none

获取数字框（numberbox）的值。
代码实例：

var v = $('#nn').numberbox('getValue');

alert(v);

clear

none

清除数字框（numberbox）的值。

reset

none

重置数字框（numberbox）的值。该方法自版本 1.3.2 起可用。     

 

5、实例

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>NumberBox - jQuery EasyUI Demo</title>  
  6. <link rel="stylesheet" type="text/css" href="../css/easyui.css">  
  7. <link rel="stylesheet" type="text/css" href="../css/icon.css">  
  8. <link rel="stylesheet" type="text/css" href="../css/demo.css">  
  9. <script type="text/javascript" src="../js/jquery.min.js"></script>  
  10. <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>  
  11. </head>  
  12. <body>  
  13. <div style="margin:20px 0;"></div>  
  14. <div class="easyui-panel" style="width:800px;padding:60px 100px;">  
  15. <div style="margin-bottom:20px">  
  16. <div>List Price:</div>  
  17. <input class="easyui-numberbox" precision="2" value="234.56545"></input>  
  18. </div>  
  19. <div style="margin-bottom:20px">  
  20. <div>Amount:</div>  
  21. <input class="easyui-numberbox" value="100.223565"></input>  
  22. </div>  
  23. <div style="margin-bottom:20px">  
  24. <div>width: 100%</div>  
  25. <input class="easyui-numberbox" precision="2" value="234.56" style="width:100%">  
  26. </div>  
  27. <div style="margin-bottom:20px">  
  28. <div>width: 50%</div>  
  29. <input class="easyui-numberbox" value="100" style="width:50%">  
  30. </div>  
  31. <div style="margin:20px 0;"></div>  
  32. <table>  
  33. <tr>  
  34. <td>Number in the United States</td>  
  35. <td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:','"></input></td>  
  36. </tr>  
  37. <tr>  
  38. <td>Number in France</td>  
  39. <td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:' ',decimalSeparator:','"></input></td>  
  40. </tr>  
  41. <tr>  
  42. <td>Currency:USD</td>  
  43. <td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:',',decimalSeparator:'.',prefix:'$'"></input></td>  
  44. </tr>  
  45. <tr>  
  46. <td>Currency:EUR</td>  
  47. <td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:',',decimalSeparator:' ',prefix:'€'"></input></td>  
  48. </tr>  
  49. <tr>  
  50. <td></td>  
  51. <td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:' ',decimalSeparator:',',suffix:'€'"></input></td>  
  52. </tr>  
  53. </table>  
  54. <div style="margin-bottom:20px">  
  55. <div>Amount:</div>  
  56. <input class="easyui-numberbox" data-options="min:10,max:90,precision:2,required:true">  
  57. </div>  
  58. <div style="margin-bottom:20px">  
  59. <div>Weight:</div>  
  60. <input class="easyui-numberbox" data-options="min:10,max:90,required:true">  
  61. </div>  
  62. <div style="margin-bottom:20px">  
  63. <div>Age:</div>  
  64. <input class="easyui-numberbox" data-options="min:0,max:100,required:true">  
  65. </div>  
  66. </div>  
  67. </body>  
  68. </html>  
  69.    
零点起航
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
NumberBox( 数值输入框) 组件
12-02 521
本节课重点了解 EasyUI 中 NumberBox(数值输入框)组件的使用方法，这个组件依赖于 ValidateBox(验证框)组件。一． 加载方式//class 加载方式<input type="text" class="easyui-numberbox" value="100"data-options="min:0,precision:2">//JS 加载调用$('#b...
NumberBox -TypeScript
阿虎的专栏
02-21 339
NumberBox-TypeScript
uniapp购物车中使用uni-number-box步进器，通过递减为0删除当前商品时，下一条商品步进器绑定的值变为0的问题
最新发布
LiuAshin的博客
05-09 345
来控制组件的显示和隐藏。这样，当数量为0时，组件会被完全销毁和重新创建，从而避免了状态复用的问题。出现此类情况可能是步进器的状态复用问题，可能是因为。：而不是在数据变化时删除数组中的项，可以使用。组件在列表更新时没有正确地响应数据变化。
uni的numberbox怎么用_jQuery EasyUI表单插件Numberbox数字框
weixin_28943045的博客
01-30 183
jQuery EasyUI表单插件Numberbox数字框扩展自 $.fn.validatebox.defaults。通过 $.fn.numberbox.defaults 重写默认的 defaults。数字框(numberbox)用于让用户仅能输入数字的值。它可以把输入元素转换为不同类型的输入(比如：数字 numeric、百分比 percentage、货币 currency，等等)。更多的输入...
B. Numbers Box（思维）
Kuricip的博客
11-17 732
题目传送门 B. Numbers Box 题目大意 给你一个n∗mn*mn∗m的矩阵，你可以选择两个相邻的单元，然后将两个值分别乘以-1 求任意次操作后，整个矩阵的数值的最大和 思路 显然，两个负数无论相差多选都可以相互抵消 显然，一个0可以抵消任意多个任意距离的负数 所以统计矩阵中负数出现的个数和标记0是否出现即可 奇数个负数时，使整个矩阵最小的数（无论正负）为唯一负数即可 AC Code #pragma GCC optimize("-Ofast","-funroll-all-loops") #inclu
jquery easyui numberBox (数字框)
yuan882696yan的专栏
02-07 1764
var input = $("");  input.numberbox({            min:0,            max:9999.99,           precision:2        });   详情见：http://www.cnblogs.com/Philoo/archive/2011/10/13/jeasyui_api_numberbox
jQuery EasyUI API 中文文档 - NumberBox数字框
10-28
jQuery EasyUI API 中文文档 - NumberBox数字框使用介绍，需要的朋友可以参考下。
jQuery EasyUI NumberBox(数字框)的用法
01-21
这里的options是选项，可以参考下表： ...input name=”money” id=”money” type=”text” class=”easyui-numberbox” precision=”2″ max=”99999.99″ size=”8″ maxlength=”8″ style=”text-align:right;”/
jQuery EasyUI API 中文文档 – NumberBox数字框
12-10
扩展自 $.fn.validatebox.defaults，用 $.fn.numberbox.defaults 重写了 defaults 。 依赖 validatebox 用法 代码如下: <input type=”text” id=”nn”></input> 代码如下: $(‘#nn’).numberbox({ min...
用于输入/显示数字的NumberBox类
04-11
NumberBox类是C#编程中一个非常实用的控件，主要功能是提供用户友好且功能丰富的数字输入界面。它不仅支持基本的整数和小数输入，还具有扩展功能，如二进制数字处理，以及对输入范围和格式的严格控制。在.NET框架或...
jquery easyui 组件 textbox/combobox/numberbox 启动、禁用 判断是否禁用
清叶 的专栏
07-25 5161
//启用 $('#name').combobox('enable'); $('#name').numberbox('enable'); $('#name').textbox('enable'); //禁用 $('#name').combobox('disable'); $('#name').numberbox('disable'); $('#name').te
【EasyUI篇】NumberBox数值输入框组件
ouYang的博客
09-16 2955
微信公众号：程序yuan 关注可了解更多的教程。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 21.NumberBox数值输入框组件 JSP文件 &lt;%--   Created by IntelliJ IDEA.   User: ooyhao   Date: 2018/7/29 0029   Time: 9:21 --%&gt; &lt;%@ p...
uni的numberbox怎么用_uni-app number-box组件引用 动态控制数值
weixin_39991926的博客
12-19 750
再引用number-box组件时，使用过程中根据业务需要，数值的增加比如商城需要考虑实时库存？虽然在列表中增加max库存数，但根据业务需要使用的时增加数量先查询库存的业务，因此就需要动态控制数量值！只需要做一个小小的优化就可以了！组件原文件：-+export default {name: 'uni-number-box',props: {value: {type: Number,default: ...
关于easyui中numberbox赋值问题
Struts2_Action的博客
09-22 2043
1.需求：需要从一个gridTree中双击选项数据然后添加到父窗体的datagrid里面，其中携带的某个数据动态显示到一个input里面。 2.问题：使用$("#").numberbox("setValue",XXX);赋值，在双击gridTree的方法里面处理，input里面一直无法显示值，后面处理初始化numberbox 依然无法显示，后面处理了input的一些属性还是没用， 然后搜到一片
uni-app NumberBox 数字输入框简单使用方法
热门推荐
qq_24347541的博客
05-08 4万+
链接：https://pan.baidu.com/s/1WXRxsIIegpMo-6Sp8ZX5bw 提取码：nxzb 复制这段内容后打开百度网盘手机App，操作更方便哦. 官方的最新源码，change的bug已经解决了。 老版本文档：https://ext.dcloud.net.cn/plugin?id=31 1.简单介绍一下本人的用法. <template> <uni-num...
EasyUI Numberbox 保留两位小数
我所有的向往
09-08 1万+
解决 数据库处理 Java 处理 前台处理 总结解决数据库处理项目的前台用的是 EasyUI，在 Numberbox 中要求保留两位小数，我想到的法子是，我从数据库中 format(x, 2) 一下,就可以解决了，嗯，完美！不过前台 Numberbox 并不认识逗号(,)， 如果出现逗号，他只取逗号前面的，那意思就是 1,000.00，Numberbox 的值为 1。Java 处理 @Test
js+html5 +devexpress属性总结
weixin_30788619的博客
07-29 356
//获取某行某列的值 onSelectionChanged: function (selectedItems) { var data = selectedItems.selectedRowsData[0]; if (data != null) postionno = data.POSTIONNO; //货位号 ...
DevExpress —— dxDataGrid
weixin_34413103的博客
08-25 4527
为什么80%的码农都做不了架构师？>>> ...
easyui-numberbox 赋值
07-14
在 EasyUI 中，你可以使用 `numberbox` 组件来实现数字输入框，并通过相应的方法对其进行赋值操作。以下是一个示例代码： ```javascript // 获取 numberbox 元素 var numberbox = $('#myNumberbox'); // 赋值 numberbox.numberbox('setValue', 10); ``` 在上面的示例中，我们首先通过 `$('#myNumberbox')` 获取到 `numberbox` 元素，其中 `#myNumberbox` 是你在 HTML 中设置的对应元素的 ID。然后，使用 `numberbox.numberbox('setValue', 10)` 方法对其进行赋值，将值设置为 `10`。 请确保在调用赋值方法之前，已经正确初始化了 `numberbox` 组件，并获取到了对应的元素。 另外，你可以根据需要调整赋值的值，比如从其他输入框或变量中获取动态的值。根据实际情况进行相应的调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值