заменить текст в HTML в jsTree - PullRequest
Новая
       6

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

0 голосов
/ 06 мая 2011

Мне нужно изменить текст на 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 Ответ

1 голос
/ 06 мая 2011

Посмотрите на привязку "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/. Надеюсь, что поможет .

...