easyui 两颗权限树之间的操作

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
<script type="text/javascript">
    var treeDatas = [];
    $(function(){
        $.parse($("#titleTr").parent());
        
        $('#distributables, #owns').each(function(){
            var dataOptns = eval("("+$(this).attr("data-options")+")");
            $(this).tree({    
                url:dataOptns["url"],
                animate:true,
                checkbox:true,
                onLoadSuccess:function(node, data){
                    treeDatas[$(this).attr("id")] = data;
                    $(this).tree("collapseAll");
                }
            }); 
        });
        
        $("#titleTr .operate").unbind("click").click(function(){
            var text = $(this).find(".l-btn-text").text(), method = $(this).attr("method");
            $(this).parents("table:eq(0)").find("tr:last").prev().find(
                        "td:eq(" + $(this).parent().index() + ")").find(
                        ".tree").tree(method);
            if(text == "展开"){
                text = "收起";
                method = "collapseAll";
            }else{
                text = "展开";
                method = "expandAll";
            }
            $(this).attr("method", method).find(".l-btn-text").text(text);
        });
        
        $("#titleTr").parents("table:eq(0)").find(".add, .remove").click(function(e){
            var cls = $(this).attr("class");
            var $fromTree = null, $toTree = null;
            if(cls.indexOf(" add ")!=-1){
                $fromTree = $(this).parent().prev();
                $toTree = $(this).parent().next();
            }else{
                $fromTree = $(this).parent().next();
                $toTree = $(this).parent().prev();
            }
            $fromTree = $fromTree.find(".tree");
            $toTree = $toTree.find(".tree");
            var nodes = new Array();
            $.each($fromTree.tree("getChecked"), function(){
                if(!$fromTree.tree("isLeaf", this.target)) return true;
                nodes.push(disposeData($fromTree.tree("getData", this.target)));
            });
            $.each(nodes, function(){
                addNode($fromTree, $toTree, this);        
            });
            $.each($fromTree.tree("getChecked"), function(){
                $fromTree.tree("pop", this.target);
            });
            
            $toTree.tree("expandAll");
        });
        
        $("#functionForm .save").unbind("click").click(function(e){
            $("#owns").tree("");
        });
    });
    //添加节点数据
   function addNode(fromTree, toTree, data, rootIds){
        if(!rootIds){
            rootIds = new Array();
            $.each(fromTree.tree("getRoots"), function(){
                rootIds.push(this.id);
            });
        }
        var targetNode = toTree.tree("find", data.id);
        var node = fromTree.tree("find", data.id);
        if(targetNode == null){
            if($.inArray(node.id, rootIds)!=-1){
                toTree.tree("append", {data:data});
            }else{
                var parent = fromTree.tree("getParent", node.target);
                if(parent!=null){
                    var pData = fromTree.tree("getData", parent.target);
                    pData = disposeData(pData);
                    var children = [];
                    children.push(data);
                    pData["children"] = children;
                    addNode(fromTree, toTree, pData);
                }
            }
        }else{
            if(data["children"]&&data["children"].length > 0)
                toTree.tree("append", {parent:targetNode.target, data:data["children"]});
        }
    }
    
    function disposeData(data){
        return {
                id:data.id,
                text:data.text,
                state:data.state
        };
    }
</script>
<form method="post" url="saveFunction" id="functionForm">
    <table cellspacing="0" border="0" cellpadding="0" style="width:96%; margin: 5px">
        <tr id="titleTr">
            <td width="400px" style="font-weight: bold;">可分配
                <span class="easyui-linkbutton operate" data-options="plain:true" method="expandAll">展开</span>
            </td>
            <td width="30px"></td>
            <td width="400px" style="font-weight: bold;">已分配
                <span class="easyui-linkbutton operate" data-options="plain:true" method="expandAll">展开</span>
            </td>
        </tr>
        <tr><td></td><td></td><td></td></tr>
        <tr>
            <td>
                <div style="border: solid #B3DFDA 1px; height: 300px;margin-left: 20px;overflow: auto;">
                    <ul id="distributables" data-options="{'url':'company/getDistributables'}"></ul>
                </div>
            </td>
            <td align="center">
                <span class="easyui-linkbutton add" data-options="iconCls:'icon-add', plain:true"></span><br/>
                <span class="easyui-linkbutton remove" data-options="iconCls:'icon-remove', plain:true"></span>
            </td>
            <td>
                <div style="border: solid #B3DFDA 1px; height: 300px;margin-left: 20px;overflow: auto;">
                    <ul id="owns" data-options="{'url':'company/getOwns'}"></ul>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3" align="left" style="padding-left: 50px;">
                <span class="easyui-linkbutton save" data-options="iconCls:'icon-save', plain:true">保存</span>
                <span class="easyui-linkbutton back" data-options="iconCls:'icon-back', plain:true">返回</span>
            </td>
        </tr>
    </table>
</form>

猜你喜欢

转载自blog.csdn.net/processengine/article/details/41116379