jQuery EasyUI Data Grid - opération de la colonne
Dans ce tutoriel, vous apprendrez comment inclure une colonne dans le fonctionnement de la grille de données modifiable (DataGrid) de. Une colonne de fonctionnement contient typiquement des valeurs d'une ou plusieurs autres opérations de colonnes.
Tout d'abord, créer une grille de données modifiable (DataGrid). Ici, nous créons une certaine colonne modifiable, «Prix officiel», «montant» et la colonne «unitcost» définie comme le type NumberBox d'édition. colonne de fonctionnement est le champ 'unitcost', sera le résultat de la multiplication de la colonne quantité ListPrice.
<Table id = style "tt" = "width: 600px; height: auto" title = "éditable DataGrid avec colonne calculée" iconCls = "icon-edit" singleSelect = "true" = zone ID "itemid" url = "data / datagrid_data.json"> <Thead> <Tr> <Field Th = "itemid" width = "80"> ID de l'article </ th> <Th field = largeur "ListPrice" = "80" = "right" éditeur align = "{type: 'NumberBox' options: {précision: 1}}"> Prix </ th> <Th field = "quantité" width = "80" align = "right" editor = "{type: 'NumberBox' options: {précision: 0}}"> Montant </ th> <Field Th = "unitcost" width = "80" align = "right" editor = "NumberBox"> Coût unitaire </ th> <Th field = "attr1" width = "150" editor = "text"> Attribut </ th> <Th field = "status" width = "60" align = "center" editor = "{type: 'case' options: {sur: 'P', off: ''}}"> Statut </ th> </ Tr> </ Thead> </ Table>
Lorsque l'utilisateur clique sur une ligne, nous avons commencé une action d'édition.
var lastIndex; $ ( '# Tt'). Datagrid ({ onClickRow: function (rowIndex) { if (lastIndex! = rowIndex) { $ ( '# Tt') datagrid ( 'EndEdit', lastIndex) .; $ ( '# Tt') datagrid ( 'BeginEdit', rowIndex) .; setEditing (rowIndex); } lastIndex = rowIndex; } });
Pour créer une relation entre le fonctionnement de certaines colonnes, nous devrions obtenir les éditeurs actuels, et de les lier à certains des événements ci-dessus.
fonction setEditing (rowIndex) { éditeurs var de = $ ( '# tt') datagrid ( 'getEditors', rowIndex) .; var priceEditor = éditeurs [0]; var amountEditor = éditeurs [1]; var costEditor = éditeurs [2]; priceEditor.target.bind ( «changement», function () { calculer (); }); amountEditor.target.bind ( «changement», function () { calculer (); }); fonction calculate () { coût var = priceEditor.target.val () * amountEditor.target.val (); $ (CostEditor.target) .numberbox ( 'setValue', coût); } }