L'arrière-plan de cette question est centré sur une grille montrant l'avancement des tâches sur les éléments de travail. Chaque ligne représente un élément de travail qui suit un modèle défini d'étapes, dont certaines sont effectuées par élément de travail, ou sont exécutées sur tous les éléments de travail en même temps.Kendo Grille et cases à cocher - sélectionner tout pour une colonne donnée, "sélectionner tout précédent"/"désélectionner tout après" pour la cellule d'une ligne donnée
Le résumé est qu'une case à cocher est fournie dans l'en-tête pour chaque étape qui est effectuée sur tous les éléments de travail simultanément, et lorsque cette case est cochée, toutes les cases de cette colonne sont vérifiées. En outre (et je comprends qu'il s'agit peut-être d'une question distincte, mais je l'ajoute car il fait partie du même problème que celui que je rencontre), chaque fois qu'une case à cocher est cochée, toutes les cases précédentes de cette ligne sont également vérifiés. Il reste également que toutes les cases à cocher après une case à cocher particulière sont décochées si elles sont vérifiées par inadvertance, mais je suppose que ce serait un ajout mineur à la case à cocher "select" pour une cellule de ligne. Je crois comprendre qu'un événement «on click» dans la case à cocher de l'en-tête de colonne déclenche une fonction qui itère dans les lignes et sélectionne/désélectionne les cases à cocher dans cette colonne. Ces cases à cocher auraient à leur tour onclick et "onchange" (puisque la case à cocher n'est pas réellement "cliquée"?) Événements qui sélectionnent toutes les cases à cocher avant cette case et désélectionner ces cases à cocher le long de la ligne. Voir ci-dessous pour un exemple de code rendant la table et du pseudo-code; l'exemple utilise des données statiques comme preuve de concept pour le client, mais finira par interagir avec une base de données SQL. Je suis heureux d'être montré une question qui répond à n'importe quel aspect de cette question, mais pour être franc les questions pourraient répondre à ces questions ne sont pas très claires pour moi, ou mieux servir différentes interfaces/langues.
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource:
{
transport:
{
read: {
url: "<?= $site_url ?>asset/data/production_progress.json",
type: "GET",
dataType: "json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
else
{
return "";
}
}
},
schema:
{
model:
{
id:"Item",
fields:
{
Item: { editable: false },
Step1: { type:"boolean", editable: true },
Step2: { type:"boolean", editable: true },
Step3: { type:"boolean", editable: true },
Step4: { type:"boolean", editable: true },
Step5: { type:"boolean", editable: true }
}
}
}
},
scrollable: false,
pageable: false,
columns: [
{ field: "Item" },
{ field: "Step1", title: "Step 1", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step1 ? "checked=checked" : "" # ></input>' },
{ field: "Step2", title: "Step 2", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step2 ? "checked=checked" : "" # ></input>' },
{ field: "Step3", attributes: {style: "text-align: center"}, template: '<input class="Step3" name="Step 3" type="checkbox" #= Step3 ? "checked=checked" : "" # ></input>', headerTemplate: 'Step 3<input type="checkbox" name="step3SelectAll"></input>' },
{ field: "Step4", title: "Step 4", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step4 ? "checked=checked" : "" # ></input>' },
{ field: "Step5", title: "Step 5", attributes: {style: "text-align: center"}, template: '<input type="checkbox" #= Step5 ? "checked=checked" : "" # ></input>' }
],
editable: "inline"
});
$("#step3SelectAll").change(function(){
if ($('#step3SelectAll').is(':checked')) {
$('.Step3').prop('checked', true);
}
else
{
$('.Step3').prop('checked', false);
}
});
// Start of pseudo-code
$("#grid.row.Step3").change(function() {
// Get dataSource from Grid
// Not sure how this is done, examples seen have separate dataSources which is against coding requirements
// Set all row cells prior to Step 3 as Selected
dataSource.row.Step1.value = "true";
dataSource.row.Step2.value = "true";
// Set all tor cells after to Step 3
dataSource.row.Step4.value = "false";
dataSource.row.Step5.value = "false";
});
});
EDIT: Figured comment sélectionner/désélectionner une colonne entière en définissant modèle de la colonne (dans ce cas, l'étape 3) case à cocher comme ayant une classe (dans ce cas « Etape 3 »), et en ajoutant le montant supplémentaire "$ (" # step3SelectAll "). change" fonction. Maintenant, en regardant les changements de case-only checkbox.