【jquery】EasyUIのSubGridにMySQLのテーブルデータを表示＆編集にしたい

DBはサーバーサイドなのでPHPで呼び出して、js側で受け取ることになるかと思いますが、
それをどうdata:[]の中に入れて、動的生成＆CRUD処理させるのか全く見当がつきません。

※別途質問させていただいていますが、data:[]内でForが使えないため
　配列データが展開できないといった状態です。

ヒントだけでも構いませんので
解決につながるような情報を教えていただけますと幸いです。

<script>

var conf = {
options:{
},
subgrid:{
options:{
fitColumns:true,
foreignField:'companyid',
columns:[[
{field:'test_column1',title:'Column1',width:200, editor: 'text'},
{field:'test_column2',title:'Column2',width:200, editor: 'text'},
{field:'test_column3',title:'Column3',width:200, editor: 'text'},
{field:'test_column4',title:'Column4',width:200, editor: 'text'},
{field:'test_column5',title:'Column5',width:200, editor: 'text'},
{field:'test_column6',title:'Column6',width:200, editor: 'text'}
]],

data:[
//ここに読み書き可能なMySQLのテーブルデータを表示
]

},
}
};
$(function(){
$('#dg').datagrid({
title:'DataGrid - Nested SubGrid'
}).datagrid('subgrid', conf);
});

</script>

No.5 回答者： sukitaro 回答日時： 2022/05/06 19:33

>私のコードには反映できませんでした。

そうなんですね。
No4のリンク先の通りにやれば、
ちゃんと動くものにはなりそうなので、
質問者さんのコードのどこかに原因があるのかもしれません。

しかし、ちゃんと動くようにするためには、
・サブグリッドそれぞれに個別のidを付ける
・addRowやsaveRowなどをそれぞれのidに対して行う
・ajax通信でそれぞれのデータを取得、編集、削除
・上記のphp側も準備する
みたいなことをやっていかないといけないので、
結構大変だと思います。

もしそれらが難しいようであれば、
ウェブデザインをやってくれるところに
委託した方が良いかもしれません。

No.4 回答者： sukitaro 回答日時： 2022/05/06 15:39

>SubGridの読み書き

フォーラムにありました。

https://www.jeasyui.com/forum/index.php?topic=43 …

この回答へのお礼

ありがとうございます。
実はこのページも見つけて試しましたがダメでした。
ddv.edatagridを使えばよいのは分かるのですが
私のコードには反映できませんでした。

お礼日時：2022/05/06 17:07

No.3 回答者： sukitaro 回答日時： 2022/05/02 17:06

CRUDはチュートリアルにあるようです。

https://www.jeasyui.com/tutorial/app/crud2.php

この回答へのお礼

ありがとうございます。
私もそれは見ましたが、今回の質問内容はDataGridではなく
全文JSによって動的生成されるSubGridの読み書きですので
HTMLが存在しないため、あまり参考になりませんでした。

お礼日時：2022/05/06 09:20

No.2 回答者： fujillin 回答日時： 2022/05/02 16:23

No1です。

EasyUIは知らないのですけれど・・・

＞オブジェクトリテラルをData:[]に入れただけでは、
＞ただ表示させているだけなのでCRUD処理ができないのです。
それはEasyUIの使い方の問題あって、ここでご質問のdata属性の設定の話ではないと思いますけれど？


ドキュメントをざっと見てみましたが・・・
data属性の設定に関しては、オブジェクトの配列で良いように見えます。
リテラル表記で問題があるとは思えません。
（結果的に同じことなので）
https://www.jeasyui.com/documentation/index.php

ただし、No1でもお断りしたように、php側が別の構造で内容を保持しているのなら、当然のことですが、要求されている構造に変換しておく必要があります。


※ 別のご質問にも似た内容がありますけれど、スクリプトはphpが出力後ブラウザ側で解釈されるので、直接リテラル表記で渡すのも、HTML上にテーブルで展開したものを再度読み込ませて設定しようとも、設定に関しては同じです。
※ ただし、これはデータの設定に関する話であって、その後、EasyUIがDOMを自動生成してくれるのかなどの処理内容に関しては知りませんけれど・・

この回答へのお礼

すいません、ちょっと何言ってるのかよく分かりません。

お礼日時：2022/05/06 09:20

No.1 回答者： fujillin 回答日時： 2022/05/02 13:59

こんにちは

PHPからソースを出力しているのなら
　data: [ ・・・ ];
の、・・・部分に直接、テキストで値を書き出せば済むことでは？

当然のことですが、形式は data属性に求められている形式であることが必要です。
（カンマ区切りやオブジェクトリテラル等も含めてテキスト化して出力してください）

もしも、php側でも同様の形式で値を保持しているのなら、json_encode() でそのまま出力できそうな気もしますけれど・・

この回答へのお礼

早速ご返信くださり、ありがとうございます。
それがEasyUIではそう簡単にはいかず、オブジェクトリテラルをData:[]に入れただけでは、ただ表示させているだけなのでCRUD処理ができないのです。

お礼日時：2022/05/02 14:59