码迷,mamicode.com
首页 > 移动开发 > 详细

JQueryEasyUI实现两个树之间的数据移动

时间:2016-07-08 11:48:16      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

如下图:

技术分享

<fieldset>
                        <table border="0" >
                        <td>选择外包机具:
                        <fieldset>
                        <ul id="tt" class="easyui-tree" url="../../json/treegrid.json" checkbox="true" style="width:300px;height:280px" >
                    
                        </ul> 
                        </fieldset>
                        </td>
                        <td>
                            <a href="#" onclick="toRight()" class="easyui-linkbutton" data-options="iconCls:‘icon-redo‘" ></a><br/>
                            <a href="#" onclick="toLeft()" class="easyui-linkbutton" data-options="iconCls:‘icon-back‘"></a>                        
                        </td>
                        <td>
                        <fieldset>
                        <ul id="tt1" class="easyui-tree" url="" checkbox="true" style="width:300px;height:280px" >
                    
                        </ul> 
                        </fieldset>
                        </td>
                    </table>
                    </td>
                    </fieldset>

 

<script type="text/javascript">
    function toRight(){
        moveData(true);
    }
    function toLeft(){
        moveData(false);
    }
    function moveData(FLAG) {//将source中的数据移动到target中
        var source = $(FLAG ? #tt : #tt1), target = $(FLAG ? #tt1 : #tt);
        var checked = source.tree(getChecked);//获取选中的数据
        if (checked.length == 0) { 
            $.messager.alert(消息框,请选择机具!,warning);
            return false; 
        }
        for (var i = checked.length - 1; i >= 0; i--) {
            if (source.tree(isLeaf, checked[i].target)) {
                //移动叶子节点到target树中,其父节点无需移动,通过getParent方法自动建立
                moveNode(source, target, checked[i]);
            }
        }
        //移除节点
        for (var i = checked.length - 1; i >= 0; i--) {
            source.tree(remove, checked[i].target);
        }
    }
    function moveNode(source, target, node) { //建立节点的路径
        var pNode, pNodeData = [], pid;
        pNode = source.tree(getParent, node.target); //收集父节点
        pid = pNode.id;
        do {
            if (pNodeData.length > 0) 
                pNodeData[pNodeData.length - 1].pid = pNode.id; //更新上一个父节点的父节点id
            pNodeData.push({ text: pNode.text, id: pNode.id });
        }
        while (pNode = source.tree(getParent, pNode.target));
        //从根节点建立路径
        for (var i = pNodeData.length - 1; i >= 0; i--) {
            if (!target.tree(find, pNodeData[i].id)) {
                target.tree(append, { 
                    parent: pNodeData[i].pid ? target.tree(find, pNodeData[i].pid).target : null, 
                    data: { 
                        text: pNodeData[i].text, 
                        id: pNodeData[i].id
                    } 
                });
            }
        }
        target.tree(append, { 
            parent: target.tree(find, pid).target, 
            data: { 
                text: node.text, 
                id: node.id
            } 
        });
    }
</script>

 

JQueryEasyUI实现两个树之间的数据移动

标签:

原文地址:http://www.cnblogs.com/shuo1208/p/5652802.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!