jQuery插件 easyUI ，Datagrid复选框与脚本兼容有关问题 ~-JavaSript-爱易网页

jQuery插件 easyUI ，Datagrid复选框与脚本兼容有关问题 ~

日期：2014-05-16　浏览次数：20335 次

jQuery插件 easyUI ，Datagrid复选框与脚本兼容问题 ~~~
最近用到了 jQuery的 easyUI 插件，Datagrid用来显示一个列表，用户可以进行多项的选择，checkbox = true；页面效果如下：

问题如下：
由于价格，不含税金额，税金等信息都可以进行输入的，每次这些文本框获取焦点的时候，checkbox 都会自动进行选择，其实我只是想输入内容，并非想改变 checkbox 选中与否，所以在网上找了一个解决方法：
如何设定 Datagrid，点击行不自动选择 checkbox

JScript code


       //设定 datagrid，点击行不自动选中checkbox
            function bindRowsEvent(){
                var panel = $('#tabName').datagrid('getPanel');
                var rows = panel.find('tr[datagrid-row-index]');
                rows.unbind('click').bind('click',function(e){
                    return false;
                });
                rows.find('div.datagrid-cell-check input[type=checkbox]').unbind().bind('click', function(e){
                    var index = $(this).parent().parent().parent().attr('datagrid-row-index');
                    if ($(this).attr('checked')){
                        $('#tabName'').datagrid('selectRow', index);
                    } else {
                        $('#tabName'').datagrid('unselectRow', index);
                    }
                    e.stopPropagation();
                });
            }
            setTimeout(function(){
                bindRowsEvent();
            }, 10);

这个问题是解决了，但是又出现了另外一个问题，以上内容可以进行输入的元素，我需要给它们添加 keyup 事件,但是好像跟以上的代码不兼容，有上面那个功能，则 keyup 事件不触发；如果将上面的内容注释，则keyup 事件可以触发，如何使它们兼容？

JScript code


         onClickRow:function(rowIndex){
       var tax= $("tr[datagrid-row-index="+rowIndex+"]  td[field=tax] input[type=text]");
       var price = $("tr[datagrid-row-index="+rowIndex+"]  td[field=price] input[type=text]");
       var amount= $("tr[datagrid-row-index="+rowIndex+"]  td[field=amount] input[type=text]");
       var taxRate= $("tr[datagrid-row-index="+rowIndex+"]  td[field=taxRate] input[type=text]");
       var quantity =  $("tr[datagrid-row-index="+rowIndex+"]  td[field=inQuantity] input[type=text]");
            
       amount.keyup(function(){
          tax.val(parseFloat(amount.val()) + parseFloat(taxRate.val()));
       });    
            
       tax.keyup(function(){
          amount.val(parseFloat(tax.val()) - parseFloat(taxRate.val())); 
       });
            
    }

------解决方案--------------------
easyui，好用吗。一直没用过，帮顶！
------解决方案--------------------
这个问题是事件冒泡导致的，解决的办法是阻止行编辑的click事件：

JScript code


var editors = $('#tt').datagrid('getEditors', rowIndex);
$.each(editors, function(index, element){
    element.target.bind('click',function(e){
        return false;
    });
})

------解决方案--------------------

没用过datagrid,不过猜想它的selectRow方法应该是绑在table上的，然后判断event.target.parent() = tr,以此来选中行。

你的bindRowsEvent()方法里面给每个input添加事件（click or keyup）的时候都event.stopPropagation();

这样，input本身的事件不受影响，并且阻止了事件向上传播。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

jQuery插件 easyUI ，Datagrid复选框与脚本兼容有关问题 ~

相关资料更多>

推荐阅读更多>