Afficher / masquer ou basculer une grille de dojo
https://stackoverflow.com/questions/9504080
-
14-11-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Quelle est la meilleure façon d'afficher / masquer une grille de données DOJO?
Je codage une page qui a besoin d'une entrée utilisateur avant qu'elle n'affiche une grille de données. Ainsi, idéalement, la section de la grille de la page doit être vide / vide lorsque la page se charge. Une fois que l'utilisateur fournit une entrée spécifique, la grille doit apparaître à la place désignée.
J'ai essayé de définir le style = "Affichage: aucun", puis le codage JS pour définir l'affichage = "bloc" et basculer entre aucun et Block, mais il affiche uniquement le contour de la grille.
Si j'omet le style = "Display: Aucun", la ceinture apparaît sur charge et je peux le cacher / l'idiquer par la suite sans aucun problème avec le même code.
Je suis perplexe pourquoi il se comporte différemment lorsque je définis l'affichage = aucun sur la charge. Quelle est la voie ou l'alternative pour résoudre ce problème?
Tout aperçu est très apprécié.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dojo Test</title>
<link rel="stylesheet" href="/cv/static/css/demo.css" media="screen">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/claroGrid.css">
<style type="text/css">
#target-grid{
width: 950px;
height: 350px;
/*visibility:hidden;*/
display: none;
position:relative; left:0; top:0; z-index:10;
border:1px solid #ebebeb; border-top:1px solid #f2f2f2;
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
behavior:url('/media/css/PIE.htc');
float: left;
}
</style>
<script>
var myStore, dataStore, grid;
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query){
myStore = Cache(JsonRest({target:"http://127.0.0.1:8080/cv/insight/data/2/"}), Memory());
grid = new DataGrid({
store: dataStore = ObjectStore({objectStore: myStore}),
structure: [
{name:"State Name", field:"name", width: "200px"},
{name:"Abbreviation", field:"id", width: "200px", editable: true}
]
}, "target-node-id"); // make sure you have a target HTML element with this id
grid.startup();
query("#save").onclick(function(){
dataStore.save();
});
});
</script>
<script>
require(["dijit/form/Button", "dojo/_base/Deferred", "dojo/_base/xhr", "dojo/_base/array", "dojo/dom-construct", "dojo/dom","dojo/domReady!"],
function(Button,Deferred, xhr, baseArray, domConstruct, dom) {
var button = new Button({
label: "Click Me!",
onClick: function(){
.......
}
}, "btn");
button.startup();
var button2 = new Button({
iconClass:"dijitIconNewTask",
showLabel:false,
label: "Click Me!", // analogous to title when showLabel is false
onClick: function(){
var ele = dom.byId("target-grid");
if(ele.style.display == "block") {
dojo.setStyle("target-grid", {"display": "none"});
//dojo.style(ele.domNode, 'display', 'none');
}
else {
dojo.setStyle("target-grid", {"display": "block"});
//dojo.style(ele.domNode, 'display', 'block');
//ele.startup();
ele.resize();
}
}
}, "btn2");
button2.startup();
});
</script>
</script>
</head>
<body class="claro">
<h1>Demo</h1>
<button id="btn"></button>
<button id="btn2"></button>
<ul id="userlist"></ul>
<div id="result1"></div>
<div id="target-grid"></div>
</body>
La solution
Je pense que la définition de l'attribut d'affichage est correcte. Si je me souviens bien, vous devez également appeler le redimensionnement sur la grille. Si la grille est cachée, sa méthode de démarrage est-elle appelée? Vous devrez peut-être le faire également.
// to hide grid
dojo.style(grid.domNode, 'display', 'none');
// to show grid
dojo.style(grid.domNode, 'display', '');
// grid.startup(); // needed???
grid.resize();
En réponse au commentaire
J'ai utilisé le HTML suivant. Sans l'appel de redimensionnement, je vois le contour de la grille. Avec l'appel de redimensionnement, cela fonctionne.
<div dojoType="dojo.data.ItemFileReadStore" jsId="jsonStore" url="dojox/grid/tests/support/countryStore.json" ></div>
<table dojoType="dojox.grid.DataGrid"
jsid="grid" id="grid"
store="jsonStore" query="{ name: '*' }" rowsPerPage="20" rowSelector="20px"
style="width: 400px; height: 200px; display:none;">
<thead>
<tr>
<th field="name" width="300px">Country/Continent Name</th>
<th field="type" width="auto">Type</th>
</tr>
</thead>
</table>
J'ai mis à jour le code que vous avez publié afin que les données du magasin aient été créées dans le code et ont également modifié ce qui suit
}, "target-node-id"); // make sure you have a target HTML element with this id
//to
}, "target-grid"); // make sure you have a target HTML element with this id
et
ele.resize();
// to
grid.resize();
Et cela a fonctionné.
Autres conseils
Il y a un hack pour ceci:
J'ai utilisé un champ, puis j'ai appelé un tri () sur la grille lors de l'affichage. Semble fonctionner.
<fieldset id="target-grid1" style="display:none">
<div id="target-grid"></div>
</fieldset>
Ensuite, dans votre procédure de bascule:
dojo.setStyle("target-grid", {"display": "block"});
grid.sort();
Vous pouvez le positionner initialement hors écran et le déplacer à l'écran lorsque vous voulez qu'il s'affiche (Dojo le fait avec des info-bulles).
