Блог

Главная - Вопросы по программированию - заменить текст на html в jsTree

заменить текст на html в jsTree

#jquery #jstree

#jquery #jstree

Вопрос:

Мне нужно изменить текст на html в столбце при использовании jsTree 1.0rc2 с jsTreeGrid. Мне сказали, что: «Возможно, вы захотите использовать параметры класса, чтобы назначить уникальный класс (я знаю, как это сделать), а затем найти класс»

 $("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 / классы для каждого загруженного узла. «

 <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>

Ответ №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 /. Надеюсь, это поможет.

Комментарии:

1. если я помещу код туда, куда вы предлагаете, он не будет работать, потому что (IMO) плагин jsTreeGrid не был запущен, поэтому класс myClass не существует. Для меня это выглядит так. Есть идеи, где разместить функцию и убедиться, что плагин jsTreeGrid завершил свою работу?