欢迎使用CSDN-markdown编辑器

来源：互联网发布：直通网络测试仪怎么用编辑：程序博客网时间：2024/06/07 07:40

关于format-number与绑定change事件及name

在控件上绑了format-number后，处理成千分位（3位以上）的后无法进入原先绑定的绑定的change方法中。

format-number基本用法

<div>整数：<input type="text" data-type="int" data-name="int"/></div>    <script>        var n1 = new FormatNumber();        n1.init({trigger:$('[data-type="int"]'),decimal:0});    </script>

data-type：与js中的trigger方法关联生成一个隐藏的input控件；
data-name：决定隐藏的input控件的id 与 name 的值；
decimal:0 ：小数后保留的位数
注意：data-name的值要与生成的input控件的id相同，否则生成的input控件将没有value属相（改造时用）

formatNumber组件下载
http://www.lovewebgames.com/jsmodule/format-number.html

问题一
由于change方法无法进入，所以考虑替换方法一开始想到的是用焦点事件去模拟change事件（太繁琐），后来用keyup代替了

<h5>超3位实验测试change事件</h5><table id="editabledatatable"><tr><td><input  id="aaa"  name="aaa"  type="text" data-name="pc2" data-type="abc"/></td><td><input   id="bbb"  name="bbb"  type="text" /></td></tr></table>    <script>        var n5 = new FormatNumber();        n5.init({trigger:$('[data-type="abc"]'),decimal:4});    $("#editabledatatable tr").bind('change', function() { //超出3位无法进入方法中          alert("change")      })    </script><h5>超3位实验测试 keyup事件</h5><table id="editabledatatable"><tr><td><input  id="aaa2"  name="aaa2"  type="text" data-name="pc2" data-type="abc2"/></td><td><input   id="bbb2"  name="bbb2"  type="text" /></td></tr></table><script>        var n6 = new FormatNumber();        n6.init({trigger:$('[data-type="abc2"]'),decimal:4}); $("#editabledatatable tr input").keyup(function() { // $("#editabledatatable tr").on('keyup', function() {        var ivalue2 = parseFloat($(this).parent().parent().find( "input[name='aaa2']" ).val().replace(/,/g, ""))   //用户填入（变量）值        console.log(ivalue2)})</script><h5>超3位实验测试 焦点事件</h5><table id="editabledatatable"><tr><td><input  id="aaa3"  name="aaa3"  type="text" data-name="pc3" data-type="abc3"/></td><td><input   id="bbb3"  name="bbb3"  type="text" /></td></tr></table><script>        var n7 = new FormatNumber();        n7.init({trigger:$('[data-type="abc3"]'),decimal:4}); // 焦点事件        $("#aaa3").focus(function(){            currValue=$(this).val();        })        .blur(function(){            var jg=$(this).val();            if(jg!=currValue){             //   alert("aaa")               var textthis= $(this);                gongshi(textthis);            }        }) function gongshi(textthis){  var ivalue3 = parseFloat(textthis.parent().parent().find( "input[name='aaa3']" ).val().replace(/,/g, "")) //用户填入（变量）值   alert("值"+ivalue3);}</script>

问题二
将控件放入把表格中，以遍历name的方式获取值。由于会生成带name属性的隐藏控件所以处理方法如下。

主控件中不写name ，value值通过隐藏的input获取
修改js，让data-name产生的name与id值不同

<input    data-name="'+strDateID+'$item.ftFieldName"  data-type="amount'+strDateID+'"  class="form-control input-small" style="width:100%" id="$item.ftFieldName'+strDateID+'"  placeholder="$item.ftFiledRealname">';

 var name = $(v).attr('data-name'),                            id = name.split('.')[1] || name.split('.')[0];                       var name2= name.replace(/\d+/g,'')                        $(v).parent().append('<input data-rule="number" id="' + id + '" type="hidden" name="' + name2 + '" />');

0 0