Question

我正在使用bootstrap-treeview 1.2.0（from Jon Miles）。

我的目标是将自定义数据属性添加到我的列表项中。标记，例如

<li class="list-group-item node-tree" data-id="100" data-type="user" ...>

我尝试按照这些说明see here进行操作，这是我的JSON的一部分：

[{"text":"Root","icon":null,"data-id":1,"data-type":"branch","nodes":[{"text":"Steve","icon":null,"data-id":17, "data-type":"user","nodes":...

对我来说，JSON看起来不错。但是我的数据属性都没有在标记中呈现。

有什么想法吗？

Answer 1

对不起，我觉得为时已晚。我搜索了此内容，却找不到任何东西。但是你可以稍微更改bootstrap-treeview.js文件。 buildTree函数中有一些属性集代码。看起来像这样：

    Tree.prototype.buildTree = function (nodes, level) {

        if (!nodes) return;
        level += 1;

        var _this = this;
        $.each(nodes, function addNodes(id, node) {

            var treeItem = $(_this.template.item)
                .addClass('node-' + _this.elementId)
                .addClass(node.state.checked ? 'node-checked' : '')
                .addClass(node.state.disabled ? 'node-disabled': '')
                .addClass(node.state.selected ? 'node-selected' : '')
                .addClass(node.searchResult ? 'search-result' : '') 
                .attr('data-nodeid', node.nodeId)
                .attr('style', _this.buildStyleOverride(node));
......................SOME CODES ........SOME CODES..........................}

您可以添加：

.attr('data-type', node.dataType)
.attr('data-id', node.dataId)

然后像这样更改对象（json）：

[{"text":"Root","icon":null,"dataId":1,"dataType":"branch","nodes":
[{"text":"Steve","icon":null,"dataId":17, "dataType":"user","nodes":...

Answer 2

提供的链接只是指示如何使用其他属性扩展节点对象。节点的属性与HTML中分配的属性之间没有相关性。

您可能想要这样做：

var allNodes = $('#tree').treeview('getNodes);
$(allNodes).each(function(index, element) {
    $(this.$el[0]).attr('data-attribute-name', this.data-attribute-name);
});

如何将数据属性添加到Bootstrap Treeview？

2 个答案: