現在位置: start » study » javascript » dojo » select

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
study:javascript:dojo:select [2009/05/07 02:00] – bananastudy:javascript:dojo:select [2010/07/26 11:32] (現在) – banana
行 4: 行 4:
 今回の例では、表示するデータを**JSON**(%%JavaScript Object Notation%%)で保存してある。 今回の例では、表示するデータを**JSON**(%%JavaScript Object Notation%%)で保存してある。
 ツリーの構造は**%%Dojo Campus%%**(([[http://dojocampus.org/explorer/#Dijit_Tree_Basic|Digit Tree Component]]))から確認できる。 ツリーの構造は**%%Dojo Campus%%**(([[http://dojocampus.org/explorer/#Dijit_Tree_Basic|Digit Tree Component]]))から確認できる。
-あるいは、次節で示す**JSON**データを**JSON Editor**(([[http://braincast.nl/samples/jsoneditor/]] : JSON Editor))にコピーして確認することも可能である。+あるいは、次節で示す**JSON**データを**JSON Editor**(([[http://braincast.nl/samples/jsoneditor/|JSON Editor]]))にコピーして確認することも可能である。
 {{keywords>Dynamic select box json dojo tree}} {{keywords>Dynamic select box json dojo tree}}
  
行 86: 行 86:
 </code> </code>
  
-ここで、利用するのがdojoのコアパッケージにある%%**ItemFileReadStore**%%である。+ここで、利用するのがdojoのコアパッケージにある**%%ItemFileReadStore%%**である。
  
 次は読み込んだ**JSON**から初期リストを出力するコードを示す。 次は読み込んだ**JSON**から初期リストを出力するコードを示す。
行 96: 行 96:
         onComplete: function( items ) {             onComplete: function( items ) {   
          dojo.forEach( items, function(item, count) {          dojo.forEach( items, function(item, count) {
-              var opt=document.createElement('option'); +      var opt=document.createElement('option'); 
-       opt.appendChild(document.createTextNode(store.getValue( item, "name" ))); +       opt.appendChild(document.createTextNode(store.getValue( item, "name" ))); 
-       opt.setAttribute('value',store.getValue( item, 'index')); +       opt.setAttribute('value',store.getValue( item, 'index')); 
-   dojo.byId('continent').appendChild(opt); +   dojo.byId('continent').appendChild(opt); 
-       });      +            });      
-        },+   },
   onError: function(e) {   onError: function(e) {
          console.error( "!!!!",arguments );          console.error( "!!!!",arguments );
-  }+  }, 
 +        sort: sortAttributes 
    });    });
    showFirstChildren('continent','country');    showFirstChildren('continent','country');
行 134: 行 135:
       onError: function(e) {       onError: function(e) {
          console.error( "!!!!",arguments );          console.error( "!!!!",arguments );
-      }+      }, 
 +      sort: sortAttributes
    });    });
 }//showFirstChildren }//showFirstChildren
行 148: 行 150:
 function onChange(item, parent, child){ function onChange(item, parent, child){
    var val = item.options[item.selectedIndex].text;    var val = item.options[item.selectedIndex].text;
-   store.fetch( { query: { type: parent },+   store.fetch( { query: { type: parent, name:val },
       onComplete: function( items ) {       onComplete: function( items ) {
          dojo.forEach( items, function( item ) {          dojo.forEach( items, function( item ) {
-        if(val == store.getValue( item, "name" )){ +         
-        dojo.byId(child).innerHTML="";+        dojo.forEach(child, function(e){ 
 +           if(e) dojo.byId(e).innerHTML="";                
 +             });
         var children = store.getValues( item, "children");         var children = store.getValues( item, "children");
         dojo.forEach(children, function(node){         dojo.forEach(children, function(node){
行 158: 行 162:
    opt.appendChild(document.createTextNode(store.getValue( node, "name" )));    opt.appendChild(document.createTextNode(store.getValue( node, "name" )));
         opt.setAttribute('value',store.getValue( node, 'index'));         opt.setAttribute('value',store.getValue( node, 'index'));
-   dojo.byId(child).appendChild(opt);+   dojo.forEach(child, function(e){ 
 +                   if(e) dojo.byId(e).appendChild(opt);       
 +        });
  });  });
-      }//if+      
    });    });
  },   },
  onError: function(e) {  onError: function(e) {
            console.error( "!!!!",arguments );            console.error( "!!!!",arguments );
- }+ }, 
 +        sort: sortAttributes
    });     });
 } }
行 171: 行 178:
  
 ここで、注目するところは選択された値の識別子と**JSON**の親階層(parent)の識別子を比較して、該当する親の子供階層のみ表示することである。 ここで、注目するところは選択された値の識別子と**JSON**の親階層(parent)の識別子を比較して、該当する親の子供階層のみ表示することである。
 +
 ===== イベントの登録 ===== ===== イベントの登録 =====
 最後にイベントの登録について説明する。ここでは、親階層のデータが変わるたびに(onchange)に子供が変わるので、一見自分の子供だけ考えれば 最後にイベントの登録について説明する。ここでは、親階層のデータが変わるたびに(onchange)に子供が変わるので、一見自分の子供だけ考えれば
行 217: 行 225:
          console.error( "!!!!",arguments );          console.error( "!!!!",arguments );
   }   }
 +        ,sort: sortAttributes
    });    });
    showFirstChildren('continent','country');    showFirstChildren('continent','country');
行 242: 行 251:
          console.error( "!!!!",arguments );          console.error( "!!!!",arguments );
       }       }
 +      ,sort: sortAttributes
    });    });
 }//showFirstChildren }//showFirstChildren
行 247: 行 257:
 function onChange(item, parent, child){ function onChange(item, parent, child){
    var val = item.options[item.selectedIndex].text;    var val = item.options[item.selectedIndex].text;
-   store.fetch( { query: { type: parent },+   store.fetch( { query: { type: parent, name:val },
       onComplete: function( items ) {       onComplete: function( items ) {
          dojo.forEach( items, function( item ) {          dojo.forEach( items, function( item ) {
-        if(val == store.getValue( item, "name" )){+        
         dojo.forEach(child, function(e){         dojo.forEach(child, function(e){
     if(e) dojo.byId(e).innerHTML="";                    if(e) dojo.byId(e).innerHTML="";               
行 263: 行 273:
                   });                   });
  });  });
-      }//if+      
    });    });
  },   },
行 269: 行 279:
            console.error( "!!!!",arguments );            console.error( "!!!!",arguments );
  }  }
 +        ,sort: sortAttributes
    });     });
 } }
行 282: 行 293:
   });   });
 }); });
 +
 +var sortAttributes = [{attribute: "name", descending: true}];
 //--> //-->
 </script> </script>
 </head> </head>
 <body> <body>
 +
 <select id="continent"><option value=""></option></select><br/> <select id="continent"><option value=""></option></select><br/>
 <select id="country"><option value=""></option></select><br/> <select id="country"><option value=""></option></select><br/>
行 292: 行 306:
 </html> </html>
  
 +~~DISCUSSION~~

トレース: • create_xml • prevent_paste

QR Code
QR Code study:javascript:dojo:select (generated for current page)