1

私は jQuery easyui と、jQuery easyui datagrid から拡張された edatagrid という名前の拡張 Editable 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 イベントが 1 回発生したのに、onLoadSuccess イベントが 2 回発生したのはなぜですか。onBeforeLoad イベントを 1 回だけ発生させるにはどうすればよいですか?

datagrid を使用すると、onBeforeLoad と onLoadSuccess の両方が 1 回起動します。

ロード前 ロード
成功
オブジェクト {合計: 10, 行: 配列[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 が 2 回発生します。

于 2013-09-09T14:06:40.660 に答える
0

あなたが入力した：

$('#tt').edatagrid({

そしてそれは：

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