Skip to main content

Lo que puedes hacer es evitar que se propague el evento click desde los controles input y select llamando al método stopPropagation:

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 );
    })
  } 
  $('[name="planes"]').click(function(e) { e.stopPropagation(); });
}).on('open_node.jstree', function (e, data) {
  $('[name="planes"]').click(function(e) { e.stopPropagation(); });
});
@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>

Asier Villanueva
  • 14.6k
  • 2
  • 16
  • 32