Pourquoi la grille de dojo a-t-elle besoin d'une colonne de nom dans la source de données json?

StackOverflow https://stackoverflow.com/questions/811596

  •  03-07-2019
  •  | 
  •  

Question

Dans l'exemple suivant, les données ne sont affichées dans la grille que si les données json contiennent une colonne de nom - > la première grille montre les données, la seconde non.

Pourquoi est-ce le cas?

index.html:                                   grille de dojo 

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/resources/dojo.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/grid/_grid/tundraGrid.css">
    <script type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js" 
            djConfig="parseOnLoad: true, isDebug: true">
    </script>

    <script type="text/javascript">
      dojo.require("dojo.parser");
      dojo.require("dojox.grid.Grid");
      dojo.require("dojo.data.ItemFileReadStore");
    </script>

  </head>
  <body class="tundra">
   <span dojoType="dojo.data.ItemFileReadStore" 
            jsId="withNameStore" 
            url="WithNameColumn.json"
            clearOnClose="true">
    </span>
    <table id="withNameGrid"
           dojoType="dojox.grid.Grid" 
           store="withNameStore"
           clientSort="true"
           style="width: 20em; height: 20em;">
        <thead>
           <tr>
              <th field="ID" >ID</th>
              <th field="test">Test</th>
           </tr>
        </thead>
    </table>
    <span dojoType="dojo.data.ItemFileReadStore" 
          jsId="withoutNameStore" 
          url="WithoutNameColumn.json"
          clearOnClose="true">
    </span>
    <table id="withoutNameGrid" 
           dojoType="dojox.grid.Grid" 
           store="withoutNameStore"
           clientSort="true"
           style="width: 20em; height: 20em;">
        <thead>
           <tr>
              <th field="ID" >ID</th>
              <th field="test">Test</th>
           </tr>
        </thead>
    </table>
  </body>
</html>

WithNameColumn.json: 

{
  "identifier":"ID",
  "label":"test",
  "items":
    [{"ID":2,"name":"name1","test":"dog"},
     {"ID":3,"name":"name2","test":"cat"},
     {"ID":4,"name":"name3","test":"mouse"}]
}

WithoutNameColumn.json: 

{
  "identifier":"ID",
  "label":"test",
  "items":
    [{"ID":2,"test":"dog"},
     {"ID":3,"test":"cat"},
     {"ID":4,"test":"mouse"}]
}
Était-ce utile?

La solution

Ajoutez simplement un attribut de requête à votre élément. Comme ceci:

< table query = " {ID: '*'} " ... >

Cela est dû au fait que cela effectuera une requête lors de la demande de données du magasin de données

Autres conseils

La colonne

Nom n'est pas nécessaire vous avez cependant besoin d'une carte entre la propriété dans le magasin de données et le nom de la colonne dans le la grille. Ceci est fait lors de la définition de la grille 'Layout' la propriété 'field' dans le 'Layout' est le nom de la colonne dans le magasin de données (le nom de la propriété doit être exacte) et la propriété 'name' dans le 'Layout' est le nom de la colonne dans la grille. 

    gridLayout = [{
        defaultCell: { width: 8, editable: true, type: dojox.grid.cells._Widget, styles: 'text-align: right;'  },
        rows: [
            { name: 'Id', field: 'id', editable: false /* Can't edit ID's of dojo.data items */ },
            { name: 'Date', field: 'col8', width: 10,
                type: dojox.grid.cells.DateTextBox,
                formatter: formatDate, 
                constraint: {formatLength: 'long', selector: "date"}},
            { name: 'Priority', styles: 'text-align: center;', field: 'col1', 
                type: dojox.grid.cells.ComboBox, 
                options: ["normal", "note", "important"], width: 10},
            { name: 'Mark', field: 'col2', width: 3, styles: 'text-align: center;', 
                type: dojox.grid.cells.CheckBox},
            statusCell,
            { name: 'Message', field: 'col4', styles: '', width: 10, 
                type: dojox.grid.cells.Editor, editorToolbar: true },
            { name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: {currency: 'EUR'}, 
                widgetClass: dijit.form.CurrencyTextBox },
            { name: 'Amount', field: 'col5', formatter: formatCurrency, constraint: {currency: 'EUR'}, 
                widgetClass: dijit.form.HorizontalSlider, width: 10}
        ]
    }];
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top