2013-09-09 2 views
1

Я использую jQuery easyui и расширение Editable DataGrid с именем edatagrid, которое распространяется от jQuery easyui datagrid.
вы можете загрузить edatagrid файла этой страницу: http://www.jeasyui.com/extension/edatagrid.php
Затем я модифицировал редактируемый-datagrid.html, добавить обработчик для onBeforeLoad и onLoadSuccess события, и кнопка для перезагрузки данных JSON. мой код:
jQuery easyui edatagrid onLoadSuccess срабатывает дважды

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>jQuery EasyUI</title> 
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> 
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 
    <script type="text/javascript" src="../../jquery-2.0.0.min.js"></script> 
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script> 
    <script type="text/javascript" src="jquery.edatagrid.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      //$('#tt').datagrid({ 
      $('#tt').edatagrid({ 
       onBeforeLoad: function(param){ 
        console.log("before load"); 
       }, 
       onLoadSuccess: function(data){ 
        console.log("load success"); 
        console.log(data); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <h1>Editable DataGrid</h1> 
    <div style="margin-bottom:10px"> 
     <a href="#" onclick="javascript:$('#tt').edatagrid('addRow')">AddRow</a> 
     <a href="#" onclick="javascript:$('#tt').edatagrid('saveRow')">SaveRow</a> 
     <a href="#" onclick="javascript:$('#tt').edatagrid('cancelRow')">CancelRow</a> 
     <a href="#" onclick="javascript:$('#tt').edatagrid('destroyRow')">destroyRow</a> 
     <a onclick="javascript:$('#tt').edatagrid('reload')">reload</a> 
    </div> 
    <table id="tt" style="width:600px;height:200px" 
      title="Editable DataGrid" 
      url="datagrid_data.json" 
      singleSelect="true"> 
     <thead> 
      <tr> 
       <th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th> 
       <th field="productid" width="100" editor="text">Product ID</th> 
       <th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th> 
       <th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th> 
       <th field="attr1" width="150" editor="text">Attribute</th> 
      </tr> 
     </thead> 
    </table> 
</body> 
</html> 

Открыть редактируемые-datagrid.html в хроме или светлячок, проверьте консоль журнала:

перед тем нагрузка
успех нагрузки
Объект {всего: 0, строки: Array [0 ]}
успеха нагрузки
объекта {всего: 10, строки: Array кнопки [10]}

нажмите перезарядку т o перезагрузить edatagrid, получить тот же результат.

, прежде чем нагрузка
успеха нагрузки
объектов {всего: 10, строки: Array [10]}
успеха нагрузки
объектов {всего: 10, строки: Array [10]}

Почему событие onBeforeLoad запускается один раз, но событие onLoadSuccess запускается дважды, оно также должно быть один раз. Как я могу сделать событие onBeforeLoad только один раз?

если я использую datagrid, как onBeforeLoad, так и onLoadSuccess огонь один раз.

, прежде чем нагрузка
Успех нагрузки
Объект {всего: 10, строки: Массив [10]}

ответ

2

я нашел причину есть обработчик onBeforeLoad в jquery.edatagrid.js

onBeforeLoad: function(param){ 
       if (opts.onBeforeLoad.call(target, param) == false){return false} 
       $(this).datagrid('rejectChanges'); 
       if (opts.tree){ 
        var node = $(opts.tree).tree('getSelected'); 
        param[opts.treeParentField] = node ? node.id : undefined; 
       } 
      } 

rejectChanges перезагрузит datagrid, поэтому onLoadSuccess запускается дважды.

+0

нормально, вы нашли причину, вы можете сказать нам, что вы сделали, чтобы решить эту проблему? –

+0

, тогда вам нужно принять свой ответ, чтобы другие, кто прочитал этот вопрос, обратили внимание на то, что это уже ответили –

0

вы набрали:

$('#tt').edatagrid({ 

и это:

$('#tt').datagrid({