Question

Buenas tardes.

Estoy utilizando este codigo javascript:

classDescuentos = function () {
};

classDescuentos.prototype = {
var cellsEditar = function (row, column, columnfield, value, defaulthtml, columnproperties) {
            var data = grid.jqxGrid('getrowdata', row);
            var style = "";

            if (data.editar == 't' && data.apr_ger == 'f') {
                style = "display:block";
            } else {
                style = "display:none";
            }

            var html = "";
            var activarBotEnv = actBtn;
            html = "<div id='activarEdicion_" + row + "' style='width:99%;text-align:center;" + style + "' ><a href='#' id='editarHora' name='editarHora' title='Editar Total horas descontar' onclick=classDescuentos.prototype.editarHora(" + row + ");><img style='padding-bottom: 0px' height='17px' width='17px' src=../../../media/img/edit.png></a></div>";
            return html;
        };

editarHora: function (row) {
        var grid = $(this.gridData);
        grid.jqxGrid('setcolumnproperty', 'des_hor_ger_format', 'editable', true);
        grid.jqxGrid('begincelledit', row, "des_hor_ger_format");

        grid.on('cellendedit', function () {
            grid.jqxGrid('setcolumnproperty', 'des_hor_ger_format', 'editable', false);
        });
    }
};

Pero cuando llamo a la función editarHora en el onclick de la etiqueta <a> no ejecuta lo que quiero. Qué estoy haciendo mal que no funciona?

Answer 1

hola @GerardoCabrera, tienes un error de síntaxis, parece que no tienes del todo claro como funciona un objeto en javascript.

para definir un miembro en el prototype del objeto classDescuentos no es válido usar var, por lo que lo correcto sería:

var classDescuentos;

classDescuentos = function () {}
classDescuentos.prototype = {
    cellsEditar: function (row, column, columnfield,
                           value, defaulthtml, columnproperties) {},
    editarHora: function (row) {}
};

por otro lado, creo que te falta revisar cierta información sobre patrones de diseño en javascript.

intentemos definiendo una implementacion de una clase:

var ClassDescuentos;

ClassDescuentos = (function () {
    'use strict';

    var _this = {};

    // constructor
    function ClassDescuentos () {
        _this = this;
        this.gridData = {};
    }

    // public members/methods
    ClassDescuentos.prototype = {
        gridData: null,

        cellsEditar: function (row, column, columnfield, value,
                               defaulthtml, columnproperties) {
            // ...
        },

        editarHora: function () {
            var grid;

            grid = $(this.gridData);
            grid.jqxGrid('setcolumnproperty', 'des_hor_ger_format', 'editable', true);
            grid.jqxGrid('begincelledit', row, "des_hor_ger_format");

            grid.on('cellendedit', function () {
                grid.jqxGrid('setcolumnproperty', 'des_hor_ger_format', 'editable', false);
            });

        }
    };

    // static class methods
    ClassDescuentos.staticMethod = function () {}

    // private methods
    function private1() {}
    function private2() {}

    return ClassDescuentos;
})();

---

Opción 1:

puedes usar para tu elemento <a> el código:
(new ClassDescuentos()).editarHora()

<a href='#' id='editarHora' name='editarHora' title='Editar Total horas descontar' onclick='(new classDescuentos()).editarHora(" + row + ");'>

Opción 2:

definir el objeto previamente.

var descuentos = new ClassDescuentos();

<a... onclick='descuentos.editarHora(" + row + ");'></a>

Opción 3:

definir un evento para el elemento <a>

cellsEditar: function (...) {
    var a;

     a = $('<a />')
        .attr('name', 'editarHora')
        .attr('id', 'editarHora')
        .css({});

    a.on('click', $.proxy(this.editarHora, this));

    // agregar 'a' al html de algun elemento tal vez?
}

Opción 4:

definir un método estático, pero recuerda que el contexto es distinto.