宋砚
我的博客
关于组件——panTree
2014-07-19 10:15:52   阅读1009次

一、使用panTree组件需要引入的文件:

    1. js:/ WebRoot /js/pansoftPlugins/panTree/panTree.js

    2. css:/ WebRoot /js/pansoftPlugins/panTree/panTree.css

、初始化panTree需要的dom元素:

<div id="panTree" class="panTree"></div>

三、初始化panTree:

$("#panTree").panTree({
    idfield:"id",            //id的列
    textfield:"name",        //显示的文本列
    parentidfield:"parentId",//标志父节点的id字段
    rootid:"root",           //树的根节点的id值
    checkable: false,        //是否支持多选
    isLinkSelect: false      //是否联动选择,如果为false那么选中父节点时不会选中其子节点,同理,选中了所有子节点时不会选中他们的父节点
    onNodeClick:function(data){
        //在点击树节点时进行操作,如记录该节点的id、判断当前节点是否可以点击等。
        //如果return false;则该节点不被选中。
        if(data.id=="#ROOT"){
            return false;
        }
    },
    onIsLeafNode:function(data){
        //在添加节点时会进入这个回调方法。
        //判断当前节点是不是叶子节点。
        //有些节点不能为叶子结点,如需要进行异步请求下级节点的。需要return false;
        if(data.level<2){
            return false;
        }
    },
    onCreateNodeIcon:function(data){
	//在添加节点时会进入这个回调方法。
	//为不同的结点添加不同的图标
	return "className"    //返回的字符串要与css文件中的样式的类选择器名相同。在样式中加上需要显示的图标。
    },
    onCreateNodeText:function(data){
        //在添加结点时会进入这个回调方法。
        //自定义显示树节点的名称
        return data.name+":"+data.parentId;
    },
    onAjaxData:function(data,cb){
        //在点击树节点前边的"+"时进入这个回调方法。
        //此处可以为异步请求,向后台请求子节点数据
        var data1 = new Array();
        data1.push({id:"011",name:"011",parentId:"001",level:"2"});
        data1.push({id:"012",name:"012",parentId:"001",level:"2"});  
        setTimeout(function(){
                cb(data1);    //cb()方法是用来将异步请求来的数据回填到树中
        },1000);
    }
});

四、panTree的方法

    1、setData(data,rootid);

    setData方法用来将object数组添加到树的某一个指定节点上,如果没有rootid,则添加到根节点上。

var treeData = [];
treeData.push({id:"#ROOT",name:"虚拟根节点",parentId:"root",level:"0"});    //虚拟一个根节点添加到树中。
treeData.push({id:"001",name:"001",parentId:"#ROOT",level:"1"});            //根节点下的第一级子节点
$("#panTree").panTree("setData",treeData);

    2、getSelectNodeData();

    getSelectNodeData方法在checkable为true的情况下,获取当前选中的所有数据。

var selectNodes = $("#panTree").panTree("getSelectNodeData");
console.info(selectNodes);

    3、selectNodeId(id);

    selectNodeId方法用来选中指定id的节点

$("#panTree").panTree("selectNodeId","001");    //注:通过selectNodeId方法选中节点也会触发onNodeClick回调。

    4、setNodeIndex(id,index);

    setNodeIndex方法用来选中id节点下的第index个节点

$("#panTree").panTree("setNodeIndex","#ROOT",0);    //这样会选中001节点,并且同样会触发onNodeClick回调。

    5、showChildren(id);和hideChildren(id);

    showChildren和hideChildren方法用来控制id结点下子节点的显示/隐藏

$("#panTree").panTree("showChildren","#ROOT");    //显示#ROOT节点下的子节点
$("#panTree").panTree("hideChildren","#ROOT");    //隐藏#ROOT节点下的子节点

    6、getAllData();

    getAllData方法用来获取所有树节点数据。

var allData = $("#panTree").panTree("getAllData");
console.info(allData);
//个人很少用到这个方法。通常都是将所有树节点都存放在一个全局变量中,各种操作都是针对全局变量进行的。

    7、edit_addNode(data);

    edit_addNode方法用来添加一个结点。

var addData = {id:"002",name:"002",parentId:"#ROOT",level:"1"};
$("#panTree").panTree("edit_addNode",addData);

    8、edit_delNode(id);

    edit_delNode方法用来删除一个节点及其所有子节点。返回值:parentIsLeaf-父节点是否是叶子节点,parentData-父节点的数据,delArray-删除节点和所有他的子节点的数据 

var delData = $("#panTree").panTree("edit_delNode","001");
console.info(delData);

    9、edit_reNameNode(id,newName);

    edit_reNameNode方法用来重命名id节点。

$("#panTree").panTree("edit_reNameNode","001","reName");    //这个方法没用过,不知道对不对。



五、吐槽:弄这些东西真麻烦。



-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
1楼:太空守望者 发表于 2014-07-24 16:00:22
难得的整理成这样。
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航