0

Solicito de su ayuda llevo poco desarrollando en ASP.NET MVC y estoy que cargando unos datos en una tabla con la ayuda de Javascript, solicito de ayuda para lo siguiente, necesito deshabilitar el botón de Asignar dependiendo de su estado, si su estado es TERMINADO el botón debe aparecer como la siguiente imagen de forma disabled

introducir la descripción de la imagen aquí

Actualmente lo tengo de la siguiente manera

introducir la descripción de la imagen aquí

El siguiente es el código html con el cual construyo mi tabla

Index.cshtml

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="card shadow mb-4">
        <div class="card-header py-3">
            <h4 class="m-0 font-weight-bold text-primary">Lista</h4>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="ticketsTable" class="table table-hover dt-responsive flex-nowrap" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Número</th>
                            <th>Solicitante</th>
                            <th>Asunto</th>
                            <th>Categoría</th>
                            <th>Estado</th>
                            <th>Asignar</th>
                        </tr>
                    </thead>    
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

Este es el código con el cual cargo cada una de las columnas con javascript

Lista.js

"columns": [

            {
                "title": "Número", "data": "TicketFolio", "fnCreatedCell": function (nTd, sData, oData) {
                    $(nTd).html(`<a href=${document.getElementById("ticketDetail").value}?ticketNumber=${oData.TicketId}&ticketFolio=${oData.TicketFolio}>${oData.TicketFolio}</a>`);
            }, "searchable": true }, 
            { "title": "Solicitante", "data": "TicketAplicant", "searchable": true }, 
            { "title": "Asunto", "data": "TicketSubjet", "searchable": true },            
            { "title": "Categoria", "data": "TicketService", "searchable": true }, 
            { "title": "Estado", "data": "TicketStatus", "searchable": true },          
            { "title": "Asignar", "data": null, "fnCreatedCell": function (nTd, sData, oData) {
                $(nTd).html(`<button id=${oData.TicketId} class="btn btn-primary">Asignar</button>`);
            }, "searchable": false, "orderable": false }
        ]

El estado TERMINADO se almacena en la columna Estado

UPDATE:

La estructura que tendría Estado y para saber si es TERMINADO lo hago a través de mi formulario de registro en un combo asignando su respectivo estado

introducir la descripción de la imagen aquí

Así es como recorro la lista para asignar

var data = query.Select(ticket => new 
                {
                    ticket.TicketId,
                    ticket.TicketFolio,
                    ticket.TicketAplicant,
                    ticket.TicketService,
                    ticket.TicketStatus,
                    ticket.TicketSubjet,
                    ticket.TicketEmployee
                }).ToList();

                var ticketList = new List<object>();

                foreach (var ticketIter in data)
                {
                    var queryRecords = TicketDetailsModel.ConsultRecordList(db, ticketIter.TicketId);
                    var dataRecords = queryRecords.OrderBy(records => records.RecordId).ToList();

                    ticketList.Add(new
                    {
                        ticketIter.TicketId,
                        ticketIter.TicketFolio,
                        ticketIter.TicketAplicant,
                        ticketIter.TicketService,
                        ticketIter.TicketStatus,
                        ticketIter.TicketSubjet,
                        ticketIter.TicketEmployee
                    });
                }

                return Json(new DataTablesResponse(requestModel.Draw, ticketList, filteredCount, totalCount));

El atributo TicketStatus corresponde al estado

8
  • como seria la estructura que tendría ESTADO ??, mejor dicho como sabes si es terminado ? , si "searchable" si esto es true tiene que habilitarse el botón o viceversa ? Commented el 6 sept. 2019 a las 16:59
  • @FRANCISCOJ.BLANCO revisa nuevamente la pregunta acabo de realizar la aclaración a tu inquietud
    – John Doe
    Commented el 6 sept. 2019 a las 17:04
  • a ver si entiendo , cuando cargas la tabla por cada iteracion debes validar el estado para poder mostrar si se puede asignar o no bloqueando el boton ?, Cuando te decia la estructura me referia a la estructura del json o del dato en si, con que variable en esa lista.js validarías si esta terminado ? Commented el 6 sept. 2019 a las 17:06
  • @FRANCISCOJ.BLANCO exactamente, pero solo dependiendo de su estado recuerda si es TERMINADO se debe deshabilitar el botón de Asignar
    – John Doe
    Commented el 6 sept. 2019 a las 17:08
  • Por eso en ese caso tienes que hacer una validacion y agregar una propiedad disabled a tu botón, muéstrame como recores la lista para asignarla Commented el 6 sept. 2019 a las 17:09

1 respuesta 1

1

según lo que hablamos,

Lo que debes hacer es lo siguiente, en tu código LISTA.JS debes agregar una validación para saber si el estado es TERMINADO y así crear el botón.

"columns": [

            {
                "title": "Número", "data": "TicketFolio", "fnCreatedCell": function (nTd, sData, oData) {
                    $(nTd).html(`<a href=${document.getElementById("ticketDetail").value}?ticketNumber=${oData.TicketId}&ticketFolio=${oData.TicketFolio}>${oData.TicketFolio}</a>`);
            }, "searchable": true }, 
            { "title": "Solicitante", "data": "TicketAplicant", "searchable": true }, 
            { "title": "Asunto", "data": "TicketSubjet", "searchable": true },            
            { "title": "Categoria", "data": "TicketService", "searchable": true }, 
            { "title": "Estado", "data": "TicketStatus", "searchable": true },          
            {
            "title": "Asignar", "data": "TicketStatus", "fnCreatedCell": function (nTd, sData, oData) {
                if (sData == 'TERMINADO' || sData == 'CERRADO') {
                    $(nTd).html(`<button id=${oData.TicketId} class="btn btn-primary" disabled>Asignar</button>`);
                } else if (sData != 'TERMINADO' || sData == 'CERRADO') {
                    $(nTd).html(`<button id=${oData.TicketId} class="btn btn-primary">Asignar</button>`);
                }
            }, "searchable": true, "orderable": false
        },

y tenias un error al data de Asginar lo estabas cargando null tienes que cambiarlo por "data": "TicketStatus"

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.