jQuery"jqGrid"のデータの出力方法

Question

初投稿です、よろしくお願いします。

jQueryのプラグイン「jqgrid」で質問です。
jsonでのデータの出力方法を教えて頂けないでしょうか。

状況
・当方html、cssはWebクリエイター検定レベルの知識はありますがjavascript、jqueryは２，３週間前から触り始めました。
・データが出力されたら拡張子jsonのファイルができると推測してますが、jsファイルしかできないのであればその方法でも構いません。
・現在jqgridを使ってjavascriptに書いたデータをブラウザに表示することはできました。
セルの編集、ブラウザでその情報の保持、getCellメソッドで値の取得はできました。

質問としては良くないかもしれませんが・・・よろしくお願いします。

Answer 1

希望のフォーマットに、現行のグリッド構成をエクスポートする
$("#mygrid").jqGridExport({exptype:"xmlstring"});
xml文字列として、現行のグリッド構成をエクスポート
$("#grid_id").jqGridExport({exptype:"jsonstring"});
json文字列として、現行のグリッド構成をエクスポート

グリッドの構成のインポート/エクスポート｜基本のグリッド

ということですから、この文字列をdataスキームか何かで書き出せばいいかと思います。



追記

jQuery('body').prepend(
  jQuery('<a>',{
    href:"data:Content-Type: application/json; charset=utf-8," + encodeURIComponent(
      jQuery("#list").jqGrid("jqGridExport",{exptype:"jsonstring"})
    ),
    text:'output',
    download:'output.json'
  })
);

こちらでいかがでしょうか。body直下にリンクが挿入されますのでクリックしてみてください。



あら、回答誤爆してる……　削除ってどうやるんでしょ？



再追記

jQuery('body').prepend(
  jQuery('<a>',{
    href:'#',
    text:'output',
    download:'output.json',
    on:{
      'click': function(){
        jQuery(this).attr('href','data:Content-Type: application/json; charset=utf-8,' + encodeURIComponent(
          jQuery('#list').jqGrid('jqGridExport',{exptype:'jsonstring'})
        )
      }
    },
  })
);

こちらでいかがでしょうか。body直下にリンクが挿入されますのでクリックしてみてください。

Comments

[mitsuhiko03]

返信遅くなり申し訳ありません。
ありがとうございます。
------------------------------------------------------------------------------------
jQuery("#list").jqGrid('jqGridExport'
({
options :{
imptype : "json", // xml, json, xmlstring, jsonstring
impstring: "", // xmlstring または jsonstringの場合に必ず設定
impurl: "", // xmlまたはjsonの時、構成に対する有効なURL。
mtype: "POST", // GET または POST
impData : {}, // URLに渡すことが可能な追加データ。
/*xmlGrid :{ // xml構成のどこから読み込むか説明、データがある場合は、どこから読み込むかを説明。
config : "roots>grid",
data: "roots>rows"
},*/
jsonGrid :{ // json構成のどこから読み込むか説明、データがある場合は、どこから読み込むかを説明。
config : "grid",
data: "data"
}
}
}));
------------------------------------------------------------------------------------
サイトを見ながらこんな感じで試したのですが、何も起こりませんでした・・・。
現在色々と試しています。

[Lhankor_Mhy]

```lang-javascript
jQuery('body').prepend(
$('<a>',{
href:"data:Content-Type: application/json; charset=utf-8," + encodeURIComponent(
jQuery("#list").jqGrid("jqGridExport",{exptype:"jsonstring"})
),
text:'output',
download:'output.json'
})
);
```
これでいかがでしょうか？

[Lhankor_Mhy]

むー。
コメント欄だと分かりにくいんですね……
回答に追記します。

[mitsuhiko03]

追記ありがとうございます！
早速試してみます。

コメントが遅れて申し訳ありません。
結果はまたこちらに書きます。

[mitsuhiko03]

>Lhankor_Mhyさん

試してみたらデータを出力することができました！
ありがとうございます。

ただ、編集したセルのデータが反映されないみたいでして・・・。
（最初にブラウザに表示した時の値が出力されてしまう）

今オプションをいじったり色々試しております。
わかったらまたこちらに書き込みます。

[TaMaMhyu]

リンククリック時じゃなくてHTML構築時にデータ取得しているからだと思います。
関数化してクリック時に呼び出すように変える必要がありますね。

[TaMaMhyu]

dataのリンクをその場で変えられるのかはよくわからないですが…もしできなければ、反映ボタンみたいなのを用意して、リンクを更新するような実装になるでしょうか。

[Lhankor_Mhy]

>mitsuhiko03さん
TaMaMhyuさんがコメントでおっしゃっている通りです。
なにかしらのリンクを用意して、clickイベントでhref属性を書きかえるなどすれば動作すると思います。

[mitsuhiko03]

ありがとうございます。

あれからData URI Schemeの文法
(http://hakuhin.jp/js/data_uri_scheme.html#DATA_URI_SCHEME_00)
など読んだり、手持ちの本を読みましたが載ってなかったりで・・・。

すみません、コメントの内容が理解できず初歩的な疑問なのですが、
1.リンクを更新しても表示するページが同じでは変えた値も初期化してしまうのでは？
2.Lhankor_Mhyさんの書かれたコードはリンクをクリックした時に発生するイベントではない？（会話の流れからそう認識してます）

とりあえず、
htmlファイルに<input onclick="関数名();" />を入れて、
その関数の中に、data:～　を入れてみます。

[Lhankor_Mhy]

>1.リンクを更新しても表示するページが同じでは変えた値も初期化してしまうのでは？
一応、データソールをローカルにしたjqGridで変更させてみてjson出力してみましたが、変更後の値になっているようでした。

>2.Lhankor_Mhyさんの書かれたコードはリンクをクリックした時に発生するイベントではない？
そうですね。あらかじめjsonを埋めておくものです。

コードを追記しておきます。これでどうでしょうか？

[mitsuhiko03]

再追記試してみたらうまくいきました！
辛抱強く付き合って下さって、ありがとうございます！

TaMaMhyuさん、katoyさんもありがとうございました！

Answer 2

皆様ご回答ありがとうございます。
しかし、いまだに実現できてなくて試行錯誤中です。

調べた中では、Lhankor_Mhy さんのご回答が一番近かったと思います。
（jqgridのプラグイン１つだけで出力できそうな気がしますので）

ただ何も起きませんでしたので、私のオプションの設定ミス？カッコの間違い？かと思います。
（もしくはdataスキームというものを何もさわっていないから？）

どなたかわかる方いらっしゃいましたら、ご回答、ご指摘いただけると幸いです。

Answer 3

参考になるとおもわれるページを紹介します。

• jqGrid のデータをCSV形式で出力(クライアント側)サンプル http://www.northwind.mydns.jp/samples/jqgrid_sample26.php
  jqGrid のデータをCSV形式で出力(サーバー側)サンプル http://www.northwind.mydns.jp/samples/jqgrid_out2csv.php

• Export Data from jqGrid into a "real" Excel File http://www.codeproject.com/Tips/784342/Export-Data-from-jqGrid-into-a-real-Excel-File

• tableのデータを様々なフォーマットでエクスポート出来る様にするスクリプト http://kachibito.net/useful-resource/html-table-export

Comments

[mitsuhiko03]

返信遅くなり申し訳ありません。
ありがとうございます。

ただ3つはCSV形式でしたので、今回のものとは少し違いました。
4つ目の新しいプラグインは一応試しましたが、日本語や全角英数字は文字化けしてしまいました・・・。
csv出力からjson出力と応用が利けばよかったのですが・・・知識不足ですみません。

これは私の推測ですが、jqgridのプラグインだけでjson出力できそうな気がします。

Answer 4

元のデータをどのような形式で管理されているか、
画面上に出したデータに対して表示した後に何かするのか、
がわからないとなんとも言えないと思います。

質問が不明瞭でどうしたら良いかよくわかりませんが、
画面上のデータを保存したいのでしょうか？

Comments

[mitsuhiko03]

わかりづらくてすみません。

>元のデータをどのような形式で管理されているか
jqGridに表示した値のデータは、今回だけjavascriptファイルに直接打ち込みました。
最終的にはユーザーが入力したものを保存できるようにしたいです。

>画面上に出したデータに対して表示した後に何かするのか、
編集、保存ができるようにしたいです。

・・・最終的にはそうしたいと思っています。
ただ今はjqGridの値を出力できることが証明できればいいなと思っています。

[TaMaMhyu]

どこにどのような形式で保存したいのでしょうか？
保存したものは読み込みもできるようにしたいのでしょうか？

ブラウザ上での保存と読み込みであれば、JavaScriptから使用できるストレージ（ブラウザが永続的に保持する）を使う方法も考えられます。

[mitsuhiko03]

返信が遅くなり申し訳ありません。

>どこにどのような形式で保存したいのでしょうか？
同じフォルダにjsonファイルができるのがベストだと思います。
（これが一番簡単な出力かと思ってますが、技術的に難しいようならより簡単な方法をご教授頂きたいです。）

>保存したものは読み込みもできるようにしたいのでしょうか？
はい、修正したものを再度読み込めればなお良いです。

>JavaScriptから使用できるストレージ（ブラウザが永続的に保持する）を使う方法
ちょっと自信がなくて確認ですが、ブラウザの戻るボタンを押したり、ブラウザを閉じたりしない限り保存されてる情報のことですよね。
調べてどういうものかわかり次第試したいと思います。

[TaMaMhyu]

ストレージについてですが、IndexedDBなどいくつか種類がありますが、ブラウザが終了しても消えません。ブラウザで全データ消去のようなことをしない限りは消えないデータです。ただ、当然ブラウザごとに持つデータなので、違うブラウザでアクセスしたり、違う端末でアクセスすると別物になります。

[TaMaMhyu]

JavaScriptからの保存における技術的な観点では、アクセスしたユーザが手動で場所を指定する方法しかない気がします。これはLhankor_Mhyさんの回答にある、データURIスキームと呼ばれる方法で、ダウンロードの動作になります。なのでユーザが手動で場所を指定することになります。

[TaMaMhyu]

ブラウザのストレージであれば読み込みも実現できるとは思います。
上記のデータURIスキームでローカルに保存してしまうと、読み込むためには、サーバサイドの処理を作る必要があると思います。これはアップロードの動作になります。

[Lhankor_Mhy]

こんにちは。

>上記のデータURIスキームでローカルに保存してしまうと、読み込むためには、サーバサイドの処理を作る必要があると思います。

横からですみませんが、File API を使えばクライアントサイドだけで処理できそうな気がしてます。

[TaMaMhyu]

File API:Writerはブラウザの対応状況が不穏な感じがしますが、データURIスキームとFile APIを組み合わせれば何とか使えそうな感じがしますね。

[TaMaMhyu]

mitsuhiko03さんがどういう方針にするかとか、実装がうまくできそうか、による感じですが。

[mitsuhiko03]

色々とありがとうございます。
最終的にはデータをサーバに飛ばすので、まずはローカルに保存したいと考えております。
（質問した時点ではよくわかっておりませんでした）

お話お聞きする限り、クライアントサイドだけの処理は技術レベル的に難しそうですね・・・。