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

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本身的事件不受影响，并且阻止了事件向上传播。 

 

查看更多 下一篇