EasyUI中Numberbox的简单使用

怼烎@ 2023-10-18 20:17 7阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 用法 ###

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

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

<input type="text" id="nn">
    
    
    $('#nn').numberbox({
    
    min:0,
    
    precision:2
    
    });

### 属性 ###

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

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>定义是否禁用该字段。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>number</td> 
   <td>默认值。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>min</td> 
   <td>number</td> 
   <td>允许的最小值。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>max</td> 
   <td>number</td> 
   <td>允许的最大值。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>precision</td> 
   <td>number</td> 
   <td>显示在小数点后面的最大精度。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>decimalSeparator</td> 
   <td>string</td> 
   <td>分隔数字的整数部分和小数部分的分隔字符。</td> 
   <td>.</td> 
  </tr> 
  <tr> 
   <td>groupSeparator</td> 
   <td>string</td> 
   <td>分隔整数组合的字符。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>prefix</td> 
   <td>string</td> 
   <td>前缀字符串。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>suffix</td> 
   <td>string</td> 
   <td>后缀字符串。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>filter</td> 
   <td>function(e)</td> 
   <td>定义如何过滤被按下的键，返回 true 则接受输入字符。该属性自版本 1.3.3 起可用。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>formatter</td> 
   <td>function(value)</td> 
   <td>用来格式数字框（numberbox）值的函数。返回显示在框中的字符串值。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>parser</td> 
   <td>function(s)</td> 
   <td>用来解析字符串的函数。返回数字框（numberbox）值。</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onChange</td> 
   <td>newValue,oldValue</td> 
   <td>当字段值改变时触发。</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

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

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）对象。</td> 
  </tr> 
  <tr> 
   <td>destroy</td> 
   <td>none</td> 
   <td>销毁数字框（numberbox）对象。</td> 
  </tr> 
  <tr> 
   <td>disable</td> 
   <td>none</td> 
   <td>禁用该域。</td> 
  </tr> 
  <tr> 
   <td>enable</td> 
   <td>none</td> 
   <td>启用该域。</td> 
  </tr> 
  <tr> 
   <td>fix</td> 
   <td>none</td> 
   <td>把值固定为有效的值。</td> 
  </tr> 
  <tr> 
   <td>setValue</td> 
   <td>none</td> 
   <td>设置数字框（numberbox）的值。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#nn').numberbox('setValue', 206.12);</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>getValue</td> 
   <td>none</td> 
   <td>获取数字框（numberbox）的值。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>var v = $('#nn').numberbox('getValue');</li> 
     <li>alert(v);</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>clear</td> 
   <td>none</td> 
   <td>清除数字框（numberbox）的值。</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>none</td> 
   <td>重置数字框（numberbox）的值。该方法自版本 1.3.2 起可用。</td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2">
    </body>
    </html>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190621201435256.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70