识别“Aria-Selected”状态 - Jquery

时间:2014-06-04 13:42:10

标签: javascript jquery asp.net-mvc kendo-ui

我正在使用Kendo-UI的拖放树视图来处理我正在使用的应用程序。

我希望在选定的列表项中附加一些文字。

我在文档中找不到任何内容,并且很难选择合适的项目。

这是Kendo-UI代码:

 <script>
            $("#treeview-left").kendoTreeView({
                dragAndDrop: true,
                dataSource: [
                    { text: "Furniture", expanded: true, items: [
                        { text: "Tables & Chairs" },
                        { text: "Sofas" },
                        { text: "Occasional Furniture" }
                    ] },
                    { text: "Decor", items: [
                        { text: "Bed Linen" },
                        { text: "Curtains & Blinds" },
                        { text: "Carpets" }
                    ] }
                ]
            });

            $("#treeview-right").kendoTreeView({
                dragAndDrop: true,
                dataSource: [
                    { text: "Storage", expanded: true, items: [
                        { text: "Wall Shelving" },
                        { text: "Floor Shelving" },
                        { text: "Kids Storage" }
                    ]
                    },
                    { text: "Lights", items: [
                        { text: "Ceiling" },
                        { text: "Table" },
                        { text: "Floor" }
                    ]
                    }
                ]
            });
        </script>

这是生成代码的片段(请注意“aria-select ='true'”,这是因为我选择了元素,现在我想将文本追加到此元素中):

<li role="treeitem" class="k-item" data-uid="82bceebe-f6a8-4d44-80ec-76f4b3db5041" aria-selected="true" id="treeview-left_tv_active">
<div class="k-top">
   <span class="k-icon k-plus" role="presentation"></span>
   <span class="k-in k-state-selected">Alberta</span>
</div>
<ul class="k-group" style="display:none" role="group">.....</ul>
</li>

这是我的代码,我已经尝试了其他一些东西,但又回到了这个,我知道这是错误的:

 <script>
    $(function () {
        $(".k-treeview li:first").click(function () {
            $(this).append("test");
        });
    });
</script>

感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

aria属性用于访问,而不是真正用于其他目的。

您可以使用select event并访问e.node中的所选元素:

$("#treeview").kendoTreeView({
    dataSource: ds,
    select: function(e) {
        var model = this.dataItem(e.node);
        model.set("text", model.get("text") + "test");
    }
})

你可以玩它here

如果您想在其他时间获取所选节点,请使用select method