Question

使用jsTree 1.0rc2与jsTreeGrid时，我需要在列中将文本更改为html。我被告知：“你可能想使用类选项来分配一个独特的类（我知道该怎么做），然后找到类”

$("span.myClass")

然后更改内容

$("span.myClass").each(function(i,elm) {
  elm = $(elm);
  var text = elm.text();
  elm.html('<a href="abc">'+text+'</a>');
});

有人可以帮我做其余的事吗？我想我需要将这段代码$("span.myClass").each(function(i,elm) { ......放在某处，但我不知道我的代码到底在哪里。

jsTree的作者在jsTree讨论组中写了一个类似的问题，“你也可以为它构建一个插件 - 检查themeroller插件源。它做了类似的事情 - 修改每个的html / classes加载节点。“

<html>
<head>
<title> dashboard</title>

<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript" src="_lib/jstreegrid.js"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

var data = [{
       data: "basics",
       attr: {SOF: "<a href=\"http://www.w3schools.com\">Visit W3Schools.com!</a>"},  
        children: [
         {data: "login", attr: {run: "run"},
           children: [                   
           {data: "login", attr: {}}
          ]
         } ,
         {data: "Academic Year", attr: {run: "run"},
          children: [                   
           {data: "login", attr: {}},
           {data: "Academic Year",  attr: {filter: "mini", SOF: "<a href=\"http://www.w3schools.com\">Visit W3Schools.com!</a>"}}
          ]

         }
        ]
      }];
$("div#jstree").jstree({
plugins: ["themes","json_data","grid","dnd"],
json_data: {data: data},
grid: {
        columns: [
          {width: 220, header: "Group"},
                        {cellClass: "col2", value: "run", width: 40, header: "run"},
                        {cellClass: "col3", value: "filter", width: 40, header: "filter"},
                        {cellClass: "col4", value: "SOF", width: 450, header: "SOF"}
                ]
            },
dnd: {
drop_finish : function () {
},
drag_finish : function () {
},
drag_check : function (data) {
return {
after : true,
before : true,
inside : true
};
}
}
});
});
//]]>
</script>
</head>
<body>
<div id="jstree"></div>

</body>
</html>

Answer 1

看看绑定“loaded.jstree”并在那里运行你的逻辑，如下所示：

> jQuery("some-container")
>     .bind("loaded.jstree", function (event, data) {
>         alert("TREE IS LOADED");
>     })
>     .jstree({ /* configuration here */ });

有关详细信息，请查看此处：http://www.jstree.com/documentation/core。还有一个无耻的插件 - 如果你是jsTree的新手并且需要快速概述，我最近在这里编写了一个教程http://tkgospodinov.com/jstree-part-1-introduction/。希望有所帮助。

用jsTree中的html替换文本

1 个答案: