与ig-Tree api

时间:2016-01-19 06:13:27

标签: jquery angularjs

当我尝试使用ig-tree api开发树结构时,我遇到了一个问题。 当我第一次将命令拖到树结构时它工作正常。删除并尝试添加命令后,它不遵循必须遵循的结构。 以下附件是拖动时的实际结构。 enter image description here
从树中删除节点并尝试拖动新节点后,它不遵循结构并显示如下。 enter image description here 可以请你帮我解决我的问题。

        var count = -1;var cmdcount;
        var textexecount = 0;
        var tt =-1;
        var t1 = 0,c1=0;
        var f,g=0,h=0;
        var k;var i =0;var a=[];
        var obj = null;
        var data = [];
        var dum =0;
        var z,h;
        var selection;
        //var dup1=0,d = "";


        var data1 = [];
        var stand = new Date();
        stand = "test_"+stand;
        //Bind
        $(document).delegate("#firstTree", "igtreenodedropped", function (evt, ui) {
            //return reference to the binding.
            ui.binding;
            //return reference to the data.
            ui.data;
            //return reference to the draggable element (the node).
            ui.draggable
            //return reference to the element.
            ui.element;
            //return reference to the helper.
            ui.helper;
            //return reference to the offset.
            ui.offest;
            //return to get a reference to the original position of the draggable element (the node).
            ui.orginalPosition
            //return reference to the node path.
            ui.path
            //return reference to the current position of the draggable element.
            ui.position
        });



            $("#firstTree").igTree({
                singleBranchExpand: true,
                dataSource: $.extend(true, [], cmd),
                dataSourceType: 'json',
                initialExpandDepth: 0,
                pathSeparator: '.',

                bindings: {
                    textKey: 'Text',
                    valueKey: 'Value',
                    imageUrlKey: 'ImageUrl',
                    childDataProperty: 'Folder'
                },
                dragAndDrop: true,
                dragStop:function(evt ,ui){ }
           });

        $(function () {            




            $("#secondTree").igTree({
                singleBranchExpand: true,
                dataSource: $.extend(true, [], Test),
                dataSourceType: 'json',
                initialExpandDepth: 0,
                pathSeparator: '.',
                bindings: {
                    textKey: 'Text',
                    valueKey: 'Value',
                    imageUrlKey: 'ImageUrl',
                    childDataProperty: 'Folder'
                },
                dragAndDrop: true,
                nodeDropping:function(evt,ui){
                    /*dup1 = ui.draggable.first().text();   
                    console.log(d);
                    if (d.indexOf(dup1)){
                        alert("single copy");
                    }else{
                        alert("duplicate copy");
                        dragAndDropMode  : false;
                        //dragAndDrop : false;


                    } */

                },
                nodeDropped: function(evt,ui){
                    z = ui.data.Text;
                    z = z.slice(-1);
                    if(ui.data.Text == stand){
                        tt = tt+1;
                        a[tt] =dum;

                        dum =0;
                        textexecount = 0;
                        count = count+1;

                    $("#secondTree").igTree("addNode", {
                            "Text": "testexe"+t1,
                            "Folder": [{
                                "Text": "Commandexe"+c1,
                                "Folder":[{
                                    "Text": ui.draggable.first().text()
                                }]
                            }]
                        },ui.element);


                        var sum = "0."+count;
                        //alert(sum);
                        $("#secondTree").igTree("removeAt" , sum);
                        testexe = "testexe"+t1;
                        commandexe = "commandexe"+c1;
                        t1 = t1+1;
                        c1 = c1+1;
                        h = testexe.slice(-1);
                        k = ui.element;
                        i = i+1;
                    }else if(ui.data.Text == testexe){
                        textexecount = textexecount+1;
                        //  console.log(ui.element[0].outerText);
                            $("#secondTree").igTree("addNode", {

                                "Text": "Commandexe"+c1,
                                "Folder":[{
                                    "Text": ui.draggable.first().text()
                                }]

                        },ui.element); 
                        dum = dum+1;
                        //console.log(dum);
                        var sum = "0."+tt+"."+textexecount;
                        //alert(c1);
                        $("#secondTree").igTree("removeAt" , sum);
                        commandexe = "Commandexe"+c1;
                        c1 = c1+1;


                    }else if((ui.data.Text == "Commandexe") && (ui.data.Text == commandexe)){

                    }else if(z < h){

                        var ne = ui.data.Text ;

                        f =ne.slice(-1);
                        var b = Number(f)

                        var p = (b+1);

                            $("#secondTree").igTree("addNode", {

                                "Text": "Commandexe"+c1,
                                "Folder":[{
                                    "Text": ui.draggable.first().text()
                                }]

                        },ui.element); 
                        a[p] =a[p]+1;
                        var o = a[p];
                        //alert(o);
                        sum = "0."+f+"."+o;
                        $("#secondTree").igTree("removeAt" , sum);//0.0.1
                        c1 = c1+1;

                    }

                    obj = $("#secondTree").igTree( "children", k );
                     d =    $('#secondTree a:last-child').text();


                },
                dragAndDropSettings: {
                    allowDrop: true,
                    dragAndDropMode: 'copy',
                    customDropValidation: function (element) {
                        // Validates the drop target
                        var valid = true,
                            droppableNode = $(this);


                        if (droppableNode.is('a') && droppableNode.closest('li[data-role=node]').attr('data-value') === 'File') {
                            valid = false;
                        }

                        return valid;
                    }
                }




            });

        });



//node dropped


$(document).delegate("#secondTree", "igtreenodedropping", function (evt, ui) {
    //return reference to the binding.
    ui.binding;
    //return reference to the data.
    ui.data;
    //return reference to the draggable element (the node).
    ui.draggable
    //return reference to the element.
    ui.element;
    //return reference to the helper.
    ui.helper;
    //return reference to the offset.
    ui.offest;
    //return to get a reference to the original position of the draggable element (the node).
    ui.path
    //return reference to the current position of the draggable element.
    ui.position
});

// deleting

            $("#secondTree").on("igtreeselectionchanged", function (e, ui) {
                selection = ui.selectedNodes[0].path;

                $("#btnRemoveNode").click(function (e) {
                    $("#secondTree").igTree("removeAt" , selection);
                    obj = $("#secondTree").igTree( "children", k );
                    //fun();
                });

            });

            // for first tree

            /* $("#firstTree").on("igtreeselectionchanged", function (e, ui) {
                dup1 = ui.newNodes[0].data.Text;
                }); */

function fun(){
//console.log(obj);
    data = [];
    angular.forEach(obj, function(value, key){
        var cmdexe = [];
        angular.forEach(value.data.Folder, function(value1, key1){
            var cmd = [];
            angular.forEach(value1.Folder, function(value2, key2){
                cmd.push({"cmdName": value2.Text});
            });
            cmdexe.push({"commandExecutorName": value1.Text, "commandExecutorCommandVOList": cmd});
        });
        data.push({"taskExecutorName": value.data.Text, "commandExecutorVOList": cmdexe});
    });
    console.log(Jstrong textSON.stringify(data));




}

    </script>

0 个答案:

没有答案