replace text with html in jsTree
I need to change text to html in a column when using jsTree 1.0rc2 wiht jsTreeGrid. I was told that: "You might want to use the class options to assign a unique class (I know how to do that), and then find the class"
$("span.myClass")
and then change the content
$("span.myClass").each(function(i,elm) {
elm = $(elm);
var text = elm.text();
elm.html('<a href="abc">'+text+'</a>');
});
could somebody help me to do the rest? I guess I need to place this code
$("span.myClass").each(function(i,elm) { ...... somewhere but I do not know where exactly in my code.
The author of the jsTree wrote in jsTree discussion group in regards to a similar question that "You can also build a plugin for that - checkout the themeroller plugin source. It does something similar - modify html/classes for each loaded node. "
<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", att开发者_开发百科r: {}},
{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>
Look at binding "loaded.jstree" and running your logic there, like so:
> jQuery("some-container")
> .bind("loaded.jstree", function (event, data) {
> alert("TREE IS LOADED");
> })
> .jstree({ /* configuration here */ });
For more info, look here: http://www.jstree.com/documentation/core. And a shameless plug - if you are new to jsTree and you need a quick overview, I wrote a tutorial recently, here http://tkgospodinov.com/jstree-part-1-introduction/. Hope that helps.
加载中,请稍侯......
精彩评论