0

javascript と jquery を使用してツリーを作成しています。

ツリーには、ノードのインデントを変更するために提供されている 4 つのボタンがあります。

ボタンについて説明します。

-> 子を選択してクリックすると左インデントになり、特定の子が次のレベルの子になります。

例：aは、cを選択して左インデントをクリックすると、同じレベルに2つの子b、cを持つルートです。cはbの子になります。

結果は、a は 1 つのレベルで 2 つのレベルの子 b を持ち、c は b の子になります。

<- 子の子を選択して右インデントをクリックすると、同じレベルの子になるはずです。

例: 上記の場合、ルートが a の b の子として c を作成したので、c を選択して右インデントをクリックするよりも、c を b と同じレベルにする必要があります。

*結果*a には、同じレベルの 2 つの子 b、c があります。

選択した項目のいずれかに、自動的に続く必要があるよりもさらに多くの子がある場合。シナリオを視覚化できることを願っています。これをどのように進めるかは手掛かりがありません。

私のマークアップには、すべてのものを含む div タグが 1 つだけあり、関数 'getuperparent()' を呼び出すボタンがあります。コードを貼り付けて、状況を把握しています。

    //for calling first time parent
function GetSuperParent() {
            genrateHirerachy();
    }


    function genrateHirerachy() {
        var dvHirearchy = document.createElement("div");
        var counter = $("#hdnDivCounter").val();
        dvHirearchy.id = "dv_" + counter;

        $(dvHirearchy).addClass("divContainer");
        var ulSibContainer = document.createElement("ul");
        ulSibContainer.id = "ul_" + counter;
        var btnAdd = document.createElement("Input");
        btnAdd.setAttribute('onclick', 'GetTextData("'+dvHirearchy.id+'","'+ulSibContainer.id+'")');
        var spnData = document.createElement("span");
        spnData.id = "spnParent_"+counter;
        spnData.setAttribute('ondblclick', 'GetTexBox("'+spnData.id+'")');
        spnData.innerHTML = "double click to add super parent";
        btnAdd.type = "button";
        btnAdd.value = "+";
        //it will be added latter
       // var btnminus = document.createElement("Input");
       // btnminus.type = "button";
        //btnminus.value = "-";

        var btnchild = document.createElement("Input");
        btnchild.type = "button";
        btnchild.value = "+Child";
        btnchild.setAttribute('onclick', 'GetChildData("' + dvHirearchy.id + '")');
        var drpOrder = document.createElement("Select");
        var drpOption = document.createElement("OPTION");

        var drpText = document.createTextNode("display order");
        drpText = document.createTextNode("order");
        drpOption.appendChild(drpText);
        drpOption.setAttribute("value", "0");
        drpOption.setAttribute("value", "1");
        drpOrder.appendChild(drpOption);

        counter++;
        $("#hdnDivCounter").val(counter);
        $(dvHirearchy).append(ulSibContainer);
        $("#dvContainer").append(spnData);
        $("#dvContainer").append(btnAdd);
        //$("#dvContainer").append(btnminus);
        $("#dvContainer").append(btnchild);
        $("#dvContainer").append(drpOrder);
        $("#dvContainer").append(dvHirearchy);
    }


    //for setting the textbox for super parent
    function GetTexBox(spnID) {

        var elem = document.createElement("input");
        elem.type = "text";
        elem.id = "textbox1";
        elem.setAttribute('onblur', 'GetSpanValue("'+spnID+'")');
        if ($('#' + spnID).html() != "double click to add super parent" && $('#' + spnID).html() != '') {
            elem.value = $('#' + spnID).html();
        }
        $('#' + spnID).html('');
        $('#' + spnID).append(elem);
        elem.focus();

    }
    //on blur for super parent text box and remove it
    function GetSpanValue(spId) {
        $('#'+spId).append($('#textbox1').val());
        $('#textbox1').remove();
    }

    //for making the span for parent
    function GetTextData(divID,ulID) {

        //to check from where the function is called
        var checkClass = $('#dvContainer').find('span.bgLime').length;
        if (checkClass == 0) {
            AddSiblings(divID,ulID);
        $('#hdnChkSibbling').val('2');
        }
        else {

            var getValue = $('#dvContainer').find('span.bgLime');
            var spnID = getValue[0].id;
            var check = spnID.indexOf("spn");
            if (check>0) {
                AddSiblings();
                $('#' + spnID).removeClass('bgLime');
            }
            else {
                var chId = getValue.closest("div").attr("id");
                $('#' + spnID).removeClass('bgLime');
                var prntChID = chId.substring(0, 7);
                addSameLevelChild(prntChID);
            }

        }

    }

    //add the sibling
    function AddSiblings(divID,ulID) {
        var dvPrnt = AddNode();
            var liData = document.createElement("li");
                $(liData).append(dvPrnt);
                if ($("#hdnCount").val() != 2) {
                        $('#' + ulID).append("<br/>");
                    }
                        $('#' + ulID).append(liData);
    }

    //for creating the dynamic div
    function AddNode() {
        $("#hdnMngChildCss").val('1');
        var countSpan = $("#hdnCount").val();
        var dvPrnt = document.createElement("div");
        dvPrnt.id = "dv_Pr_" + countSpan;
        dvPrnt.innerHTML = "double click to add parent";
        dvPrnt.setAttribute('ondblclick', 'GetTextBoxForParent()');
        countSpan++;
        $("#hdnCount").val(countSpan);
        return dvPrnt;
    }
        //double click event of the div for sibbling
    function GetTextBoxForParent() {
        if ($("#hdnMngChildCss").val() == 1) {
            var decCount = $("#hdnCount").val() - 1;
            var spnNew = 'dv_Pr_' + decCount;
            $('#' + spnNew).html('');
            var spnImage = document.createElement("span");
            spnImage.id = spnNew + "_" + "spn1";
            $(spnImage).addClass('SpanImage');
            $('#' + spnNew).append(spnImage);
            var spnText = document.createElement("span");
            spnText.id = spnNew + "_" + "spn2";
            spnText.setAttribute('onclick', 'GetColorPrnt("' + spnText.id + '")');
            var elem = document.createElement("input");
            elem.type = "text";
            elem.id = "txtParent";
            elem.setAttribute('onblur', 'SetSpanValueForParent("' + spnText.id + '")');
            $(spnText).append(elem);
            setTimeout(function() { elem.focus() }, 50);
            $('#' + spnNew).append(spnText);
        }
    }


    function GetColorPrnt(spanChildId) {
        $('#' + spanChildId).addClass("bgLime");
        //$("#btnChild").removeAttr("disabled");
    }

    //on blur for all parents of textbox to remove it and set value
    function SetSpanValueForParent(parentId) {
        $('#'+ parentId).append($('#txtParent').val());
        $('#txtParent').remove();
        $("#btnRemove").removeAttr("disabled"); 
          }

    function addSameLevelChild(childId) {
        var liChild = document.createElement("li");
        var dvChildren = createDivChild(childId);
        $(liChild).append(dvChildren);
        $('#' + childId).append(liChild);
    }

    function createDivChild(childId) {
        var countSpan = $("#hdnChildCounter").val();
        var dvChild = document.createElement("div");
        dvChild.id = childId + "_" + countSpan;
        dvChild.innerHTML = "double click to add children";
        dvChild.setAttribute('ondblclick', 'GetChildNode("'+dvChild.id+'")');
        countSpan++;
        $("#hdnChildCounter").val(countSpan);
        return dvChild;
    }





    //for giving the message for adding child
    function GetChildData(dvPrntID) {
    debugger
        var getValue = $('#dvContainer').find('span.bgLime');
            var spnID = getValue[0].id;
            var check = spnID.indexOf("spn");
            var prntDvId = getValue.closest("div").attr("id");
            if (check > 0) {

                addChild(prntDvId);
            }
            else {
                //call the function to append the new child of a particular child and pass the spnID as
                //child id to append the respective node

                addChildofChild(prntDvId);
            }
            $('#' + spnID).removeClass('bgLime');
    }


    function addChildofChild(secChildid) {
        if ($("#hdnChildCounter").val() == 1) {
            var ulChildrens = document.createElement("ul");
        }
        var liChildrens = document.createElement("li");
        var dvChildrens = CreateChildNode(secChildid);
        $(liChildrens).append(dvChildrens);
        if (ulChildrens.tagname == 'ul') {
            $(ulChildrens).append(liChildrens);
            $(secChildid).append(ulChildrens);
        }
        else {
            $(secChildid).append(liChildrens);
        }

    }

    function createUl() {
        var ulChild = document.createElement("ul");
        ulChild.id = "ulc_" + $("#hdnChildCounter").val();
        return ulChild;
    }

    function addChild(parentId) {
        var childUl;
        if ($("#hdnChildCounter").val() == 1) {
            childUl = createUl();
        }
        var liChild = document.createElement("li");
        var dvChild = CreateChildNode(parentId);
        $(liChild).append(dvChild);
        $(childUl).append(liChild);
        $('#' + parentId).append(childUl);
    }


    function CreateChildNode(childID) {
        var childCounter = $("#hdnChildCounter").val();
        var dvChild = document.createElement("div");
        dvChild.id = childID + "_ch_" + childCounter;
        dvChild.innerHTML ="&nbsp;&nbsp;&nbsp;" + "double click to add child";
        dvChild.setAttribute('ondblclick', 'GetChildNode("' + dvChild.id + '")');
        childCounter++;
        $("#hdnChildCounter").val(childCounter);
        return dvChild;
    }


    //double click for getting appended the textbox
    function GetChildNode(parentID) {

        $('#' + parentID).html('');
        var spnchImage = document.createElement("span");
        spnchImage.id = parentID + "_" + "chn1";
        $(spnchImage).addClass('SpanImage');
        $('#' + parentID).append(spnchImage);
        var spnChText = document.createElement("span");
        spnChText.id = parentID + "_" + "chn";
        spnChText.setAttribute('onclick', 'GetColorPrnt("' + spnChText.id + '")');
        var elemTxtChild = document.createElement("input");
        elemTxtChild.type = "text";
        elemTxtChild.id = "txtChildren";
        elemTxtChild.setAttribute('onblur', 'SetChildValueForParent("' + spnChText.id + '")');
        $(spnChText).append(elemTxtChild);
        $('#' + parentID).append(spnChText);
        $("#hdnMngChildCss").val('2');
        setTimeout(function() { elemTxtChild.focus() }, 50);
    }

    //On blur event for the text box
    function SetChildValueForParent(spanParentId) {
        $('#' + spanParentId).append("&nbsp;&nbsp;&nbsp;");
        $('#' + spanParentId).append($('#txtChildren').val());
        $('#txtChildren').remove();
        $("#btnChild").attr('disabled', 'disabled');
    }

    function DeleteNode() {

        var getNode = $('#dvTree').find('span.bgLime');
        var removeNode = getNode[0].id;
        $("#" + removeNode).remove();

    }
4

1 に答える 1

0

私の理解が正しければ、MS Wordの「アウトラインモード」でインデント/インデント解除のようなことをしたいと思うでしょう。したがって、この状況では：

  • a
  • b
    • c
  • d

「b」で「インデント」を押すと、次のようになります。

  • a
    • b
    • c
  • d

次に「c」で「unindent」を押すと、状況は次のようになります。

  • a
    • b
  • c
  • d

この方法でそれを行うことができます (選択された要素が「選択された」クラスを持ち、そのような要素が常に 1 つしかないと仮定します):

function indent() {
    var $element = $('.selected'),
        $newParent = $element.prev();

    if ($newParent.length) {
        $element.appendTo($newParent); // I'm pretty sure this moves the element, might have to remove() as well
    }
}

function unIndent() {
    var $element = $('.selected'),
        $parent = $element.parent();

    $element.insertAfter($parent); // I'm pretty sure this moves the element, might have to remove() as well
}

これにより、移動したノードの子も移動します。つまり、(移動した) 親の下に残ります。

編集:おまけとして、ここに moveUp と moveDown 関数があります:

function moveUp() {
    var $element = $('.selected'),
        $previous = $element.prev();

    if ($previous.length) {
        $element.insertBefore($previous);
    }
}

function moveDown() {
    var $element = $('.selected'),
        $next = $element.next();

    if ($next.length) {
        $element.insertAfter($next);
    }
}

明らかに、ここでいくらかの冗長性を取り除くことができますが、これは「読者への演習」として残します;)

于 2010-12-08T08:36:50.347 に答える