easyui 前端框架-numberbox控件的取值、赋值问题

本文详细介绍了 EasyUI 框架中的 Numberbox 控件的使用方法,包括其属性设置、值的读写操作及在 datagrid 列表中的应用技巧。特别关注数值格式化与异常处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

easyui 前端框架连接地址点击打开链接

在这里只是简单的总结一i型啊 关于 numberbox 控件的一些使用问题。


情况一:numberbox 控件普通使用

第一步:介绍一下 numberbox  的一些属性。

1.value="123.23"    //数字框中的值

2.precision:2       //精度(小数点后两位)

3.groupSeparator:','         //(组分隔符)

4.decimalSeparator:' '           //(替代小数点的分隔符)

5.prefix:'€'"       //(前缀符)

6.suffix:'$'         //(后缀符)

7.min,max(最小值,最大值)

第二步:介绍下关于 numberbox  控件的取值、赋值。

简单的html  标签 ,设置为numberbox 控件

<input class="easyui-numberbox" disabled="disabled" id="amount" data-options="min:0,precision:2,groupSeparator:','"/>

针对这个input 标签,我们根据id="amount"   获取这个对象,并且赋值以及取值。

赋值:

$("#amount").numberbox('setValue',123);

取值:

var value=$("#amount").numberbox('getValue');


情况二:numberbox控件  在datagrid 列表 中的使用。


如果在datagrid 中使用numberbox控件  


先看下table html 结构


<table id="slist1Eg" class="easyui-datagrid" style="height: 330px" data-options="singleSelect:true">
                <thead>
                <tr>
                    <th data-options="halign:'center',field:'partNo', width:120,align:'left'">
                        配件编号
                    </th>
                    <th data-options="halign:'center',field:'partName', width:100,align:'left'">
                        配件名称
                    </th>
                    <th data-options="halign:'center',field:'qty', width:100,align:'right',editor:{type:'numberbox'},
													 formatter:function(v,row,index){if(v!=null){ return v} else {return 1}}">
                        <span style="color: red">*</span>数量
                    </th>
                    <th id="price" data-options="halign:'center',field:'price', width:100,align:'left',
											formatter:function(v,row,index){return fmoney(v, 2);}">
                        单价
                    </th>

                    <th data-options="halign:'center',field:'amount', width:120,align:'right',
													 formatter:function(v,row,index){
													 if(row.qty!=null){ var num=row.price * row.qty}
													 else {var num=row.price}
													 row.amount = num;
													 return fmoney(num,2);}">

                        金额
                    </th>
                    <th data-options="halign:'center',field:'remark', width:140,align:'left',editor:{type:'text'}">
                        备注信息
                    </th>

                    <th data-options="halign:'center',field:'spection', width:100,align:'left'">
                        规格型号
                    </th>

                    <th data-options="halign:'center',field:'partUnit', width:100,align:'left'">
                        单位
                    </th>
                    <th data-options="halign:'center',field:'weight', width:100,align:'left'">
                        重量
                    </th>

                </tr>
                </thead>
            </table>

获取表格数据方式,根据table标签的id  获取datagrid 的数据

var tab=$("#slist1Eg").datagrid('getRows');

获取选中行 的行数据。

var row=$("#slist1Eg").datagrid('getSelected');

循环遍历 tab 数据  修改指定的单元格的数据

for (var i = 0; i < tab.length; i++) {
              
   $('#slist5Eg').datagrid('updateRow', {index: i,
      row:{name:value});     

  }
其中 name 指的是 表格 列的名称字段,value 指的是需要的值


总结,这次之所以整理关于numberbox 控件的内容,纯属于无奈,对于numberbox  控件定义的不管是单元格还是输入框,在为其赋值的时候要确认  值的格式。

如果你定义的单元格 为可编辑类型的number单元格,第一次输入数字成功,但是再次修改可能会出现异常,那很有可能你输入的值跟nemberbox 控件定义的赋值格式冲突。

我今天出现的问题是:计算前两个单元格的值,将结果赋值给第三个单元格。

再循环遍历每一行数据,并计算结果赋值到第三个单元格,显示一切都正常,但是你再次去点击第三个单元格 ,会发现数值变化了。原因是我计算的数值带有间隔符(例如:123,000.50)这时候numberbox 控件 不识别这种数值,很有可能再次点击被赋值的单元格出现异常。

处理建议:将数值格式化,去掉间隔符,一切都正常。






















评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值