一个好用的jquery树形插件zTree

官方演示：http://www.ztree.me/v3/demo.php#_101

这个插件很好用，它的简单JSON数据模式可以非常方便的实现多层树形菜单，只要指定自己的节点id和父节点id，他会根据自己的节点id自动排序，而且拼接简单，大大减轻了webservice输出json数据的工作量

这是简单json数据的示例：file属性就是该项的链接了

var nodes = [
	{id:1, pId:0, name: "父节点1",file:"链接"},
	{id:11, pId:1, name: "子节点1"},
	{id:12, pId:1, name: "子节点2"}
];

zTree的功能也很齐全，该有的都有了。

示例代码：

    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript">
        var iframe;
        $(document).ready(function () {
            $.ajax({
                url: "WebService.asmx/GetItems",                        //这是从webservice中读取构造好的json数据
                type: "POST",
                data: {
            },
            dataType: "text",
            success: function (result) {
                var zNodes = stringToJson(result);
                $.fn.zTree.init($("#tree"), setting, zNodes);
                iframe = $("#contentIframe");
                //  var zTree = $.fn.zTree.getZTreeObj("tree");                  这里是设置默认选中的项（红色点亮），给定id
                //   zTree.selectNode(zTree.getNodeByParam("id", 2));
            },
            error: function (e) { console.log(e); }
        });
    });

    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            beforeClick: function (treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    if (treeNode.level == 1 || treeNode.level == 2) {                //这是设定1,2层在右侧iframe里显示对应的链接
                        iframe.attr("src", treeNode.file);
                    }
                    return false;
                } else {
                    iframe.attr("src", treeNode.file);
                    return true;
                }
            }
        }
    };

    function stringToJson(stringValue) {
        eval("var theJsonValue = " + stringValue);
        return theJsonValue;
    } 
    </script>