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>