EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列をSubGrid内に展開する方法が知りたいです。
以下のコードを利用していますが
data:[]内ではforを回せないため、arrというObjectに入っている連想配列がすべて取り出せません。
arr[0]など行を指定すれば取れますが、これだと1行しか取れないため
全てを取り出す方法が知りたいです。
<table>
<tr><td>a1</td><td>a2</td><td>a3</td><td>a4</td><td>a5</td><td>a6</td></tr>
<tr><td>b1</td><td>b2</td><td>b3</td><td>b4</td><td>b5</td><td>b6</td></tr>
<tr><td>c1</td><td>c2</td><td>c3</td><td>c4</td><td>c5</td><td>c6</td></tr>
</table>
<script>
var arr = [];
var obj = {};
//テーブルの値をObject配列に格納する
$("tr").each(function(i){
obj = new Object();
$(this).children().each(function(j){
obj['test_column' + j] = $(this).text();
});
arr.push(obj);
});
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:[]の配列内でforは回せないため、以下だとエラーになる
data:[
for (let i = 0; i < arr.length; i++) {
arr[i];
}
]
},
}
};
$(function(){
$('#dg').datagrid({
title:'DataGrid - Nested SubGrid'
}).datagrid('subgrid', conf);
});
</script>
【元となったEasyUIのコード】
https://www.jeasyui.com/demo/main/index.php?plug …
どうがよろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
こんにちは
EasyUIは全く存じませんが・・・
[]の記述形式は配列リテラルなので、ご指摘のように、直接値を示さない構文をその中で用いることはできません。
一方で、最初に設定している配列 arr の内容をそのまま、data 属性に設定したいのであれば、
data : arr
で、設定できます。
ただし、この data 属性に求められる内容と、arr の内容が一致しているのかどうかは知りませんけれど・・
(EasyUIの仕様によりますので)
ご提示の配列 arr は
[
{ test_column1: 'a1', test_column2:'a2', test_column3: ・・・},
{ test_column1: 'b1', test_column2:'b2', test_column3: ・・・},
・・・
]
のような構造になっていると思いますが、そのままで設定すればよいのなら、上記で可能です。
異なる構造で設定する必要があるのなら、求められる構造の配列(=arr2)に作成し直しておいて
data: arr2
のような設定にすれば可能なはずと推測します。
要は、data属性に設定したい内容そのままを、別に作成しておけばよいってことになります。
その際であれば、ループでもなんでも自由に使えますので・・
なるほど!
data:[arr]
ではなく
data: arr
とすればよかったのですね!
data:[[arr]]
としたり
data:[{arr}]
としたりしましたが、
配列リテラルというものが全く理解できておりませんでした。
素晴らしいご回答ありがとうございます!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript 【jquery】EasyUIのSubGridにMySQLのテーブルデータを表示&編集にしたい 5 2022/05/02 13:10
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- 工学 【制御工学】単位ステップ応答の遅れ時間の求め方(令和2年度の機械設計技術者試験(制御工学)の問題) 3 2022/11/02 10:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableの任意行にfocusをあてる
-
HTML中のTABLEのデータを抽出す...
-
EasyUIのSubGrid(jquery)にお...
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
iframeの内のTable(rowspan有り...
-
一覧から選択した行の行番号を...
-
「オブジェクトは、このプロパ...
-
プルダウンで選択すると、DBの...
-
JavaScriptで特定のtdタグにcla...
-
特定の文字列を挿入
-
プルダウンで選択した値によっ...
-
テーブルでのハイライト表示に...
-
data-hrefでのcolorbox設定方法
-
jQueryでクリックされたテーブ...
-
[Javascript]セル内の文字列の...
-
エクセル VBA にて IE のボ...
-
JSで、テーブルのある行のみ、...
-
テーブル行のクリックでチェッ...
-
return trueとreturn falseの用...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
マウスをブラウザの外に出した...
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
特定の文字列を挿入
-
テーブル内に表示されている数...
-
javascript クリックすると、あ...
-
テーブルの項目の値取得
-
javascriptで質問です。 displa...
-
Tablesorteを2行一組でソートする
-
\\u30ad\\u30fc\\u30dc・・・と...
おすすめ情報