扩展jsTree列表显示以包括除单个文本字符串之外的关联数据

Question

好吧到目前为止，我已经使用jsTree获得了相当多的混合体验，但我已经设法让它运行，配置了正确的数据结构。

从后端传递的节点数据的JSON数组，以阐明节点结构

[

    {
        "id": 6,
        "parent_id": "null",
        "text": "ABC",
        "type": "root",
        "li_attr": {
            "data_role_id": "Owner"
        },
        "children": [
            {
                "id": 8,
                "parent_id": 6,
                "text": "KB",
                "type": "root",
                "li_attr": {
                    "data_role_id": "Admin"
                },...

现在jsTree从节点的JSON中获取text字段并将其显示在列表中。现在我从列表行的后端获得了一些更多的关联数据，如下图所示。我想我可以通过li节点上的HTML5数据属性发送元数据（例如，在li_attr: {data_role_id: 'Admin'}中查看。

我正在努力实现这个目标：

我尝试通过将<table><tr><td>category</td></tr></table>作为字符串注入text字段来实现结果，因为后端正在准备数据结构。但它非常hacky，它完全混淆了模型和视图的分离。

使用正确的CSS定位此类数据的好方法是什么？