Utilizzando TreeView YUI e DataTable Insieme

12 Ottobre 2009 alle ore 05:33 da Carlos Bueno | In Sviluppo | 4 commenti

Quando si vuole presentare sia una gerarchia complessa ed elenchi di proprietà, il controllo TreeView e DataTable controlli in YUI due funzionano bene insieme.

Per questo suggerimento noi faremo un browser per i log del server web. Il controllo TreeView visualizza file e percorsi delle cartelle, e la DataTable mostrerà linee di log individuali. Facendo clic su un file o una cartella nella struttura farà sì che il DataTable per filtrare tutti, ma quel percorso. ( Clicca qui per la demo di lavoro .)

Schermata di esempio TreeView e DataTable

Per brevità userò i dati statici. In pratica si userebbe la tecnica dati dinamici dettagliate qui e qui e fare il filtraggio sul server. Dopo l'esempio statico, ci parla di dati dinamici in modo più dettagliato .

Il bit di prestare attenzione è il nesso tra le TreeView labelClicked evento e il DataSource di sendRequest() metodo. (Puoi trovare tutte le dipendenze per questo esempio sul YUI 2 Configurator .) 

 <- Combo a manico YUI file CSS: ->
 <Link rel = tipo "foglio di stile" = "text / css"
 <- Combo a manico YUI file JS: ->
 <Tipo di script = "text / javascript" 

 <-! Creare DIV contenitore per il controllo TreeView e DataTable ->
 <body class="yui-skin-sam">
   <table>
   <tr>
     <li>
     <div id="myTree" style="width:160px"> </ div>
     </ Td>
     <li>
     <div id="myContainer"> </ div>
     </ Td>
   </ Tr>
 </ Table>
 </ Body>

 <script>
 YAHOO.util.Event.addListener (finestra, "carico",
 function () {

   /**** DataTable ****/

   / / Definisce le colonne del DataTable
   var myColumnDefs = [
     {Chiave: "ip", label: "Indirizzo IP"},
     {Chiave: "percorso", etichetta: "Percorso"},
     {Chiave: "status", etichetta: "Status"},
     {Chiave: "msec", etichetta: "Il tempo"},
     {Chiave: "byte", label: "Taglia"},
     {Chiave: "ts", etichetta: "Timestamp"}
   ];

   / / Dati fittizi per la tabella.
   var myData = [
     {Ts: 'ott 10, 2009 14:33:26', ip: '1 .2.3.4 ', percorso:' / favicon.ico ', stato: 200, msec: 123, byte: 616},
     {Ts: 'ott 10, 2009 14:33:26', ip: '1 .2.3.4 ', percorso:' / images / logo.gif ', stato: 200, msec: 213, byte: 7891},
     {Ts: 'ott 10, 2009 14:33:26', ip: '1 .2.3.4 ', percorso:' / images / welcome.gif ', stato: 200, msec: 872, byte: 19357},
     {Ts: 'ott 10, 2009 14:33:26', ip: '1 .2.3.4 ', percorso:' / index.html ', stato: 200, msec: 901, byte: 13453},
     {Ts: 'ott 10, 2009 14:33:27', ip: '4 .5.6.7 ', percorso:' / favicon.ico ', stato: 304, msec: 110, bytes: 616},
     {Ts: 'ott 10, 2009 14:33:27', ip: '4 .5.6.7 ', percorso:' / images / logo.gif ', stato: 304, msec: 432, byte: 7891},
     {Ts: 'ott 10, 2009 14:33:27', ip: '4 .5.6.7 ', percorso:' / images / welcome.gif ', stato: 304, msec: 528, byte: 19357},
     {Ts: 'ott 10, 2009 14:33:27', ip: '4 .5.6.7 ', percorso:' / index.html ', stato: 304, msec: 562, byte: 13453},
     {Ts: 'ott 10, 2009 14:33:28', ip: '3 .4.5.6 ', percorso:' / favicon.ico ', stato: 200, msec: 313, byte: 616},
     {Ts: 'ott 10, 2009 14:33:28', ip: '3 .4.5.6 ', percorso:' / images / logo.gif ', stato: 200, msec: 215, byte: 7891},
     {Ts: 'ott 10, 2009 14:33:28', ip: '3 .4.5.6 ', percorso:' / images / welcome.gif ', stato: 200, msec: 324, byte: 19357},
     {Ts: 'ott 10, 2009 14:33:28', ip: '3 .4.5.6 ', percorso:' / index.html ', stato: 200, msec: 818, byte: 13453},
     {Ts: 'ott 10, 2009 14:33:29', ip: '7 .8.9.5 ', percorso:' / favicon.ico ', stato: 200, msec: 786, bytes: 616},
     {Ts: 'ott 10, 2009 14:33:29', ip: '7 .8.9.5 ', percorso:' / images / logo.gif ', stato: 200, msec: 604, byte: 7891},
     {Ts: 'ott 10, 2009 14:33:29', ip: '7 .8.9.5 ', percorso:' / images / welcome.gif ', stato: 200, msec: 803, byte: 19357},
     {Ts: 'ott 10, 2009 14:33:29', ip: '7 .8.9.5 ', percorso:' / index.html ', stato: 200, msec: 934, byte: 13453}
   ];

   / / Crea una statica "JSARRAY" DataSource con appositi campi.
   var = new MyDataSource YAHOO.util.DataSource (myData);
   myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
   myDataSource.responseSchema = {
     Campi: ['ip', 'percorso', 'status', 'ms', 'bytes', 'ts']
   };

   / / Crea una funzione di filtro che verrà chiamata ogni sendRequest time () viene chiamato.
   / / Restituisce solo i risultati cui percorso corrisponde al prefisso specificato.
   myDataSource.doBeforeCallback = function (path, crudo, res) {
     dati var = res.results | | [];
     var filtrata = [];
     if (path) {
       for (var i = 0; i <data.length; i + +) {
         if (data [i]. path.indexOf (percorso) === 0) {
           filtered.push (dati [i]);
         }
       }
       res.results = filtrato;
     }
     ritorno res;
   };

   / / Crea l'istanza DataTable dato l'elemento HTML, defs colonna e datasource.
   var = new myDataTable YAHOO.widget.DataTable ("myContainer", myColumnDefs, MyDataSource);

   /**** TreeView ****/

   / / Dummy dati albero, descrivendo una cartella e alcuni file.
   var myTreeData = [
     {Nome: 'immagini', i bambini: [
        {Nome: 'logo.gif'},
        {Nome: 'welcome.gif'}
      ]},
     {Nome: 'index.html'},
     {Nome: 'favicon.ico'}
   ];

   var = new myTree YAHOO.widget.TreeView ("myTree");

   / / Recurse sui dati albero di costruire nodi.
   / / Espandere il secondo livello di file e cartelle, ma tenere il resto nascosto.
   buildNodes funzione (parentNode, treeData, ParentPath, espanso) {
     for (var i = 0; i <treeData.length; i + +) {
       var = nodeData treeData [i];
       var = new nodo YAHOO.widget.TextNode (nodeData.name, parentNode, espanso);

       / / Costruisci il percorso completo del nodo per riferimento futuro.
       node.path = ParentPath + '/' + node.label;

       / / Recurse verso il basso se il nodo ha figli.
       if (nodeData.children) {
         buildNodes (nodo, nodeData.children, node.path, false);
       }
     }
   }
   buildNodes (myTree.getRoot (), myTreeData,'', true);

   / / Quando un nodo viene cliccato, filtrare il DataTable record
   / / Colpendo al DataSource di sendRequest () metodo.
   myTree.subscribe ("labelClick", function (nodo) {
     myDataSource.sendRequest (node.path, {
       successo: myDataTable.onDataReturnInitializeTable,
       fallimento: myDataTable.onDataReturnInitializeTable,
       campo di applicazione: myDataTable,
       argomento: myDataTable.getState ()
     });

   });

   myTree.draw ();

 });

 </ Script>

Utilizzando TreeView e DataTable con dati dinamici

Per utilizzare i dati dinamici, server-side impaginazione e ordinamento con un oggetto DataTable, controlla questo esempio . Per utilizzare i dati dinamici in un controllo TreeView, fare riferimento a questo esempio . Nel loadNodeData funzione è possibile aggiungere la chiamata a myDataSource.sendRequest() in questo modo: 

   / / Costruire una server-side chiamata che restituirà i registri di corrispondenza il percorso specificato
   var nodePath = encodeURIComponent (node.path);
   requestString var = 'path =' + nodePath + '& sort = ts & dir = asc & startIndex = 0 & results = 25';

   / / Scaccia il DataSource con sendRequest ()
   var = {oCallback
     successo: myDataTable.onDataReturnSetRows,
     fallimento: myDataTable.onDataReturnSetRows,
     campo di applicazione: myDataTable,
     argomento: myDataTable.getState ()
   };
   myDataSource.sendRequest (requestString, oCallback);

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

4 commenti

  1. Questo è qualcosa che ci affidiamo a un bel po 'nel nostro prodotto, e credo che è solo il display più impressionante di suggestioni YUI. Noi aggiungiamo i menu contestuali sia per l'albero e la tavola per la funzionalità di divertimento extra. Abbiamo clienti con sistemi che hanno milioni di dischi alla ricerca / navigazione / gestione e YUI ci ha aiutato a renderlo utilizzabile. Impressionante.

    Commento di Brian Holub - 12 Ottobre 2009 #

  2. Quindi, diciamo che sto usando asp.net mvc e spingere verso il basso i dati JSON alla vista.

    Qual è il modo migliore allora di:
    var = new MyDataSource YAHOO.util.DataSource (myData);

    Non credo che mettere i tag lato server è possibile in ragione javascript?

    cioè.

    var = new MyDataSource YAHOO.util.DataSource ();

    Supponiamo qui Model.ToJson fornisce esattamente ciò che il vostro 'myData' fa.

    Se potessi ottenere attraverso 'fusione' comprensione di questi dati dal server al javascript sarebbe andare un lungo cammino nella comprensione di come utilizzare questi 'controlli'.

    (Email me se vuoi)

    Grande post - grazie!

    Commento di Steve - 26 Ottobre 2009 #

  3. Ha preso la mia tag del server via in quel post:)

    Stavo cercando di mostrare passando ViewData.Model usando i tag lato server per DataSource la chiamata

    Commento di Steve - 26 Ottobre 2009 #

  4. C'è un modo per evitare che il filtraggio di generare una nuova richiesta? Voglio semplicemente prendere un mucchio di dati da un'altra pagina nella richiesta iniziale di costruire la tavola e l'albero, e poi cliccando sul albero modificare la tabella.

    Commento di Joe - 17 Marzo 2010 #

Al momento l'inserimento di commenti non è in questo momento.

Ospitato da Yahoo!

Copyright © 2006-2012 Yahoo! Inc. Tutti i diritti riservati. Privacy Policy - Termini del Servizio

Powered by WordPress su Yahoo! Web Hosting .