Я делаю дерево с помощью javascript и jquery.
В дереве предусмотрены четыре кнопки для изменения отступа узлов.
позвольте мне объяснить кнопки.
-> оставленный отступ, если я выберу ребенка и нажму на него, он должен превратить конкретного ребенка в ребенка следующего уровня.
Например: a - это корень, у которого есть два дочерних элемента b, c на одном уровне, если я выберу c и нажму на
левый отступ c должен стать потомком b.
результат будет a имеет двухуровневых детей b на одном уровне, а c является потомком b.
<- правый отступ, если я выберу дочерний элемент ребенка и нажму на этот правый отступ, чтобы он стал тем же ребенком уровня. </p>
для примера: в приведенном выше примере я сделал c дочерним элементом для b, корнем которого является a. Теперь я хочу, чтобы c снова находился на том же уровне b, что и я, выбирая c и нажимая правый отступ.
* Результат * a имеет двух детей b, c на одном уровне.
если у какого-либо из выбранных предметов есть больше потомков, чем он должен следовать за ним автоматически.
Я надеюсь, что смогу визуализировать свой сценарий.
как поступить с этим без понятия.
в моей разметке есть только один тег div, который содержит каждую вещь и кнопку, которая
вызывает функцию '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 =" " + "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(" ");
$('#' + 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();
}