0

Deseo poder hacer una tabla que me disable los td dependiendo del select option que yo seleccione.

Ejemplo: Si selecciono la Madera1 el primer y segundo td quedan habilitados y el tercero disableado con el boton enabled td al lado.

Pero si seleciono la Madera2 el segundo y tercero quedan habilitados(quitando el boton enabled td) y el primer td queda disableado con el boton enabled td.

Y si selecciono la Madera3 solo el primer td queda habilitado y el segundo con el tercero disableados con el boton enabled td al lado.

$('#table').editable({
        container: 'body',
        selector: 'td.task',
        title: 'task',
        type: "POST",
        showbuttons: false,
         type: 'text',
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        },  
        success: function(response) {
  
           $(this).parent().find(".Item").click();
        }
    });
    var ITEM = [];
    $.each({
        "Item1": "Item1",
        "Item2": "Item2",
        "Item3": "Item3",
        "Item4": "Item4"
    }, function(k, v) {
        ITEM.push({
            value: k,
            text: v
        });
    });
    
    $('#table').editable({
        container: 'body',
        selector: 'td.Item',
        title: 'Item',
        type: "POST",
        showbuttons: false,
        source: ITEM,
        validate: function(value) {
            if ($.trim(value) == '') {
                return 'Empty!';
            }
        }
    });
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <div class="col-sm-3">
             <small>Clasificacion Producto</small>
        <select class="form-group browser-default custom-select" id="clasificacion">
           <option selected disabled>.::Clasificacion::.</option>
           <option value="Madera1">Madera1</option>
           <option value="Madera2">Madera2</option>
           <option value="Madera3">Madera3</option>
              
                        </select>
                      </div>
<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Task</th>
      <th>Item</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>1</td>
  <td data-name="task" class="task" data-type="text">001</td>
  <td data-name="Item" class="Item" data-type="select">Item2</td>
  <td></td>
  </tr>
    <tr>
  <td>2</td>
  <td data-name="task" data-disabled="true" class="task" data-type="text">002</td>
  <td data-name="Item" data-disabled="true" class="Item" data-type="select">Item1</td>
  <td>  <button id="enable" class="btn btn-sm btn-default">enable td</button></td>
  </tr>
   <tr>
  <td>3</td>
  <td data-name="task" class="task" data-type="text">003</td>
  <td data-name="Item" class="Item" data-type="select">Item3</td>
  <td></td>
  </tr>
  </tbody>
</table>

He intentado hacerlo con un switch.

<script>
$("#clasificacion").change(function() {

        var valor = $(this).val(); // Capturamos el valor del select
        var texto = $(this).find('option:selected').text(); // Capturamos el texto del option seleccionado

  switch (texto) {
          case 'Madera1':
            var celdas = $('#table tbody > tr').find('td'); //ENCONTRAMOS EL TD
            break;
          case 'Madera2':
            var celdas = $('#table tbody > tr').find('td'); //ENCONTRAMOS EL TD
            break;
          case 'Madera3':
            var celdas = $('#table tbody > tr').find('td'); //ENCONTRAMOS EL TD
            break;

    });
</script>

Espero haberme explicado bien. Saludos PD: Tambien si es posible que el boton enabled td pueda quitarle el disabled de ese td.

4
  • En el switch no has intentado nada.
    – alanfcm
    Commented el 8 nov. 2018 a las 17:44
  • @alanfcm agrego lo poco que tenia en mi switch donde encuentro el TD
    – MoteCL
    Commented el 8 nov. 2018 a las 17:51
  • Si tu tabla es estática, podrías agregarle un identificador a cada fila(tr) y en base a eso ir cumpliendo las condiciones dentro del switch Commented el 8 nov. 2018 a las 22:43
  • @Ricardo Si mi taba es estatica, puedo agregarle un identificador y aplicar .data('disabled', false);
    – MoteCL
    Commented el 9 nov. 2018 a las 11:44

1 respuesta 1

1

Sinceramente nunca había trabajado con x-editable, el código hace lo que tu necesitas, tiene algunos detalles que tu mismo podrías corregir:

$('#table').editable({
    container: 'body',
    selector: 'td.task',
    title: 'task',
    type: "POST",
    showbuttons: false,
    type: 'text',
    validate: function(value) {
        if ($.trim(value) == '') {
            return 'Empty!';
        }
    },
    success: function(response) {

        $(this).parent().find(".Item").click();
    }
});
var ITEM = [];
$.each({
    "Item1": "Item1",
    "Item2": "Item2",
    "Item3": "Item3",
    "Item4": "Item4"
}, function(k, v) {
    ITEM.push({
        value: k,
        text: v
    });
});

$('#table').editable({
    container: 'body',
    selector: 'td.Item',
    title: 'Item',
    type: "POST",
    showbuttons: false,
    source: ITEM,
    validate: function(value) {
        if ($.trim(value) == '') {
            return 'Empty!';
        }
    }
});


$("#clasificacion").change(function() {

    var valor = $(this).val(); // Capturamos el valor del select
    var texto = $(this).find('option:selected').text();
    var opt1 = $(".opt1").data('blocked');
    var opt2 = $(".opt2").data('blocked');
    var opt3 = $(".opt3").data('blocked'); // Capturamos el texto del option seleccionado
    $(".btntd").remove();

    if (opt1 == true) {
        $(".opt1 > td.task").editable('option', 'disabled', false);
        $(".opt1 > td.Item").editable('option', 'disabled', false);
    }
    if (opt2 == true) {
        $(".opt2 > td.task").editable('option', 'disabled', false);
        $(".opt2 > td.Item").editable('option', 'disabled', false);
    }
    if (opt3 == true) {
        $(".opt3 > td.task").editable('option', 'disabled', false);
        $(".opt3 > td.Item").editable('option', 'disabled', false);

    }



    switch (texto) {
        case 'Madera1':
            //ENCONTRAMOS EL TD
            $(".opt3 > td.task").editable('option', 'disabled', true);
            $(".opt3 > td.Item").editable('option', 'disabled', true);
            $(".opt3").data('blocked', true);
            $(".opt2").data('blocked', false);
            $(".opt1").data('blocked', false);
            $(".opt3").append("<td class='btntd'><button id='enable' data-val='opt3' class='btn btn-sm btn-default'>enable td</button></td>");
            break;
        case 'Madera2':
            $(".opt1 > td.task").editable('option', 'disabled', true);
            $(".opt1 > td.Item").editable('option', 'disabled', true);
            $(".opt1").data('blocked', true);
            $(".opt2").data('blocked', false);
            $(".opt3").data('blocked', false);
            $(".opt1").append("<td class='btntd'><button id='enable' data-val='opt1' class='btn btn-sm btn-default'>enable td</button></td>"); //ENCONTRAMOS EL TD
            break;
        case 'Madera3':
            $(".opt2 > td.task").editable('option', 'disabled', true);
            $(".opt2 > td.Item").editable('option', 'disabled', true);
            $(".opt2").data('blocked', true);
            $(".opt1").data('blocked', false);
            $(".opt2").append("<td class='btntd'><button id='enable' data-val='opt2' class='btn btn-sm btn-default'>enable td</button></td>");
            $(".opt3 > td.task").editable('option', 'disabled', true);
            $(".opt3 > td.Item").editable('option', 'disabled', true);
            $(".opt3").data('blocked', true);

            $(".opt3").append("<td class='btntd'><button id='enable' data-val='opt3' class='btn btn-sm btn-default'>enable td</button></td>"); //ENCONTRAMOS EL TD
            break;
    }

});
$("#table > tbody > tr").on('click', "#enable", function(event) {
    var valor = $(this).data("val");

    $("." + valor + " > td.task").editable('option', 'disabled', false);
    $("." + valor + " > td.Item").editable('option', 'disabled', false);

});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script
   src="https://code.jquery.com/jquery-3.3.1.min.js"
   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
   crossorigin="anonymous"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<div class="col-sm-3">
   <small>Clasificacion Producto</small>
   <select class="form-group browser-default custom-select" id="clasificacion">
      <option selected disabled>.::Clasificacion::.</option>
      <option value="opt1">Madera1</option>
      <option value="opt2">Madera2</option>
      <option value="opt3">Madera3</option>
   </select>
</div>
<table id="table" class="table table-bordered">
   <thead>
      <tr>
         <th>Id</th>
         <th>Task</th>
         <th>Item</th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr class="opt1">
         <td>1</td>
         <td data-name="task" class="task" data-type="text">001</td>
         <td data-name="Item" class="Item" data-type="select">Item2</td>
      </tr>
      <tr class="opt2">
         <td>2</td>
         <td data-name="task" class="task" data-type="text">002</td>
         <td data-name="Item" class="Item" data-type="select">Item1</td>
      </tr>
      <tr class="opt3">
         <td>3</td>
         <td data-name="task" class="task" data-type="text">003</td>
         <td data-name="Item" class="Item" data-type="select">Item3</td>
      </tr>
   </tbody>
</table>

Básicamente lo que hace, es que dependiendo del valor que selecciones en tu select va tomando las acciones en la tabla, habilita y des habilita los campos, ademas de la funcionalidad del botón para habilitar la fila completa.

Puedes simplificarlo y mejorarlo como mejor te convenga, esto solo es un ejemplo de como lo puedes hacer basándote en el switch.

Espero y te sirva, Saludos.

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.