Estoy trabajando en Jstree y quiero mostrar un atributo de nodo en el lado derecho completo de la pantalla. Css que se muestra actualmente así Quiero mostrar el atributo así
Puede obtenerlo usando el complemento "wholerow" y un poco de html/css en los nodos jstree. A continuación se muestra un ejemplo de trabajo sin sus iconos.
var rawData = [ {id: "1", parent: "#", label: "Main Item", amount: 10}, {id: "1.1", parent: "1", label: "Child Item", amount: 4}, {id: "1.1.1", parent: "1.1", label: "Sub Child Item", amount: 4}, {id: "1.2", parent: "1", label: "Child Item 1", amount: 2}, {id: "1.2.1", parent: "1.2", label: "CHeckkkk", amount: 2}, {id: "1.3", parent: "1", label: "Child Item 2", amount: 2}, {id: "1.4", parent: "1", label: "Child Item 3", amount: 2}, {id: "1.5", parent: "1", label: "New Node 176", amount: 0}, {id: "2", parent: "#", label: "New Node", amount: 0}, {id: "3", parent: "#", label: "New Node 173", amount: 0}, {id: "4", parent: "#", label: "New Node 175", amount: 0} ]; rawData.forEach((e, i) => e.text = `${e.label}<span class='amount'>${e.amount}</span>`); $('#jstree').jstree({ core: { data: rawData }, plugins: ['wholerow'] }) .on('loaded.jstree', function() { $('#jstree').jstree('open_all'); }); #jstree-container { width: 300px; } li.jstree-node a { width: 100%; } span.amount { float: right; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script> <div id="jstree-container"> <div id="jstree"></div> </div>