node在八个div之间活动,checkbox自定义树形

作者: 前端技术  发布:2019-09-04

 

实现思路:

效果如下:

1、ztree中节点是通过一个json的Array作为数据源、,所以直接操作json字符串,然后转为json对象数组。

 

2、然后用新构成的json数组对象重新初始化ztree对象。

代码如下:

复制代码 代码如下:

<!DOCTYPE html>

<link rel="stylesheet" href="demo.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.5(1).js"></script>
<script type="text/javascript">
        var zTreeObj1;
        var zTreeObj2;
        var leftDivStr = "[";
        var rightDivStr = "[";
        var setting = {
            edit: {
                enable: false,
                showRemoveBtn: false,
                showRenameBtn: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                //onClick : menuOnClick
            }
        };
        function menuOnClick(event, treeId, treeNode, clickFlag) {

<HTML>

        }
        //注册toSource函数,解决ie不支持Array的toSource()方法的问题
        Array.prototype.toSource = function (){
             var str = "[";
             for(var i = 0 ;i<this.length;i++){
                 str+="{id:""+this[i].id+
                         "",pId:""+this[i].pId
                         +"",name:""+this[i].name
                         +"",isParent:""+this[i].isParent
                         +"",file:""+this[i].file
                         +"",icon:""+this[i].icon
                         +"",open:""+this[i].open
                         +""},";
             }
             if(this.length != 0){
                 str = str.substring(0, str.length-1);
             }
             str +="]";
            return str;

<HEAD>

        } ;
        //注册unique函数,去掉array中重复的对象(id相同即为同一对象)
        Array.prototype.unique = function (){
             var r = new Array();
            label:for(var i = 0, n = this.length; i < n; i++) {
                for(var x = 0, y = r.length; x < y; x++) {
                    if(r[x].id == this[i].id) {
                        continue label;
                    }
                }
                r[r.length] = this[i];
            }
            return r;

    <TITLE> ZTREE DEMO - radio&checkbox  </TITLE>

        } ;
        //初始数据
        var zNodes =[
            { id:1, pId:0, name:"父节点 1", open:true},
            { id:11, pId:1, name:"叶子节点 1-1",open:true},
            { id:111, pId:11, name:"叶子节点 11-1"},
            { id:112, pId:11, name:"叶子节点 11-2"},
            { id:12, pId:1, name:"叶子节点 1-2",open:true},
            { id:121, pId:12, name:"叶子节点 12-1"},
            { id:122, pId:12, name:"叶子节点 12-2"},
            { id:13, pId:1, name:"叶子节点 1-3"},
            { id:2, pId:0, name:"父节点 2", open:true},
            { id:21, pId:2, name:"叶子节点 2-1"},
            { id:22, pId:2, name:"叶子节点 2-2"},
            { id:23, pId:2, name:"叶子节点 2-3"},
            { id:3, pId:0, name:"父节点 3", open:true},
            { id:31, pId:3, name:"叶子节点 3-1"},
            { id:32, pId:3, name:"叶子节点 3-2"},
            { id:33, pId:3, name:"叶子节点 3-3"}
        ];

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        for(var i=0;i<zNodes.length;i++){
            leftDivStr+="{id:"+zNodes[i].id+",pId:"+zNodes[i].pId+",name:""+zNodes[i].name+"",open:"+zNodes[i].open+"},";
           }
        leftDivStr = leftDivStr.substring(0,leftDivStr.length-1);
        leftDivStr+="]";
        rightDivStr += "]";

    <link rel="stylesheet" href="../../../css/demo.css" type="text/css">

        //查找被移动节点的所有父节点
        function findParentNodes(treeNode, parentNodes){
            parentNodes += "{id:"+treeNode.id+",pId:"+treeNode.pId+
            ",name:""+treeNode.name+"",open:"+treeNode.open+"},";
            if(treeNode != null && treeNode.getParentNode()!= null){
                parentNodes =findParentNodes(treeNode.getParentNode(),parentNodes);

    <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">

            }
            return parentNodes;
        }       
        //移动节点
        function moveNodes(zTreeFrom,treeNode,zTreeTo,divStrFrom,divStrTo){
            /////////////////////////////////treeNode的所有父节点
            var parentNodes ="[";
            if(treeNode.pId != null){
                parentNodes = findParentNodes(treeNode,parentNodes);
                parentNodes = parentNodes.substring(0,parentNodes.length-1);
            }

    <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>

            parentNodes +="]";
            //alert(parentNodes);
            var parentNodesArray = eval(parentNodes);
            ///////////////////////////////
            var nodes = "[";
            nodes+= "{id:"+treeNode.id+",pId:"+treeNode.pId+",name:""+treeNode.name+"",open:"+treeNode.open+"},";
            nodes = operChildrenNodes(treeNode,nodes);
            nodes = nodes.substring(0,nodes.length-1);
            nodes+="]";
            var nodesArray = eval(nodes);
            var divFromArray = eval(divStrFrom);
            var divToArray = eval(divStrTo);
            for(var i = 0;i<nodesArray.length;i++){//删除节点
                for(var j = 0;j<divFromArray.length;j++){
                    if(divFromArray[j].id == nodesArray[i].id){
                        divFromArray.splice(j,1);
                    }
                }
            }

    <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>

            divToArray = divToArray.concat(nodesArray);//增加节点
            divToArray = divToArray.concat(parentNodesArray);

    <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>

            ///////////////////////////////////////////////////////////////////////////////////////去重复
            divFromArray = divFromArray.unique();
            divToArray = divToArray.unique();
            ///////////////////////////////////////////////////////////////////////////////////////////去重复

      <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->

            if(zTreeFrom.setting.treeId == "treeDemo"){
                leftDivStr = divFromArray.toSource();
                rightDivStr =divToArray.toSource();
                $.fn.zTree.init($("#treeDemo"), setting, divFromArray);
                $.fn.zTree.init($("#treeDemo2"), setting,divToArray);

    <SCRIPT type="text/javascript">

            }else{
                leftDivStr = divToArray.toSource();
                rightDivStr =divFromArray.toSource();
                $.fn.zTree.init($("#treeDemo2"), setting, divFromArray);
                $.fn.zTree.init($("#treeDemo"), setting,divToArray);
            }
        }

        <!--

        
        //查找指定节点下的所有子节点
        function operChildrenNodes(treeNode,nodes){
            if(treeNode.children!= undefined){//是父节点,有子节点
                for(var j = 0;j<treeNode.children.length;j++){
                    var childNode = treeNode.children[j];
                    nodes+="{id:"+childNode.id+",pId:"+childNode.pId+",name:""+childNode.name+"",open:"+childNode.open+"},";
                    nodes = operChildrenNodes(childNode,nodes);
                }
            }else{//没子节点
            }
            return nodes;
        }

        //定义全局zTree,用于使用zTree.getNodesByParam("checked", true, null);取得选择节点

       
        $(document).ready(function(){
            zTreeObj1 = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTreeObj2 = $.fn.zTree.init($("#treeDemo2"), setting);
            $(function() {
                $("#toRight").click(function() {
                    moveNodes(zTreeObj1,zTreeObj1.getSelectedNodes()[0],zTreeObj2,leftDivStr,rightDivStr);
                });
                $("#toLeft").click(function(){
                    moveNodes(zTreeObj2,zTreeObj2.getSelectedNodes()[0],zTreeObj1,rightDivStr,leftDivStr);

        var zTree;

                });   
                    $("#show").click(function(){
                        var leftDiv = new Array();
                        var leftDivStrArray = eval(leftDivStr);
                        for(var i = 0;i<leftDivStrArray.length;i++){
                            leftDiv[i] = leftDivStrArray[i].id;
                        }
                        var rightDivStrArray = eval(rightDivStr);
                        var rightDiv = new Array();
                        for(var i = 0;i<rightDivStrArray.length;i++){
                            rightDiv[i] = rightDivStrArray[i].id;
                        }
                    alert(leftDiv);
                    alert(rightDiv);

        var IDMark_A = "_a";

                });   
            });
        });

        var setting = {

       
    </script>

            view: {

html代码:

                addDiyDom: addDiyDom

复制代码 代码如下:

            },

<body style="cursor: auto;">
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
        <button id="toRight">>></button>
        <button id="toLeft"><<</button>
        <button id="show">show</button>
    <div class="right">
        <ul id="treeDemo2" class="ztree"></ul>
    </div>
</div>

            data: {

</body>

                simpleData: {

1、ztree中节点是通过一个json的Array作为数据源、,所以直接操作json字符串,然后转为json对象数组。 2、然后用新构成的json数组...

                    enable: true

                }

            }

        };

 

        var zNodes =[

            { id:1, pId:0, name:"父节点 1", open:true},

            { id:11, pId:1, name:"叶子节点 1-1"},

            { id:12, pId:1, name:"叶子节点 1-2"},

            { id:13, pId:1, name:"叶子节点 1-3"},

            { id:2, pId:0, name:"父节点 2", open:true},

            { id:21, pId:2, name:"叶子节点 2-1"},

            { id:22, pId:2, name:"叶子节点 2-2"},

            { id:23, pId:2, name:"叶子节点 2-3"},

            { id:3, pId:0, name:"父节点 3", open:true},

            { id:31, pId:3, name:"叶子节点 3-1"},

            { id:32, pId:3, name:"叶子节点 3-2"},

            { id:33, pId:3, name:"叶子节点 3-3"}

        ];

        //判断节点是否在已选择的节点中,判断重复选择

    function isNodeInChecked(curId){

            if(zTree==null){

                return false;

            }

            var selectedNodes=zTree.getNodesByParam("checked", true, null);

            var selectedNode;

            

            if(selectedNodes == null || selectedNodes.length==0){

                return false;

            }

            for(var i=0; i<selectedNodes.length;i++){

                selectedNode = selectedNodes[i];

                if(selectedNode.id==curId){

                    return true;

                }

            }

            return false;

        }

        //自定义的树形规则

        function addDiyDom(treeId, treeNode) {

            var aObj = $("#" + treeNode.tId + IDMark_A);

            if (treeNode.level == 0) {

                var editStr = "<input type='radio' class='radioBtn' id='radio_" +treeNode.id+"_"+treeNode.pId+"' onfocus='this.blur();'></input>";

                aObj.before(editStr);

                var btn = $("#radio_"+treeNode.id+"_"+treeNode.pId);

                if (btn) {

                    btn.bind("click", function() {checkAccessories(treeNode, btn);});

                }

                

            } else {

                var editStr = "<input type='checkbox' class='checkboxBtn' id='checkbox_" +treeNode.id+"_"+treeNode.pId+ "' name='checkbox_"+treeNode.getParentNode().id+"_"+treeNode.pId+ "' onfocus='this.blur();'></input>";

                aObj.before(editStr);

                var btn = $("#checkbox_"+treeNode.id+"_"+treeNode.pId);

                if (btn){

                

                     btn.bind("change", function() {checkBrand(treeNode, btn);});

                    var isNodeInChecked = false;

                    var selectedNodes=null;

                    if(zTree!=null){

                        selectedNodes = zTree.getNodesByParam("checked", true, null);

                    }

                    

                    var selectedNode;

                    //初始化时判断是否需要选择,这里可以去掉或者通过在zNodes中定义中添加checked:true来代替

                    if(selectedNodes != null && selectedNodes.length > 0){

                        for(var i=0; i<selectedNodes.length;i++){

                            selectedNode = selectedNodes[i];

                            if(selectedNode.id==treeNode.pId){

                                isNodeInChecked = true;

                                break;

                            }

                        }

                    }

                    if(isNodeInChecked){

                        treeNode.checked=true;

                        btn.attr("checked", true);

                    }

                }

 

            }

        }

        function checkAccessories(treeNode, btn) {

            if (btn.attr("checked")) {

                //点击的节点是否在已选的根节点中

                var isRootInChecked = isNodeInChecked(treeNode.id);

                if(!isRootInChecked){

                    //去除其余根节点以及下级节点的选择

                    beforeCheckAccessories();

                }

                treeNode.checked=true;

                //节点下所有节点都勾选

                setChildSelected(treeNode, btn,true);

            } else {

                treeNode.checked=false;

                setChildSelected(treeNode, btn,false);

            }

        }

        function setChildSelected(treeNode, btn,status){

            var children;

            if(treeNode.children==null){

                return true;

            }

            var lenth=treeNode.children.length;

            if(lenth==0){

                return true;

            }

            for(var i=0;i<lenth;i++){

                children = treeNode.children[i];

                $("#checkbox_" + children.id+"_"+children.pId).attr("checked", status);

                children.checked=status;

                btn = $("#checkbox_"+children.id+"_"+children.pId);

                rls = setChildSelected(children, btn,status);

                if(rls){

                    continue;

                }

            }

                

        }

        function beforeCheckAccessories() {

            var selectedNodes=null;

            if(zTree!=null){

                selectedNodes = zTree.getNodesByParam("checked", true, null);

            }

            

            var selectedNode;

            if(selectedNodes == null || selectedNodes.length == 0){

                return;

            }

            for(var i=0; i<selectedNodes.length;i++){

                selectedNode = selectedNodes[i];

                selectedNode.checked=false;

                $("#radio_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false);

                $("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false);

            }

        }

        

        

        function getCheckedBox(checkedName) {

            var r = document.getElementsByName(checkedName);

            for(var i=0; i<r.length; i++)    {

                if(r[i].checked)    {

                    return $(r[i]);

                }

            }

            return null;

        }

 

        function checkBrand(treeNode, btn) {

            if (btn.attr("checked")) {

                var isRootInChecked = isNodeInChecked(treeNode.rootId);

                if(!isRootInChecked){

                    beforeCheckAccessories();

                    treeNode.checked=true;

                }

                setParentNodeChecked(treeNode);

                setChildSelected(treeNode,btn,true);

            }else{

                treeNode.checked=false;

                setChildSelected(treeNode,btn,false);

            }

        }

        //复选框勾选时,将上级节点到根节点都勾选

        function setParentNodeChecked(treeNode) {

            var parentNode;

            if(treeNode==null){

                return true;

            }

            if(treeNode.getParentNode()!=null){

                    parentNode = treeNode.getParentNode();

                    $("#checkbox_" + parentNode.id+"_"+parentNode.pId).attr("checked", true);

                    parentNode.checked=true;

                    return setParentNodeChecked(parentNode);

            }else{

                var pObj = $("#radio_" + treeNode.id+"_"+treeNode.pId);

                if (!pObj.attr("checked")) {

                    treeNode.checked=true;

                    pObj.attr("checked", true);

                }

                return true;

            }

        }

        

 

 

        $(document).ready(function(){

            zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        });

        //-->

    </SCRIPT>

    <style type="text/css">

      .radioBtn {height: 16px;vertical-align: middle;}

      .checkboxBtn {vertical-align: middle;margin-right: 2px;}

      </style>

 </HEAD>

 

<BODY>

<h1>radio / checkbox  共存</h1>

<h6>[ 文件路径: super/radio_checkbox.html ]</h6>

<div class="content_wrap">

    <div class="zTreeDemoBackground left">

        <ul id="treeDemo" class="ztree"></ul>

    </div>

    <div class="right">

        <ul class="info">www.2cto.com

            <li class="title"><h2>实现方法说明</h2>

                <ul class="list"> checkbox和是无法共存的,但可以利用 自定义控件 的功能实现此需求,具体需求可以参考 "添加 自定义控件" 的详细说明</li>

                <li class="highlight_red">对于radio /checkbox  的联动规则,请根据需求制定自己的规则</li>

                </ul>

            </li>

        </ul>

    </div>

</div>

</BODY>

</HTML>

 

结束语:ztree 3.5比以前的版本的响应速度快了很多,自定义的树形功能也很方便,很容易集成到现有框架中,好东东呀

代码如下: !DOCTYPE html HTML HEAD TITLE ZTREE DEMO - radiocheckbox /TITLE meta http-equiv=content-type content=text/html; charset=UTF-8 link rel=stylesheet hr...

本文由王中王开奖结果发布于前端技术,转载请注明出处:node在八个div之间活动,checkbox自定义树形

关键词:

上一篇:没有了
下一篇:没有了