1

我使用 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，查看控制台日志：

加载前
加载成功
Object {total: 0, rows: Array[0]}
加载成功
Object {total: 10, rows: Array[10]}

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

加载前
加载成功
Object {total: 10, rows: Array[10]}
加载成功
Object {total: 10, rows: Array[10]}

为什么onBeforeLoad事件触发了一次，而onLoadSuccess事件触发了两次，也应该是一次。如何使 onBeforeLoad 事件只触发一次？

如果我使用数据网格，onBeforeLoad 和 onLoadSuccess 都会触发一次。

加载前
加载成功
对象 {total: 10, rows: Array[10]}

4

2 回答 2

2

我发现 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 触发了两次。

于 2013-09-09T14:06:40.660 回答
0

你输入：

$('#tt').edatagrid({

它是：

$('#tt').datagrid({
于 2015-07-15T04:19:31.700 回答