jQuery EasyUI grille de données - permet l'édition en ligne
fonction éditable récemment ajouté à la grille de données (DataGrid) de. Il permet à l'utilisateur d'ajouter une nouvelle ligne à la grille de données (DataGrid). Les utilisateurs peuvent également mettre à jour une ou plusieurs lignes.
Ce tutoriel vous montre comment créer une grille de données (DataGrid) et éditeur en ligne.
Création d'une grille de données (DataGrid)
$ (Function () { $ ( '# Tt'). Datagrid ({ titre: 'éditable DataGrid', iconCls: «icon-edit ', largeur: 660, hauteur: 250, singleSelect: true, zone ID: 'itemid', url: 'datagrid_data.json', colonnes: [[ {Champ: 'itemid', titre: «ID d'objet, largeur: 60}, {Champ: 'ProductID', titre: "Produit", largeur: 100, formatter: function (value) { for (var i = 0; i <products.length; i ++) { if (produits [i] .productid == valeur) des produits de retour [i] .name; } la valeur de retour; }, éditeur: { Type: 'combobox', Options: { ValueField: 'ProductID', textField: 'nom', données: produits, nécessaire: true } } }, {Champ: 'Prix officiel', titre: 'Prix', largeur: 80, align: «droit», éditeur: {type: 'NumberBox' options: {précision: 1}}}, {Champ: 'unitcost', titre: «Coût unitaire», largeur: 80, align: «droit», éditeur: 'NumberBox'}, {Champ: 'attr1', titre: «Attribut, largeur: 150, éditeur: 'text'}, {Champ: «statut», le titre: 'Status', largeur: 50, align: «centre», éditeur: { Type: 'case', Options: { sur: 'P', off: '' } } }, {Champ: «action», titre: "Action", largeur: 70, align: «centre», formatter: function (valeur, ligne, index) { if (row.editing) { var s = '<a href="#" onclick="saverow(this)"> Enregistrer </a>'; var c = '<a href="#" onclick="cancelrow(this)"> Annuler </a>'; + De c retour; } Else { var e = '<a href="#" onclick="editrow(this)"> Modifier </a>'; var d = '<a href="#" onclick="deleterow(this)"> Supprimer </a>'; retour e + d; } } } ]], onBeforeEdit: function (index, ligne) { row.editing = true; updateActions (index); }, onAfterEdit: function (index, ligne) { row.editing = false; updateActions (index); }, onCancelEdit: function (index, ligne) { row.editing = false; updateActions (index); } }); }); updateActions de fonction (index) { $ ( '# Tt'). Datagrid ( 'updateRow', { index: index, rangée: {} }); }
Pour activer inline grille de données d'édition, vous devez ajouter une propriété à la colonne de l'éditeur. Editor (editor) indique Data Grid (DataGrid) Comment modifier le champ et comment enregistrer la valeur du champ. Comme vous pouvez le voir, trois éditeurs (éditeur) Nous définissons: texte, combobox et case à cocher.
fonction getRowIndex (cible) { var tr = $ (cible) .closest ( '-rangée tr.datagrid'); retour parseInt (tr.attr ( 'datagrid-row-index')); } fonction EditRow (cible) { $ ( '# Tt') datagrid ( 'BeginEdit', getRowIndex (cible)) .; } fonction deleteRow (cible) { $ .messager.confirm ( 'Confirmer', 'Etes-vous sûr?', Fonction (r) { if (r) { $ ( '# Tt') datagrid ( 'deleteRow', getRowIndex (cible)) .; } }); } fonction saverow (cible) { $ ( '# Tt') datagrid ( 'EndEdit', getRowIndex (cible)) .; } fonction cancelrow (cible) { $ ( '# Tt') datagrid ( 'CancelEdit', getRowIndex (cible)) .; }