Jstree 1.0.2rc Config

$(function () {
	$("#search").click(function () {
        $("#taxon_tree").jstree("search",$("#search_str").val());
    });

	$("#taxon_tree")
	.jstree({ 
		"plugins" : [ "themes", "html_data", "search", "crrm", "contextmenu", "types"],
		"contextmenu" :	{
			items:{
				edit : false,
				"New" : {
					// The item label
					"label"	: "New material",
					// The function to execute upon a click
					"action" : function (obj) {
						$.ajax({
						   	type: 'GET',
						   	url: "/materials/" + obj.attr("id") +"/new_material",
						   	success : function (r) {
						   		if(!r.status) {
									$('#new_material').html(r);
						   		}
						   	},
						 	error : function (r) {
								alert("can't be blank");
							}
						});
					},
					// All below are optional 
					"_disabled"	: false,		// clicking the item won't do a thing
					"_class"	: "class",	// class is applied to the item LI node
					"separator_before"	: false,	// Insert a separator before the item
					"separator_after"	: true,		// Insert a separator after the item
					// false or string - if does not contain `/` - used as classname
					"icon"		: false,
				}
			}
		},
		"types" : {
			// I set both options to -2, as I do not need depth and children count checking
			// Those two checks may slow jstree a lot, so use only when needed
			"max_depth" : -2,
			"max_children" : -2,
			// I want only `drive` nodes to be root nodes 
			// This will prevent moving or creating any other type as a root node
			"valid_children" : [ "drive" ],
			"types" : {
				// The default type
				"file" : {
					// I want this type to have no children (so only leaf nodes)
					// In my case - those are files
					"valid_children" : "none",
					// If we specify an icon for the default type it WILL OVERRIDE the theme icons
					"icon" : {
						"image" : "/images/rails.png"
					}
				},
				// The `folder` type
				"folder" : {
					// can have files and other folders inside of it, but NOT `drive` nodes
					"valid_children" : [ "default", "folder" ],
					"icon" : {
						"image" : "/images/grid.png"
					}
				},
				// The `drive` nodes 
				"drive" : {
					// can have files and folders inside, but NOT other `drive` nodes
					"valid_children" : [ "default", "folder" ],
					"icon" : {
						"image" : "/static/v.1.0rc2/_demo/root.png"
					},
					// those options prevent the functions with the same name to be used on the `drive` type nodes
					// internally the `before` event is used
					"start_drag" : false,
					"move_node" : false,
					"delete_node" : false,
					"remove" : false
				}
			}
		},
	})
	.bind("create.jstree", function (e, data) {
	   $.ajax({
		   	type: 'POST',
		   	url: "/taxons",
		   	data : { 
		   		"taxon[name]" : data.rslt.name ,
		   		"taxon[taxonomy_id]" : data.rslt.parent.attr("name") ,
				"parent" : data.rslt.parent.attr("id")
		   	}, 
		   	success : function (r) {
		   		if(!r.status) {
		   			data.inst.refresh();
		   		}
		   	},
		 	error : function (r) {
				alert("can't be blank");
			}
		});
	})
	.bind("rename.jstree", function (e, data) {
	   $.ajax({
		   	type: 'PUT',
		   	url: "/taxons/" + data.rslt.obj.attr("id"),
		   	data : { 
		   		"taxon[name]" : data.rslt.new_name
		   	}, 
		   	success : function (r) {
		   		if(!r.status) {
		   			data.inst.refresh();
		   		}
		   	},
		 	error : function (r) {
				alert("can't be blank");
			}
	 	});
	})
	.bind("remove.jstree", function (e, data) {
		$.ajax({
			type: 'DELETE',
			url: "/taxons/" + data.rslt.obj.attr("id"),
			success : function (r) {
				if(!r.status) {
					data.inst.refresh();
				}
			},
			error : function (r) {
				alert("Something wrong");
			}
		});
	});
});

评论

1 楼 ccue 2011-02-21  

我用jstree +struts2.18 ajax 不能访问后台action 用juery$.post一样的url都可以访问数据

 <script type="text/javascript">
            
            $(document).ready(function(){
                $.post("../admin/ajax/matterCategoryTree.action", {pid:1}, function(data, textStatus){
                       
                    }, "json");
                $("#LeftSideBody").jstree({
                    "plugins": ["themes", "json_data", "ui"],
                    "json_data": {
                        "ajax": {
                            "url": "../admin/ajax/matterCategoryTree.action",
                            "data": function(n){                  
                                return {
                                    pid: n.attr ? n.attr("id").replace("node_", "") : false
                                };
                            }
                        }
                    }
                });
            });
        </script>