THE HAM MEDIA BLOG

<< ExcelをXMLで書き出したものをWEBで扱う時の注意 | TOP | ブックマークレットからjQueryを読み込む方法 >>

jQueryでXMLを操作してみる２

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ：
jQuery
タグ：
jquery
xml

jQueryでXMLを操作してみる２

以前に、XMLをjQueryで扱う勉強をした「jQueryでxmlを操作してみる」というエントリーを書いたのですが、なぜか今でも検索で見に来る人が多い…そんなにニーズがあるんだなーと、毎月驚いています。

今回は、先日エントリーした「ExcelをXMLで書き出したものをWEBで扱う時の注意」で書いたように、Excelで作ったデータをXMLで書き出し、そのデータを利用したサンプルでも一つ紹介してみようかなと思います。

XMLデータ

今回のXMLのデータは簡単に出来るようにExcelを使って書き出してみようと思います。Excelデータは簡易的に下記のように作ってみました。

Excelデータ

このデータを保存するときにXML形式にして保存する。書き出して文字コードを加えたデータは下記のようなものになる。データは一部だけ表示しています。

■今回利用するXMLデータ(一部省略)

<?xml version="1.0" encoding="Shift-JIS" ?> 
<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
 xmlns:o="urn:schemas-microsoft-com:office:office"
 xmlns:x="urn:schemas-microsoft-com:office:excel"
 xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
 xmlns:html="http://www.w3.org/TR/REC-html40">
 <OfficeDocumentSettings xmlns="urn:schemas-microsoft-com:office:office">
  <DownloadComponents/>
  <LocationOfComponents HRef="file:///\\"/>
 </OfficeDocumentSettings>
 <ExcelWorkbook xmlns="urn:schemas-microsoft-com:office:excel">
  <WindowHeight>9120</WindowHeight>
  <WindowWidth>11715</WindowWidth>
  <WindowTopX>240</WindowTopX>
  <WindowTopY>105</WindowTopY>
  <ProtectStructure>False</ProtectStructure>
  <ProtectWindows>False</ProtectWindows>
 </ExcelWorkbook>
 <Worksheet ss:Name="テストシート">
  <Table ss:ExpandedColumnCount="5" ss:ExpandedRowCount="27" x:FullColumns="1"
   x:FullRows="1" ss:DefaultColumnWidth="54" ss:DefaultRowHeight="13.5">
   <Column ss:StyleID="s21" ss:Width="27"/>
   <Column ss:Width="63"/>
   <Column ss:StyleID="s21" ss:Width="60"/>
   <Column ss:Width="78.75"/>
   <Column ss:Width="90"/>
   <Row>
    <Cell><Data ss:Type="String">ID</Data></Cell>
    <Cell><PhoneticText xmlns="urn:schemas-microsoft-com:office:excel">メイ</PhoneticText><Data
      ss:Type="String">ユーザー名</Data></Cell>
    <Cell><Data ss:Type="String">パスワード</Data></Cell>
    <Cell><Data ss:Type="String">メールアドレス</Data></Cell>
    <Cell><PhoneticText xmlns="urn:schemas-microsoft-com:office:excel">デンワバンゴウ</PhoneticText><Data
      ss:Type="String">電話番号</Data></Cell>
   </Row>
   <Row>
    <Cell><Data ss:Type="String">001</Data></Cell>
    <Cell><Data ss:Type="String">aaa</Data></Cell>
    <Cell><Data ss:Type="String">passa01</Data></Cell>
    <Cell><Data ss:Type="String">a001@aa.aa</Data></Cell>
    <Cell ss:StyleID="s21"><Data ss:Type="String">000-0000-0001</Data></Cell>
   </Row>
   <Row>
    <Cell><Data ss:Type="String">002</Data></Cell>
    <Cell><Data ss:Type="String">bbb</Data></Cell>
    <Cell><Data ss:Type="String">passa02</Data></Cell>
    <Cell><Data ss:Type="String">a002@aa.aa</Data></Cell>
    <Cell ss:StyleID="s21"><Data ss:Type="String">000-0000-0002</Data></Cell>
   </Row>
   <Row>
    <Cell><Data ss:Type="String">003</Data></Cell>
    <Cell><Data ss:Type="String">ccc</Data></Cell>
    <Cell><Data ss:Type="String">passa03</Data></Cell>
    <Cell><Data ss:Type="String">a003@aa.aa</Data></Cell>
    <Cell ss:StyleID="s21"><Data ss:Type="String">000-0000-0003</Data></Cell>
   </Row>
  </Table>
  <WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">
   <PageSetup>
    <Header x:Margin="0.51200000000000001"/>
    <Footer x:Margin="0.51200000000000001"/>
    <PageMargins x:Bottom="0.98399999999999999" x:Left="0.78700000000000003"
     x:Right="0.78700000000000003" x:Top="0.98399999999999999"/>
   </PageSetup>
   <Selected/>
   <Panes>
    <Pane>
     <Number>3</Number>
     <ActiveRow>24</ActiveRow>
     <ActiveCol>5</ActiveCol>
    </Pane>
   </Panes>
   <ProtectObjects>False</ProtectObjects>
   <ProtectScenarios>False</ProtectScenarios>
  </WorksheetOptions>
 </Worksheet>
</Workbook>

今回の作るサンプル

今回jQueryとXMLで作るサンプルはデータの見出しを全てドロップダウンにして、そこで選択したデータだけを表示させるという簡単なもの。↓こんな感じになる。簡易的な解説はスクリプト中のコメントにて。

表示例

■スクリプト

jQuery(function($){
  //XMLデータの読み込み
  $.ajax({
  //XMLファイルの指定
    url: '../xml/samplelist.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
    //XMLデータの読み込みに失敗した場合にアラート
        alert("xmlファイルの読み込みに失敗しました");
    },
    success: function(xml){
    //変数の初期化
        var listitem,selectitem  ="";
    //エクセルデータの読み込み（XMLのデータはfindで取得）
    $(xml).find("Row").each(function(i){
      var select_text1  = $(this).next().find('Cell:eq(0) Data').text();
      var select_text2  = $(this).next().find('Cell:eq(1) Data').text();
      
      //ドロップダウンリストの中身
      selectitem += '<option value="'+i+'">'+ select_text1 
	    +'：'+select_text2+'<\/option>';
      
        });
    
    //ドロップダウンリストの中身をHTML上に流し込む
    $('form#select select').append(selectitem);
        
    //表示の切り替え（ドロップダウンリスト選択）
    $('form#select select').change(function(){
      
      //取得アイテムの初期化
      listitem =   "";  
      
      //表示しているものを消す
      $('div#samp-list').slideUp('slow');
      
      //選択したID取得
      var valId = $(this).val();
      
      
      //表示アイテム取得(表示アイテム取得機能の呼び出し)
      $(xml).find('Row:eq('+valId+')').each(datalist);
      
      //セレクトしたものを表示(1秒後)
      setTimeout(dataload,1000);
      
      //取得IDの初期化
      valId = "";
      
      return false;
    });
    
    //XMLからアイテム取得する機能
    function datalist(){
      //next()をつけると2行目から取得
      var item_text1  = $(this).next().find('Cell:eq(0) Data').text();
      var item_text2  = $(this).next().find('Cell:eq(1) Data').text();
      var item_text3  = $(this).next().find('Cell:eq(2) Data').text();
      var item_text4  = $(this).next().find('Cell:eq(3) Data').text();
      var item_text5  = $(this).next().find('Cell:eq(4) Data').text();
      
      //HTMLの整理inputはreadonly
      var prebox  = '<div class="list">';
      var pretext = '<p>データ<\/p>';
      var ID      = 
	    '<form><dt>ID：<\/dt>'
		+'<dd><input type="text" value="'+item_text1+'" readonly />'
		+'<\/dd>';
      var user    = 
	    '<dt>ユーザー名：<\/dt>'
		+'<dd><input type="text" value="'+item_text2+'" readonly />'
		+'<\/dd>';
      var pass    = 
	    '<dt>パスワード：<\/dt>'
		+'<dd><input type="text" value="'+item_text3+'" readonly />'
		+'<\/dd>';
      var mail    = 
	    '<dt>メールアドレス：<\/dt>'
		+'<dd><input type="text" value="'+item_text4+'" readonly />'
		+'<\/dd>';
      var phone   = 
	    '<dt>電話番号：<\/dt>'
		+'<dd><input type="text" value="'+item_text5+'" readonly />'
		+'<\/dd>';
      var endbox  = '<\/form><\/div>';

      //読み込んだデータをまとめる
      listitem = 
	    prebox + pretext + ID + user 
		  + pass + mail + phone + endbox;
      
      //データの中身にundefinedがあったら削除
      listitem = listitem.replace("undefined" , "");
    };
    
    //取得アイテムを表示する機能
    function dataload(){
      $('div#samp-list').slideDown('slow').html(listitem);
          
      //フォーカスしたinputの色変え
      $('input').focus(function(){
        $(this).css({backgroundColor:'#e0ffff'});
        
        //クリックしたら全選択
        $(this).select()
      });
      $('input').blur(function(){
        $(this).css({backgroundColor:'#ffffff'});
      });
    };
    
    }
    });
});

XML中のデータを取得するには、find()を使い、目的の部分だけを取得するにはeq()を使うと簡単に取得できる。上記のスクリプトのサンプル(デモ)は下記リンクにて。

サンプルプレビュー

XMLは同じドメイン上にあること

以前の補足にも書いたことだけど、XMLをjQueryで扱うときは、同じドメイン上においてある必要がある。別ドメインのXMLデータなどは読み込めないので注意。その場合はXMLではなく、JSONやJSONP形式のデータであれば読み込むことができる。クロスドメインで使用するかどうかなどの用途によって使い分けたほうがいいでしょう。

関連エントリー：
Clip to Evernote このエントリーをはてなブックマークに追加
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバック

トップに戻る

×

この広告は90日以上新しい記事の投稿がないブログに表示されております。