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

来源：互联网发布：成人视频fc2最新域名编辑：程序博客网时间：2024/06/05 03:28

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 控件不识别这种数值，很有可能再次点击被赋值的单元格出现异常。

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

0 0