valueClass: "priceClass", // Node data attribute for dynamic class
valueClassPrefix: "price-" // Prefix for valueClass
},
{
width: 150,
value: "status",
header: "Status",
valueClass: "statusClass", // e.g., node.data.statusClass = "active"
valueClassPrefix: "status-" // Results in class="status-active"
}
]
}
});
// Example node data with dynamic classes
var dataWithClasses = [{
id: "item1",
text: "Item 1",
data: {
price: 10.99,
status: "Active",
priceClass: "high", // Will add class "price-high"
statusClass: "active" // Will add class "status-active"
}
}];
```
--------------------------------
### Handle jstree Table Cell Selection Event (JavaScript)
Source: https://context7.com/cuiyonghua/jstree-table/llms.txt
This code demonstrates how to listen for the `select_cell.jstree-table` event. This event is triggered when a user clicks on a table cell, providing access to the cell's value, column information, and the associated tree node. It also includes an example of handling the `loaded_table.jstree` event.
```javascript
$('#jstree').jstree({
plugins: ["table"],
core: { data: data },
table: {
columns: [
{width: 200, header: "Name"},
{width: 150, value: "price", header: "Price"}
]
}
});
// Handle cell click events
$('#jstree').on('select_cell.jstree-table', function(event, data) {
console.log('Cell clicked!');
console.log('Value:', data.value); // Cell value
console.log('Column:', data.column); // Column header name
console.log('Node:', data.node); // Reference to tree node element
console.log('Source:', data.sourceName); // Data property name (e.g., "price")
});
// Handle table loaded event
$('#jstree').on('loaded_table.jstree', function() {
console.log('Tree table finished loading');
});
```
--------------------------------
### Handle jstree Table Cell Update Event (JavaScript)
Source: https://context7.com/cuiyonghua/jstree-table/llms.txt
This example shows how to handle the `update_cell.jstree-table` event, which fires when a cell is edited via the context menu. It provides the node, column, new value, and old value, enabling actions like data validation or server-side persistence. The code also enables cell editing by setting `contextmenu: true`.
```javascript
$('#jstree').jstree({
plugins: ["table"],
core: { data: data, check_callback: true },
table: {
columns: [
{width: 200, header: "Name"},
{width: 150, value: "price", header: "Price"}
],
contextmenu: true // Enable cell editing via right-click
}
});
// Handle cell edit completion
$('#jstree').on('update_cell.jstree-table', function(event, data) {
console.log('Cell updated!');
console.log('Node:', data.node); // The edited node object
console.log('Column:', data.col); // Column name (e.g., "price")
console.log('New Value:', data.value); // New cell value
console.log('Old Value:', data.old); // Previous cell value
// Example: Save to server
$.ajax({
url: '/api/update',
method: 'POST',
data: {
nodeId: data.node.id,
field: data.col,
value: data.value
}
});
});
```
--------------------------------
### Initialize jstree-table with Data and Configuration
Source: https://github.com/cuiyonghua/jstree-table/blob/master/demo/resize-event-test.html
Initializes the jstree-table plugin with sample data and configuration options. It defines columns, their widths, headers, and data mapping. It also enables features like resizing and context menus.
```javascript
$(document).ready(function(){
var data, trees, i, expected;
data = [{
text: "Root 1",
data: {price: "$5.00", size: "4",spanclass:"root"},
children: [
{
text: "Really long named child whose name gets cut off",
data: {price: "
$4.00", size: "3",spanclass:"first"}
},
{
text: "Child 2",
data: {price: "
$3.00", size: "2",spanclass:"second"},
children:[
{
text:"Grandchild",
data:{price: "EXPENSIVE!",size:"10",spanclass:"third"}
}
]
}
]
}];
$("#jstree").on("resize_column.jstree-table",function (e,column,width) {
$("#colnum").text(column);
$("#size").text(width);
$("showevent").show();
});
$("#jstree").jstree({
htmlheader: 'Fixed Width, All Columns Defined, Columns < Width',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
width: 400,
columns: [
{width: 150, header: "Nodes",title:"_DATA_"},
{width: 100, cellClass: "col1", value: "price", header: "
Price", title:"price", valueClass:"spanclass"},
{width: 75, cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
});
});
```
--------------------------------
### jstree-table Initialization with Various Width Configurations
Source: https://github.com/cuiyonghua/jstree-table/blob/master/demo/widths-test.html
Initializes jstree-table instances with different width settings for the table and its columns. It demonstrates fixed pixel widths, percentage-based widths, and undefined widths. The code appends new tree sections to the DOM and sets up event listeners for the 'loaded_table.jstree' event to log actual rendered widths.
```javascript
var trees = [ { htmlheader: 'Fixed Width, Columns Fixed', plugins: ["themes","json","table"], core: { data: data }, table: { width: 400, columns: [ {width: 150, header: "Nodes",title:"_DATA_"}, {width: 123, cellClass: "col1", value: "price", header: "
Price", title:"price", valueClass:"spanclass"}, {width: "auto", cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"} ], resizable:true, contextmenu:true } }, { htmlheader: 'Undefined Width, One Column Undefined, Default Fixed', plugins: ["themes","json","table"], core: { data: data }, table: { columnWidth: 100, columns: [ {width: 150, header: "Nodes",title:"_DATA_"}, {width: 123, cellClass: "col1", value: "price", header: "
Price", title:"price", valueClass:"spanclass"}, {cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"} ], resizable:true, contextmenu:true } }, { htmlheader: 'Undefined Width, One Column Undefined, Default Undefined', plugins: ["themes","json","table"], core: { data: data }, table: { columns: [ {width: 150, header: "Nodes",title:"_DATA_"}, {width: 123, cellClass: "col1", value: "price", header: "
Price", title:"price", valueClass:"spanclass"}, {cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"} ], resizable:true, contextmenu:true } }, { htmlheader: 'Fixed Width, Columns Percentages', plugins: ["themes","json","table"], core: { data: data }, table: { width: 400, columns: [ {width: '35%', header: "Nodes",title:"_DATA_"}, {width: '45%', cellClass: "col1", value: "price", header: "
Price", title:"price", valueClass:"spanclass"}, {width: '20%', cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"} ], resizable:true, contextmenu:true } }, { htmlheader: 'Undefined Width, Columns Percentages', plugins: ["themes","json","table"], core: { data: data }, table: { columns: [ {width: '35%', header: "Nodes",title:"_DATA_"}, {width: '45%', cellClass: "col1", value: "price", header: "
Price", title:"price", valueClass:"spanclass"}, {width: '20%', cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"} ], resizable:true, contextmenu:true } } ]; for (i=0; i
'+trees[i].htmlheader+'
Expected '+expected+'