jQuery easyui edatagrid onLoadSuccess fires twice
I use jQuery easyui, and the extension Editable DataGrid named edatagrid, which extendes from jQuery easyui datagrid.
you can download the edatagrid file this page:
http://www.jeasyui.com/extension/edatagrid.php
Then I modified the editable-datagrid.html, add handler for onBeforeLoad and onLoadSuccess event, and a button to reload json data. my code:
<!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>
Open editable-datagrid.html in chrome or firefox, check console log:
before load
load success
Object {total: 0, rows: Array[0]}
load success
Object {total: 10, rows: Array[10]}
click reload button to reload edatagrid, get the same result.
before load
load success
Object {total: 10, rows: Array[10]}
load success
Object {total: 10, rows: Array[10]}
Why onBeforeLoad event fired once, but onLoadSuccess event fired twice, it also should be once. How can I make the onBeforeLoad event fires just one time?
if I use datagrid, both of onBeforeLoad and onLoadSuccess fire once.
before load
load success
Object {total: 10, rows: Array[10]}
Answer
I found the reason there is a onBeforeLoad handler in 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 will reload the datagrid, so onLoadSuccess fired twice.