J'essaie d'afficher un KoGrid qui contient des données de base. La grille a une case à cocher intégrée qui indique si le spectacle est un film ou non, et une autre case à cocher intégrée indiquant si le spectacle est un dessin animé. Le Javascript pour cette grille, dans un fichier appelé testgrid.js, est fourni ci-dessous:J'ai besoin d'obtenir des colonnes de cases à cocher personnalisées pour travailler dans KoGrid
var theList = [
{ isMovie: false, isCartoon: true, name: "Johnny Quest" },
{ isMovie: true, isCartoon: true, name: "Heavy Metal" },
{ isMovie: true, isCartoon: false, name: "Star Wars Rogue One" },
{ isMovie: false, isCartoon: false, name: "The Invaders" },
{ isMovie: true, isCartoon: false, name: "Star Trek: The Voyage Home" },
{ isMovie: false, isCartoon: true, name: "Space Ghost" },
{ isMovie: false, isCartoon: false, name: "Star Trek Classic" },
{ isMovie: false, isCartoon: false, name: "Lost In Space" },
{ isMovie: false, isCartoon: true, name: "Bugs Bunny/Road Runner Hour" },
];
var showTitles = [
{field: 'isMovie',displayName: 'Movie',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: theData.isMovie' />"},
{field: 'isCartoon',displayName: 'Cartoon',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: theData.isCartoon' />"},
{field: 'name',displayName: 'Show Name',width: '78%'},
];
var TestModel = function() {
var self = this;
self.theData = ko.observableArray(theList);
self.selectShow = ko.observableArray([]);
self.instantiateSelf = function() {
ko.applyBindings(theModel);
}
self.listOptions = {
afterSelectionChange: function() { alert("Show Selected: "+selectShow()[0]); },
data: self.theData,
selectedItems: self.selectShow,
displaySelectionCheckbox: false,
multiSelect: false,
columnDefs: showTitles
}
}
var theModel = new TestModel();
Le code HTML que j'utilise est fourni ci-dessous:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Grid Test</title>
<link href="lstyles.css" rel="stylesheet" type="text/css">
<link href="KoGrid.css" rel="stylesheet" type="text/css">
<script src="knockout-3.4.2.js" type="text/javascript"></script>
<script src="jquery-3.2.0.js" type="text/javascript"></script>
<script src="koGrid-2.1.1.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.support.cors = true;
theModel.instantiateSelf();
});
</script>
</head>
<body>
<div id="body">
<div id="data">
<div id="display">
<div id="lstStyle" data-bind="koGrid: listOptions"></div>
</div>
<div id="footer">
</div>
</div>
</div>
<script>
</script>
</div>
<script src="testgrid.js" type="text/javascript"></script>
</body>
</html>
La grille n'affiche pas. Ce qui s'affiche ressemble à une partie d'un affichage de grille mais rien n'apparaît.
J'ai effectué un dépannage. J'ai découvert que le problème réside dans les instructions "data-bind" dans la définition cellTemplate que je fournis pour les cases à cocher de l'objet showTitles dans testgrid.js. Si je supprime ces instructions, la grille s'affiche, mais je ne peux pas cocher ou décocher les cases, et je ne peux pas obtenir l'état des cases à cocher.
Y a-t-il un moyen de faire fonctionner ces cases à cocher dans un kogrid? Comment puis-je en obtenir un à lier au booléen auquel ils sont assignés?
Quelqu'un s'il vous plaît aviser.
Pour être complet, voici la feuille de style, appelé lstyles.css:
#lstStyle {
border: 4px solid #0055AA;
width: 100%;
height: 400px;
float: left;
}
.grpcheck {
position:relative;
top: 10px;
left: 10px;
}
problèmes de checkbox, a continué
Merci à donMateo, je fait quelques changements qui m'a permis d'afficher la grille. Une fois que j'ai pu l'afficher, j'ai commencé à cliquer sur les cases à cocher pour voir si elles fonctionneraient. Ils ne le font pas - ou plutôt, ils ne fonctionnent pas comme je l'espérais.
Problème 1: La première chose que j'ai remarquée était que les états de case à cocher ne reflètent pas les données auxquelles ils sont liés. Indépendamment de la valeur de isMovie et isCartoon, les cases à cocher de chaque spectacle ne sont pas cochées. Par exemple: Johnny Quest a isCartoon sur "true". La liste montre cette case comme non cochée. Star Wars Rogue One a isMovie défini sur true. Sa boîte isMovie est décochée. Figure 1 montre ce que je vois.
REMARQUE: L'intégration d'images sur ce site ne fonctionne pas. Même lier les images semble être cassé. Je fournis des liens HTTP directement sur mon site en espérant qu'ils seront suffisants pour illustrer.
J'ai changé mon code de sélection pour qu'il appelle une fonction qui affiche une boîte d'alerte affichant les valeurs du nom de l'émission, de la valeur isMovie et de la valeur isCartoon. En sélectionnant Johnny Quest, je vois que les valeurs isMovie et isCartoon sont correctes. Mon premier problème est donc: pourquoi les cases à cocher ne reflètent-elles pas les valeurs de leurs données?
Problème 2: Un autre problème que j'ai trouvé que lorsque je clique sur une case à cocher, il ne semble pas retenir le changement que je fais. Figure 2 montre ce qui se passe lorsque je clique sur la case isMovie de Johnny Quest. Notez que la case à cocher est cochée, mais la zone d'alerte affiche toujours la valeur isMovie comme false. Notez s'il vous plaît que l'alerte est affichée après la case à cocher change d'état.
Lorsque je clique sur le bouton "OK" de la boîte d'alerte, notez dans Figure 3 comment la case à cocher retourne à un état "non coché".En fait, la seule raison pour laquelle nous voyons la case cochée dans Figure 2 est à cause du retard causé par la boîte d'alerte! Je sais cela parce que, comme expérience, j'ai temporairement retiré la boîte d'alerte, actualisé le navigateur et cliqué sur la case à cocher Film pour Johnny Quest. Il y avait une brève indication de la case à cocher étant pressé, puis la case à cocher est revenue à être décochée. Mon second problème est donc: pourquoi la case à cocher n'affiche-t-elle pas la modification appropriée lorsqu'elle est cochée ou décochée? Problème 3: La troisième chose et la plus troublante que j'ai découverte est qu'il y a apparemment un changement d'état pour les cases à cocher - mais il ne montre pas ce changement et (pire) il ne provoque pas les changements J'attendrais. Cela peut être démontré en provoquant un réaffichage des données dans la grille, dans mon cas en triant les données. Lorsque je lance la grille, l'ordre dans lequel les spectacles sont affichés est l'ordre indiqué dans Figure 1.
Si je clique sur la colonne "Afficher le nom", la liste triée ressemble à Figure 4. Je clique ensuite sur la case du film Johnny Quest, j'obtiens la boîte d'alerte, puis sur Ok. Figure 5 montre comment la case à cocher est toujours inchangée.
Maintenant, quand je clique de nouveau sur la colonne "Afficher le nom", afin de faire un tri inverse, notez ce qui arrive à toutes les cases du film dans Figure 6!
La même chose arrive aux cases à cocher dessinées. Cliquez sur un, cliquez sur OK dans la boîte d'alerte, puis faites un resort. Toutes les cases à cocher seront cochées.
Pour les décocher, il suffit de cliquer sur une case cochée, noter l'état incorrect affiché dans la boîte d'alerte, cliquer sur OK, puis sur resort. Toutes les cases seront décochées.
Donc, mon troisième problème est: quel est le lien entre les cases à cocher dans les différentes lignes? Plus important: comment puis-je rompre ce lien ??? Résumé: Le KoGrod est vraiment foutu quand il s'agit de mettre des contrôles dans des colonnes personnalisées. Pour les cases à cocher: les données affichées par une case à cocher ne sont pas synchronisées avec le paramètre de données individuel auquel elle est supposée être liée. Si vous tentez de modifier l'état de la case à cocher, cela ne fonctionne pas. Si vous cochez une seule case, vous pouvez tous les modifier, mais vous ne voyez pas ce changement tant que vous n'avez pas redessiné la grille (tri, défilement ou pagination). Cela conduit à une question: le modèle de cellule est-il destiné à être simplement un modèle d'affichage pour une grille? Le koGrid est-il même capable de gérer correctement les colonnes personnalisées qui contiennent des contrôles? Si c'est le cas, comment? De pas, alors où puis-je trouver un contrôle de grille qui peut?
Quelqu'un s'il vous plaît aviser.
Le testgrid.js actuel est fourni ci-dessous. Aucun autre fichier n'a été modifié.
var theList = [
{ isMovie: false, isCartoon: true, name: "Johnny Quest" },
{ isMovie: true, isCartoon: true, name: "Heavy Metal" },
{ isMovie: true, isCartoon: false, name: "Star Wars Rogue One" },
{ isMovie: false, isCartoon: false, name: "The Invaders" },
{ isMovie: true, isCartoon: false, name: "Star Trek: The Voyage Home" },
{ isMovie: false, isCartoon: true, name: "Space Ghost" },
{ isMovie: false, isCartoon: false, name: "Star Trek Classic" },
{ isMovie: false, isCartoon: false, name: "Lost In Space" },
{ isMovie: false, isCartoon: true, name: "Bugs Bunny/Road Runner Hour" },
];
var showTitles = [
{field: 'isMovie',displayName: 'Movie',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: $data.isMovie' />"},
{field: 'isCartoon',displayName: 'Cartoon',width: '10%',cellTemplate: "<input type='checkbox' class='grpcheck' data-bind='checked: $data.isCartoon' />"},
{field: 'name',displayName: 'Show Name',width: '78%'},
];
var TestModel = function() {
var self = this;
self.theData = ko.observableArray(theList);
self.selectShow = ko.observableArray([]);
self.instantiateSelf = function() {
ko.applyBindings(theModel);
}
self.displaySelect = function() {
alert("Show Selected: "+self.selectShow()[0].name+" Movie: "+self.selectShow()[0].isMovie+" Cartoon: "+self.selectShow()[0].isCartoon);
}
self.listOptions = {
afterSelectionChange: function() { self.displaySelect(); },
data: self.theData,
selectedItems: self.selectShow,
displaySelectionCheckbox: false,
multiSelect: false,
columnDefs: showTitles
}
}
var theModel = new TestModel();
Il semblerait que les modifications aient résolu le problème immédiat de l'affichage de la grille. Il y a cependant d'autres problèmes: l'état des cases à cocher ne reflète pas les valeurs et elles ne conservent pas leur état lorsqu'elles sont cliquées.Dois-je décrire les problèmes ici ou devrais-je commencer une autre question? –
Ce poste est un bon endroit pour résoudre tous les problèmes avec ce code je crois :) – donMateo
OK, alors: Je vais modifier mon message original. Soyez prêt: il va grossir de façon significative ... –