質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

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

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 9,760

score 5

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

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

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

質問としては良くないかもしれませんが・・・よろしくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+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直下にリンクが挿入されますのでクリックしてみてください。


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/11/27 17:13

    ありがとうございます。

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

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

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

    キャンセル

  • 2014/11/27 20:30

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

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

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

    キャンセル

  • 2014/11/28 11:09

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

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/11/25 21:57

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

    キャンセル

  • 2014/11/25 22:00

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

    キャンセル

  • 2014/11/26 17:02

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

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

    キャンセル

0

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

- 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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/11/25 16:46

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

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

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

    キャンセル

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る