mysql - JSGrid の複数行の読み込みと保存

Question

JSGrid を使用して、MySQL データベースからデータをロードしたり、CakePHP 3 を介して複数行のデータを (新規または編集した) 保存したりしたいと考えています。可能。

読み込みのために、データを編集したい場合は、接続された 2 つのテーブルからデータを取得したいと思います。CakePHP 3 では、find を使用してデータを取得し、それをビューに設定していましたが、ビューのロード時にそこから JSGrid にデータを配置する方法がわかりません。

同様に保存するには、2 つの異なるテーブルに保存します。CakePHP 3 では、通常は複数のテーブルに対して、パッチ エンティティを使用してさまざまなテーブルに保存し、AJAX を使用して実際にそのページにいることなく別のページに保存します (2 つのテーブルはそれぞれのページを追加します)。しかし、複数のデータでそれができるかどうかはわかりません。

例えば。

$.post(".../users/add.json"

ユーザーのフィールドを指定すると、追加ページが通常行うことを実行し、関連付けられたテーブルを持つエンティティにパッチを適用すると、さまざまな関連付けられたテーブルに保存されますが、一度に 1 つだけです。

アップデート：

私のconfig/routes.php:

Router::scope('/', function (RouteBuilder $routes) {
    $routes->extensions(['json', 'xml']);
    $routes->resources('Instrument');
}

私の見解：

<div id="jsGrid"></div>
    <script>
        var resources = [];

        var instruments = [
            {Name: "", Id: 0},
            {Name: "Clarinet", Id: 1},
            {Name: "Guitar", Id: 2},
            {Name: "Piano", Id: 3},
            {Name: "Violin", Id: 4},
        ];

        $("#jsGrid").jsGrid({
            controller: {
                loadData: function (filter) {
                    return $.ajax({
                        type: "GET",
                        url: "<?= $basepath ?>/instrument/view/",
                        data: filter
                    });
                },
                insertItem: function (item) {
                    return $.ajax({
                        type: "POST",
                        url: "<?= $basepath ?>/instrument/add",
                        data: item
                    });
                },
                updateItem: function (item) {
                    return $.ajax({
                        type: "PUT",
                        url: "<?= $basepath ?>/instrument/edit",
                        data: item
                    });
                },
                deleteItem: function (item) {
                    return $.ajax({
                        type: "DELETE",
                        url: "<?= $basepath ?>/instrument/delete",
                        data: item
                    });
                }
            },

            width: "100%",
            height: "400px",

            inserting: true,
            editing: true,
            sorting: true,
            paging: true,

            data: resources,

            fields: [
                        {
                             name: "Instrument",
                             type: "select",
                             items: instruments,
                             valueField: "Id",
                             textField: "Name",
                             validate: "required",
                             width: 175
                        },
                        {name: "Comment", type: "text", width: 150},
                        {type: "control"}
                    ]
        });
    </script>

<?= $basepath ?>これは、プロジェクト名に関係なく、引き続き URL にアクセスできることを意味する、私の AppController に設定された変数です。

ビューで新しい行を保存しようとすると、行が追加されますが、内容は空白です。行を編集しようとすると、「お待ちください」というメッセージが表示され、何も保存されず、フィールドを編集できます。また、コンソールに次のエラーが表示されます。

http://localhost/<?= $basepath ?>/instrument/edit Failed to load resource: net::ERR_CONNECTION_RESET