Comment ajouter/supprimer des lignes en utilisant SlickGrid
Comment écrire de telles fonctions et les lier à deux boutons comme "ajouter une ligne" et "supprimer la ligne":
Le travail maintenant un exemple de code seulement en charge l'ajout de nouvelle ligne en édition sur le vide en bas de la ligne.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 3: Editing</title>
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="examples.css" type="text/css"/>
<style>
.cell-title {
font-weight: bold;
}
.cell-effort-driven {
text-align: center;
}
</style>
</head>
<body>
<div style="position:relative">
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
<div class="options-panel">
<h2>Demonstrates:</h2>
<ul>
<li>adding basic keyboard navigation and editing</li>
<li>custom editors and validators</li>
<li>auto-edit settings</li>
</ul>
<h2>Options:</h2>
<button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button>
<button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button>
</div>
</div>
<script src="../lib/firebugx.js"></script>
<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../slick.core.js"></script>
<script src="../plugins/slick.cellrangedecorator.js"></script>
<script src="../plugins/slick.cellrangeselector.js"></script>
<script src="../plugins/slick.cellselectionmodel.js"></script>
<script src="../slick.formatters.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
<script>
function requiredFieldValidator(value) {
if (value == null || value == undefined || !value.length) {
return {valid: false, msg: "This is a required field"};
} else {
return {valid: true, msg: null};
}
}
var grid;
var data = [];
var columns = [
{id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
{id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.LongText},
{id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
{id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
{id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date},
{id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date},
{id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}
];
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: false
};
$(function () {
for (var i = 0; i < 500; i++) {
var d = (data[i] = {});
d["title"] = "Task " + i;
d["description"] = "This is a sample task description.\n It can be multiline";
d["duration"] = "5 days";
d["percentComplete"] = Math.round(Math.random() * 100);
d["start"] = "01/01/2009";
d["finish"] = "01/05/2009";
d["effortDriven"] = (i % 5 == 0);
}
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.onAddNewRow.subscribe(function (e, args) {
var item = args.item;
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
});
})
</script>
</body>
</html>
OriginalL'auteur lkahtz | 2012-10-15
Vous devez vous connecter pour publier un commentaire.
Utilisation de la grille.invalidateAllRows() au lieu de de la grille.invalidateRow() en boucle.
OriginalL'auteur Vladimir
Finalement, j'ai compris moi-même. S'il vous plaît laissez-moi savoir si vous avez une meilleure idée sur la façon de le faire.
OriginalL'auteur lkahtz
Bien c'est un peu la même chose que vous avez fait, mais un peu différente car je ne pas re-rendre.
Jeter un oeil à ce qui suit:
OriginalL'auteur aemonge
Vous pouvez le faire par le moyen plus simple en utilisant insertItem et deleteItem de DataView.
Puis, se lier avec les boutons.
OriginalL'auteur HeiN