LigerUI - ligerTree使用细节

【1】Tree简单示例如下：

$("#tree1").ligerTree({  

                checkbox: false,//是否复选框,默认值为true
                nodeWidth: 120,//节点宽度,默认值90
                onSelect: f_onSelect,//选中时触发自定义函数
                idFieldName:'id',//ID字段名,默认值null
                parentIDFieldName:'pid',//父节点字段,默认值pid
                data: [ 
                        {"id":"00","text":"省份","pid":"","address_code":"henan"},
                        {"id":"0","text":"城市","pid":"00","address_code":"zhengzhou"},
                        {"id":"1","text":"二七区","pid":"0","address_code":"erqi"},
                        {"id":"2","text":"中原区","pid":"0","address_code":"zhongyuan""}
                      ],
                parentIcon:'folder',//父节点图标，默认值为folder
                childIcon:'leaf',//子节点图标，默认值leaf
                textFieldName:'text'//文本字段名，默认值text
            });

//选中单个结点
function f_onSelect(node){
    var address_code = node.data.address_code;
    //取选中结点的地址编码，其他data属性值获取类似。
}

-- 如果使用了复选框，选中多个结点：--

var treeManager = $("#roleTree").ligerGetTreeManager();
var treeData = treeManager.getChecked();
var id0 = treeData[0].data.id;

data第一行，​​pid:""​​ 表明该结点作为顶级结点。

【2】异步动态加载节点

（应用树树形结构数据量大时，可以采用异步动态加载，提高检索效率）

var manager = null;
        $(function ()
        {
            $("#tree1").ligerTree(
            {   
                url: 'json.txt',  
                onBeforeExpand: onBeforeExpand 
            });
            manager = $("#tree1").ligerGetTreeManager();
        }); 

        function onBeforeExpand(note)
        {
            if (note.data.children && note.data.children.length == 0)
            {
                //这里模拟一个加载节点的方法，append方法也用loadData(target,url)代替
                manager.append(note.target, [
                { text: note.data.text + "'s child1" },
                { text: note.data.text + "'s child2" },
                { text: note.data.text + "'s child3" }
               ]);
            }
        }

【3】配置data参数加载树

不使用异步加载，直接在本地配置data对象数据。

$("#tree1").ligerTree({ data: [
                { text: '节点1', children: [
                    { text: '节点1.1' },
                    { text: '节点1.2' },
                    { text: '节点1.3', children: [
                         { text: '节点1.3.1' },
                         { text: '节点1.3.2' }
                    ]
                    },
                    { text: '节点1.4' }
                 ]
                },
                { text: '节点2' },
                { text: '节点3' },
                { text: '节点4' }
            ]
            });

【4】不使用复选框和图标

【5】动态增加结点

var manager = null;

        $(function ()
        {
            //根据class获取元素对象
            $(".l-tree").ligerTree({ checkbox: true });

            //获取tree对象
            manager = $(".l-tree").ligerGetTreeManager();
        });

        function addTreeItem()
        {
             //根据tree对象获取选中的结点
            var node = manager.getSelected();

            var data= [];
            data.push({ text: ‘测试节点’});
            if (node)
                manager.append(node.target, data); 
            else
                manager.append(null, data);
        }

【6】删除结点

function removeTreeItem()
        {
            var node = manager.getSelected();
            if (node)
                manager.remove(node.target);
            else
                alert('请先选择节点');
        }

【7】结点的事件支持

$(function ()
        {
            $("#tree1").ligerTree(
            {   
                url: 'json.txt',  
                onBeforeExpand: onBeforeExpand,
                onExpand: onExpand,
                onBeforeCollapse: onBeforeCollapse,
                onCollapse: onCollapse, 
                onBeforeSelect: onBeforeSelect,
                onSelect: onSelect,//常用事件
                onCheck: onCheck
            }); 
        });
        function onBeforeSelect(note)
        {
            alert('onBeforeSelect:' + note.data.text);
            return true;
        }
        function onSelect(note)
        {
            alert('onSelect:' + note.data.text);
        }
        function onBeforeExpand(note)
        {
            alert('onBeforeExpand:' + note.data.text);
        }
        function onExpand(note)
        {
            alert('onExpand:' + note.data.text);
        }
        function onBeforeCollapse(note)
        {
            alert('onBeforeCollapse:' + note.data.text);
        }
        function onCollapse(note)
        {
            alert('onCollapse:' + note.data.text);
        }
        function onCheck(note, checked)
        {
            alert('onCheck:' + note.data.text + " checked:" + checked);
        }

【8】node,node.data和node.target

参考上面几个实例与方法，可以看到node,node.data and node.target这几个参数，使用相当频繁。

node由node.data and node.target组成，这是肯定的。后面二者作为node的属性。

从对象角度看：

node:[object Object];
node.data:[object Object];
node.target:[object HTMLLIElement];

//这里就是差别，node.target其实是html元素中的 li  ！！！

即树的结点列表中：Nodes 每一个Node包括的参数有：data(数据源),target(DOM 对象 标签为li)！

使用console打印：

console.log(node);
console.log(node.data);
console.log(node.target);

可以看到node对象有两个属性：data和target。其中target显示表明了为id 是 P10001,class为l-first的li元素。

• 首先展开node.data：

就是放进结点里面的数据，另外还有treedataindex(索引)和_status(状态)

• 其次展开node.target：

很明显，一段html！！其中 li 元素上面有设置的id和class等属性。

• 最后展开node：

可以点击参考ligerTree使用介绍

【9】后台传treeJSON到页面

仍然是动态加载树，不过此处在进入页面前将树需要的json传到页面。

$("#roleTree").ligerTree({  
                nodeWidth: 120,
                checkbox: false,
                onSelect: f_onSelect,
                idFieldName:'id',
                parentIDFieldName:'pid',
                textFieldName:'text',
                iconFieldName:'icon',
                data: ${treeJSON}
            });

treeJSON格式如下图所示：

【10】复选框加载初始化

如下图所示，树加载时显示是否被选中：

这里需要注意属性：​​ischecked:true​​;如果为true则选中状态。

JSON如下图所示：

也可以为属性赋予函数：​​ischecked:f_isChecked,​​

function f_isChecked(node){
            if (node.data.ischecked == 'true') {
                return true;
            }else{
                return '';
            }
        }

• 未完待续