EasyUI 解决 datagrid 中 NumberBox 限制小数位数后不能输入小数点问题

Posted 很厉害的学渣

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUI 解决 datagrid 中 NumberBox 限制小数位数后不能输入小数点问题相关的知识,希望对你有一定的参考价值。

初始化界面,发现编辑datagrid,不能输入小数点。

var arrColumnsCNT = [[
                {
                    title: ‘毛重‘,
                    field: ‘GrossWeight‘,
                    halign: ‘center‘,
                    width: 60,
                    sortable: true,
                    frozen: true,
                    editor: {
                        type: ‘numberbox‘,
                        options:{precision:2}
                    }
                }
             ]];

 function DefDataGridCNT() {
                objDataGridCNT = $(‘#tableDataGridCNT‘).datagrid({
                    selectOnCheck: false,
                    checkOnSelect: false,
                    singleSelect: true,
                    rownumbers: true,
                    striped: true,
                    remoteSort: false,
                    multiSort: true,
                    scrollbarSize: 0,
                    fitColumns: true,
                    height: 250,
                    width: 1000,
                    onClickCell: onClickCellCNTGrid,
                    columns: arrColumnsCNT, 
                    onBeginEdit:function(rowIndex){
                        var editors = $(‘#tableDataGridCNT‘).datagrid(‘getEditors‘, rowIndex);
                        var n1 = $(editors[8].target);
                        var n2 = $(editors[9].target);
                        var n3 = $(editors[12].target);
                        n1.add(n2).numberbox({
                            onChange:function(){
                                var cost = Number(n1.numberbox(‘getValue‘))+Number(n2.numberbox(‘getValue‘));
                                n3.numberbox(‘setValue‘,cost);
                            }
                        })
                    },
                    onAfterEdit: function (index, row, changes) {
                        autoSetValue();
                    }
                });
            };

解决办法:页面初始化加入如下代码

           //解决numberbox小数点问题
            (function($){
                $.fn.numberbox.defaults.filter = function(e){
                    var opts = $(this).numberbox(‘options‘);
                    var s = $(this).numberbox(‘getText‘);
                    if (e.which == 45){    //-
                        return (s.indexOf(‘-‘) == -1 ? true : false);
                    }
                    var c = String.fromCharCode(e.which);
                    if (c == opts.decimalSeparator){
                        return (s.indexOf(c) == -1 ? true : false);
                    } else if (c == opts.groupSeparator){
                        return true;
                    } else if ((e.which >= 48 && e.which <= 57 && e.ctrlKey == false && e.shiftKey == false) || e.which == 0 || e.which == 8) {
                        return true;
                    } else if (e.ctrlKey == true && (e.which == 99 || e.which == 118)) {
                        return true;
                    } else {
                        return false;
                    }
                }
            })(jQuery);

  

以上是关于EasyUI 解决 datagrid 中 NumberBox 限制小数位数后不能输入小数点问题的主要内容,如果未能解决你的问题,请参考以下文章

easyui-datagrid加载时的效率低下,解决方案

easyui中datagrid的刷新和使用,该怎么解决

EasyUI 解决 datagrid 中 NumberBox 限制小数位数后不能输入小数点问题

EasyUI datagrid-export 将datagrid的数据导出至Excel-解决科学计数法

easyUi dataGrid 行高设置,解决错行问题

easyui datagrid 单元格关闭编辑框再开启编辑框就报错