ligerui tree如何获取全路径,包含父节点

  ligerui的tree控件,如何获取全路径,选择子节点后,父节点没有被勾选也一起获取,效果如下

ligerui tree如何获取全路径,包含父节点

 

  ligerui tree如何获取全路径,包含父节点源代码如下。

版本为V1.2.5,其他版本自己对照api和生成的树结构修改对应的方法名称和jquery选择器。示例居于ligerui\V1.2.5\Source\demos\tree\treedata.htm进行修改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
    <script type="text/javascript">
    		var data = [];             
              data.push({ id: 1, pid: 0, text: '1' });
            data.push({ id: 2, pid: 1, text: '1.1' });
            data.push({ id: 4, pid: 2, text: '1.1.2' });
             data.push({ id: 5, pid: 2, text: '1.1.2' });      
            data.push({ id: 10, pid: 8, text: 'wefwfwfe' });
             data.push({ id: 11, pid: 8, text: 'wgegwgwg' });
            data.push({ id: 12, pid: 8, text: 'gwegwg' });
             data.push({ id: 6, pid: 2, text: '1.1.3', ischecked: true });
            data.push({ id: 7, pid: 2, text: '1.1.4' });
            data.push({ id: 8, pid: 7, text: '1.1.5' });
            data.push({ id: 9, pid: 7, text: '1.1.6' });
         
            $(function () {
                var tree = $("#tree1").ligerTree({
                    data: data,
                    idFieldName: 'id',
                    slide: false,
                    parentIDFieldName: 'pid'
                });
                treeManager = $("#tree1").ligerGetTreeManager();
                treeManager.collapseAll();
            });
        function getPathIds() {
            var tree = $("#tree1").ligerTree();
            var nodes = tree.getChecked();//选中的节点
            var parent;
            var ids = ',',pid,text=',';
            for (var i = 0; i < nodes.length; i++) {
                ids += nodes[i].data.id + ',';
                text += nodes[i].data.text + ',';
                parent = tree.getParentTreeItem(nodes[i].target);//获取父节点DOM
                while (parent) {//有父节点
                    console.log(parent)
                    pid = parent.id;//父节点id,对应data数组里面的id配置
                    //ids字符串未包含父节点id,为什么要加这个判断,因为有可能选择同一个节点下的多个子节点,所有要过滤一下,防止出现重复的id
                    if (ids.indexOf(',' + pid + ',') == -1) {
                        ids += pid + ',';
                        text += $(parent).find('>div.l-body span').text() + ',';//有点水的框架,无法获取数据节点,只能通过dom朝找获取数据节点的text配置了
                    }
                    parent = tree.getParentTreeItem(parent);//获取父节点的上一级节点
                }
            }
            alert('ID:' + ids)
            alert('Text:'+text)
        }
    </script>
</head>
<body style="padding:10px">   
    <div style="width:200px; height:300px; margin:10px; float:left; border:1px solid #ccc; overflow:auto;  ">
    <ul id="tree1"></ul>
    </div> 
 <input type="button" value="获取路径ID" onclick="getPathIds()"/>
</body>
</html>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:ligerui tree如何获取全路径,包含父节点

评论(0)Web开发网
阅读(507)喜欢(1)JavaScript/Ajax开发技巧