(原创)Easyui中datagrid的Edit事件绑定失效的解决

上篇日志中给Edit绑定了一个事件后, 类型是combobox, 所以采用了如下的绑定方法:

// 设置默认值

var editors = $('#staffLogDetailGrid').datagrid('getEditors', lastIndex);

var lxrEditor = editors[0];     // 联系人edit

if(lxrEditor.target.val() == undefined || lxrEditor.target.val() == '') {

    lxrEditor.target.val("请输入联系人");

}

var sfgzEditor = editors[3];       // 是否跟踪edit

var sfgzCombobox = sfgzEditor.target;

var contentEditor = editors[4];    // 具体内容edit

contentEditor.target.val("请输入具体内容");

 

// 绑定事件的方法

comboboxBlur(sfgzCombobox);

就是通过Edit.target得到combobox对象, 然后对对象绑定事件,

我的目的是通过一个combobox的onclick操作影响同一行某个单元格的值; 而且这个单元格没哟Edit属性, 所以必须要结束再重新打开编辑才能看到效果:

代码如下:

setTimeout(function(){

    // 要延后执行的代码

    $('#staffLogDetailGrid').datagrid('endEdit', lastIndex);

}, 100);

setTimeout(function(){

    // 要延后执行的代码

$('#staffLogDetailGrid').datagrid('selectRow', lastIndex).datagrid('beginEdit', lastIndex);

}, 100);

为什么要用延迟操作呢? 因为js代码有些会同时执行的…这个很纠结的…

 

这时候问题出现了; 原来绑定的事件在重新打开编辑的时候datagrid('beginEdit', lastIndex); 竟然失效了…这一点很纠结的, 绑定的事件只对本次'beginEdit'有效, 一结束就无效了, 用blur绑定的事件不知道也会不会有这种问题…没有测试过;

此时的解决方案就是重新绑定事件; 并且还要重新绑定数据! 绑定事件后, 原来的combobox数据会被清空的…

代码如下

// 绑定combobox事件

function comboboxBlur(sfgzCombobox) {

    sfgzCombobox.combobox({

        onChange : function(newValue,oldValue) {

           if(_onClick == true) {

              if(newValue == '是') {

                  var columns = $('#staffLogDetailGrid').datagrid("options").columns;    // 得到columns对象

                  var rows = $('#staffLogDetailGrid').datagrid("getRows"); // 这段代码是获取当前页的所有行。

                  console.info(rows[lastIndex][columns[0][5].field]);

                  rows[lastIndex][columns[0][5].field]= getNowDate();

                  console.info(rows[lastIndex][columns[0][5].field]);

   

                  setTimeout(function(){

                     // 要延后执行的代码

                     $('#staffLogDetailGrid').datagrid('endEdit', lastIndex);

                  }, 100);

                  setTimeout(function(){

                     // 要延后执行的代码

                     $('#staffLogDetailGrid').datagrid('selectRow', lastIndex).datagrid(

                            'beginEdit', lastIndex);

 

                     var editors = $('#staffLogDetailGrid').datagrid('getEditors', lastIndex);

                     var sfgzEditor = editors[3];       // 是否跟踪edit

                     var sfgzCombobox = sfgzEditor.target;

                     // 绑定事件

                     comboboxBlur(sfgzCombobox);

                     // 重新加载数据

                     _onClick = false;

                     sfgzCombobox.combobox('setValue', '是');

                     _onClick = true;

                  }, 100);

   

                  // 打开窗口, 选择时间

                  gzsjDialog.dialog('open');

              } else if(newValue == '否') {

                  var columns = $('#staffLogDetailGrid').datagrid("options").columns;    // 得到columns对象

                  var rows = $('#staffLogDetailGrid').datagrid("getRows"); // 这段代码是获取当前页的所有行。

                  console.info(rows[lastIndex][columns[0][5].field]);

                  rows[lastIndex][columns[0][5].field]= '';

                  console.info(rows[lastIndex][columns[0][5].field]);

                 

                  setTimeout(function(){

                     // 要延后执行的代码

                     $('#staffLogDetailGrid').datagrid('endEdit', lastIndex);

                  }, 100);

                  setTimeout(function(){

                     // 要延后执行的代码

                     $('#staffLogDetailGrid').datagrid('selectRow', lastIndex).datagrid(

                            'beginEdit', lastIndex);

                     // 设置默认值

                     var editors = $('#staffLogDetailGrid').datagrid('getEditors', lastIndex);

                     var sfgzEditor = editors[3];       // 是否跟踪edit

                     var sfgzCombobox = sfgzEditor.target;

                     // 绑定事件

                     comboboxBlur(sfgzCombobox);

                     // 重新加载数据

                     _onClick = false;

                     sfgzCombobox.combobox('setValue', '否');

                     _onClick = true;

                  }, 100);

              }

           }

       }

    });

   

}

 

我是用 combobox 的 onChange 来触发事件的 , 所以要用 _onClick 来区分是点击触发的 change 事件还是系统修改触发的 change 事件 ;

作者：张振斌;  时间: 2013-3-11  QQ:739934487