Question

我使用jQuery easyui，以及名为edatagrid的扩展名Editable DataGrid，它扩展了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>

在chrome或firefox中打开editable-datagrid.html，检查控制台日志：

装货前加载成功
对象{total：0，rows：Array [0]}
加载成功
对象{total：10，rows：Array [10]}

点击重新加载按钮重新加载edatagrid，得到相同的结果。

装货前加载成功
对象{total：10，rows：Array [10]}
加载成功
对象{total：10，rows：Array [10]}

为什么onBeforeLoad事件被触发一次，但onLoadSuccess事件被触发两次，它也应该是一次。如何让onBeforeLoad事件只触发一次？

如果我使用datagrid，onBeforeLoad和onLoadSuccess都会触发一次。

装货前加载成功
对象{total：10，rows：Array [10]}

Answer 1

我找到了原因 jquery.edatagrid.js中有一个onBeforeLoad处理程序

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被触发两次。

Answer 2

你打字：

$('#tt').edatagrid({

它是：

$('#tt').datagrid({

jQuery easyui edatagrid onLoadSuccess触发两次

2 个答案: