Skip to main content

¿Como deshabilito ¿Cómo deshabilitar el evento de seleccionarselección de un nodo dentro de un jstreejsTree?

Origen Enlace
bypabloc_
  • 1.9k
  • 15
  • 46
  • 102

¿Como deshabilito el evento de seleccionar un nodo dentro de un jstree?

En el ejemplo muestra como se carga el jstree correctamente, este plugin tiene una extensión de tabla, en ella cargo unos elementos (input y select); el problema es que al intentar entrar a cualquiera de los elementos para indicar el valor, el elemento pierde el foco.

var data;
data = [{
  text: "Products",
  data: {},
  children: [{
    text: "Fruit",
    data: {}, 
    children:[
      {text: "Apple", data: {price: 0.1, quantity: 20}},
      {text: "Banana", data: {price: 0.2, quantity: 31}},
      {text: "Grapes", data: {price: 1.99, quantity: 34}},
      {text: "Mango", data: {price: 0.5, quantity: 8}},
      {text: "Melon", data: {price: 0.8, quantity: 4}},
      {text: "Pear", data: {price: 0.1, quantity: 30}},
      {text: "Strawberry", data: {price: 0.15, quantity: 32}}
    ],
    'state': {'opened': true}
  }, {
    text: "Vegetables",
    data: {}, 
    children:[
      {text: "Aubergine", data: {price: 0.5, quantity: 8}},
      {text: "Broccoli", data: {price: 0.4, quantity: 22}},
      {text: "Carrot", data: {price: 0.1, quantity: 32}},
      {text: "Cauliflower", data: {price: 0.45, quantity: 18}},
      {text: "Potato", data: {price: 0.2, quantity: 38}}
    ]
  }],
  'state': {'opened': true}
}];

// load jstree
$("div#jstree").jstree({
  plugins: ["table","sort"],
  core: {
    data: data
  },
  // configure tree table
  table: {
    columns: [
      {header: "Nombres"},
      {width: 250, header: "Tiempos",
        format: function(v) {
          let div_partes = $('<div/>',{
            'class' : 'col-sm-12 col-xs-12',
          });
          div_field = $('<div/>',{
            'class' : 'col-sm-6 col-xs-6',
          });
          let field_cant = $('<input/>',{
            'type' : 'number',
            'id' : v,
            'name' : 'planes',
            'tipo' : 'cant',
            'step' : '1',
            'pattern' : '[0-9]+([\,][0-9]+)?',
            'min' : '0',
            'style' : 'width: 50px;',
          });
          field_cant.appendTo(div_field);
          let field_tipo = $('<select/>',{
            'id' : v,
            'name' : 'planes',
            'style' : 'width: 50px;',
          });
          let options;
          options = $('<option/>',{
            'value' : null,
            'text' : 'Elija...',
          });
          options.appendTo(field_tipo);
          options = $('<option/>',{
            'value' : 0,
            'text' : 'Hora(s)',
          });
          options.appendTo(field_tipo);
          options = $('<option/>',{
            'value' : 1,
            'text' : 'Día(s)',
          });
          options.appendTo(field_tipo);
          options = $('<option/>',{
            'value' : 2,
            'text' : 'Mes(es)',
          });
          options.appendTo(field_tipo);
          options = $('<option/>',{
            'value' : 3,
            'text' : 'Año(s)',
          });
          options.appendTo(field_tipo);
          field_tipo.appendTo(div_field);
          div_field.appendTo(div_partes);
          
          return div_partes;
        }
      },
    ],
    resizable: true,
    height: 300
  }
}).on('loaded.jstree', function() {
  $('#jstree >ul > li').each( function() {
    disable( this.id );        
  })
  function disable(node_id) {
    let node = $("#jstree").jstree().get_node( node_id );
    $("#jstree").jstree().disable_node(node); 
    node.children.forEach( function(child_id) {            
      disable( child_id );
    })
  } 
});
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
  margin: 1em;
}
.jstree-table-wrapper:hover {
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<link href="https://static.jstree.com/3.3.0/assets/dist/themes/default/style.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/adamjimenez/jstree-table/master/jstreetable.js"></script>

<div id="jstree"></div>