1

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>

2
  • Por qué tienes todos los nodos deshabilidados? Commented el 4 oct. 2017 a las 10:23
  • @PabloLozano intentaba ver si deshabilitando quitaba ese evento
    – bypabloc_
    Commented el 4 oct. 2017 a las 18:19

1 respuesta 1

1

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>

4
  • veo que funciona bien acá, pero en mi proyecto no funciona, revisare muy bien mi código para ver por que no funciona.
    – bypabloc_
    Commented el 5 oct. 2017 a las 9:16
  • Ten en cuenta que estás asociando un controlador al evento click de los controles (input, select), debes hacerlo una vez que el jstree los haya generado. Si, por ejemplo, colapsas y vuelves a expandir un nodo, el jstree eliminará los controles y los volverá a crear por lo que tendrás que volver a asociar el controlador al evento click de los controles recién creados. Commented el 5 oct. 2017 a las 9:22
  • interesante, no había notado eso, voy a revisar.
    – bypabloc_
    Commented el 5 oct. 2017 a las 9:26
  • Listo, ese era mi problema. En mi sistema no tengo elementos en el primer nivel sino en los subniveles. Gracias hermano, edite la respuesta tuya para que sirviera al expand/collapse de cada nodo. Saludos.
    – bypabloc_
    Commented el 5 oct. 2017 a las 9:36

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.