jQuery easyui edatagrid onLoadSuccess срабатывает дважды
Я использую jQuery easyui и расширение Editable DataGrid с именем edatagrid, которое расширяется от jQuery easyui datagrid.
Вы можете скачать файл edatagrid на этой странице: http://www.jeasyui.com/extension/edatagrid.php
Затем я изменил файл editable-datagrid.html, добавил обработчик для событий onBeforeLoad и onLoadSuccess и кнопку для перезагрузки данных json. мой код:
<!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>
Откройте editable-datagrid.html в chrome или firefox, проверьте журнал консоли:
до загрузки
загрузка успешна
Объект {всего: 0, строки: массив [0]}
загрузка успешна
Объект {всего: 10, строки: массив [10]}
нажмите кнопку перезагрузки, чтобы перезагрузить edatagrid, получить тот же результат.
до загрузки
загрузка успешна
Объект {всего: 10, строки: массив [10]}
загрузка успешна
Объект {всего: 10, строки: массив [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 перезагрузит сетку данных, поэтому onLoadSuccess сработал дважды.