NodeId Demo - Radix Tree

💾 Database Integration with NodeId

The nodeId property allows you to assign database-friendly identifiers to nodes while keeping the display label separate. This makes it easy to collect node data and integrate with databases.

🎯 Database-Friendly IDs

Use nodeId to assign meaningful identifiers that work well with your database schema. Perfect for user IDs, category IDs, or any primary key.

📊 Easy Data Collection

Collect checked nodes with their database IDs for easy processing. No need to parse labels or maintain separate ID mappings.

🔄 Backward Compatible

The id property still works for legacy code. nodeId takes priority when both are present.

⚡ Performance

Direct ID access without string parsing or lookups. Faster data collection and processing.

📝 Code Example

const data = [
  {
    label: 'Users',
    nodeId: 'users_folder',
    open: true,
    children: [
      { label: 'John Doe', nodeId: 'user_123', checked: true },
      { label: 'Jane Smith', nodeId: 'user_456', checked: false },
      { label: 'Bob Wilson', nodeId: 'user_789', checked: true }
    ]
  },
  {
    label: 'Categories',
    nodeId: 'categories_folder',
    open: true,
    children: [
      { label: 'Technology', nodeId: 'cat_tech', checked: false },
      { label: 'Design', nodeId: 'cat_design', checked: true }
    ]
  }
];

$('#tree').radixTree({
  data: data,
  onCheck: function(node, checkbox, siblings) {
    console.log('Node checked:', {
      label: node.label,
      nodeId: node.nodeId,
      checked: checkbox.checked
    });
  }
});

// Get checked nodes with their IDs
const checked = $('#tree').radixTree('getChecked');
console.log('Checked nodes:', checked.map(n => ({
  label: n.label,
  nodeId: n.nodeId,
  id: n.id
})));
            

ℹ️ How It Works

NodeId Priority:

1st Priority: nodeId - Database-friendly identifier
2nd Priority: id - Legacy identifier (backward compatibility)
3rd Priority: Auto-generated internal ID

Use Cases: