DTree is a js control which is very convenient to generate tree on the page and easy to use. If you have a general idea of how Dtree works, you can easily display a tree on the page. However, different project requirements lead to various changes in menu tree, so while introducing dTree, this paper focuses on how to transform dTree in order to achieve the purpose of different projects.

• How to use dtree:
  (1) Introducing dtree.js: Dtree function script
  (2) Introducing dtree.css: Style file
  (3) Introducing img folder: storing the icons used by dtree
  (d = new dTree('d'); and // create a tree with the name'd'(note that the name of the object variable of the tree should be the same as that of the tree)
  D.Add (0, -1,'My example tree'); add nodes to the tree. Node id is 0, parent node is - 1 (root node), node text'My example tree'
  Finally, the tree can be generated into the page. document.write(d);

  Note: You must have noticed that this tree is used for display. We can see the hierarchical relationship of each layer, but it can't be operated. Moreover, these data are written to death. When the amount of data is large, it is impossible to write d.add () repeatedly on the page. How can we inject dynamic data?

  First, realize dynamic data injection

• jsp page version, the main code is as follows:

<div id="tree">
<script>
    d = new dTree("d","${ctx}/static/dtreebox/");
    //${ctx}/static/dtreebox/Paths for image storage
    var mark = '';
    <c:if test="${!empty wBaseInfos}">
        <c:forEach items="${wBaseInfos}" var="tree">               
        var mark = '';                                                   d.add("${tree.id}","${tree.fid}","${tree.cName}","","${tree       .id}","","","","","",mark);
        </c:forEach>
    </c:if>
    document.write(d);
</script>
</div>
//Backstage encapsulates the tree's information${wBaseInfos}In the object, the tree is displayed id by tree Within the label element

• The key code for ajax requesting dynamic data edition is as follows:

function getBaseInfo(userId,productId,bxPlan){
    $.post('/bg/qyLocalGrade/getBaseInfo',{userId:userId,productId:productId,bxPlan:bxPlan},function(data){
        if(data==null||data==''){
            $("#order_number_error").html("No city information!");
        }else{
            $('#tree').css('display','block');
            d = new dTree("d","/static/dtreebox/");
            var mark = '';
            for(var i=0;i<data.wBaseInfos.length;i++){              
                if(i>0){
stateTree.push(data.wBaseInfos[i].localgrade.status);
                }
                var mark = '';              d.add(data.wBaseInfos[i].id,data.wBaseInfos[i].fid,data.wBaseInfos[i].cName,"",data.wBaseInfos[i].id,"","","","","",mark);
            }
            window.d=d; 
            $("#tree").html(d.toString()); //The above two lines of code are intended to ensure that the tree can be displayed in a label with id tree.  
        }
    });

Data has been dynamically injected. How do you achieve this if you want to add radio buttons/check buttons/drop-down boxes before each item?

• Checkbox tree, look at the source code can be found that the page is a string stitching, need to change the code in dtree.js, the key code is as follows:

1. In config, you need to configure check: true.

2,stay dTree.prototype.node The method splices strings, usually in img After splicing;
 if(this.config.check==true){
        str+= '<input type="checkbox" '+node.disabled+' '+node.defaultBox+' id="c'+ this.obj + nodeId + '" onclick="javascript:'+this.obj+'.cc('+nodeId+');javascript:'+this.obj+'.SetValue('+nodeId+');"/>'}

• Trees with radio boxes need to change the code in dtree.js. The key code is as follows:

1. useRadio: true needs to be configured in config.   

2,stay dTree.prototype.node The method splices strings, usually in img After splicing;
 if(this.config.useRadio && node.id != 436){
 //node.id is the id of the root file, which is not normally operated on. This id value is passed from the background.
    str +='<input type="radio"  class="radioState"  name="chk" id="r'+  this.obj + nodeId + '"  value="'+node.id+'"/>';
    }

• Trees with drop-down boxes need to change the code in dtree.js. The key code is as follows:

1,stay dTree.prototype.node The method splices strings, and the drop-down box is usually placed after the text. else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';str += node.name;if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';After the code;
 if(node.id != 436){
        str+='<select name="selectNode" class="selectCheck input-small" ><option value="1">First tier Province</option><option value="2">Two level Province</option><option value="6">Municipality directly under the Central Government</option><option value="7">Special grade city</option><option value="3">First tier city</option><option value="4">Two tier city</option><option value="5">Three tier city</option></select>';
    }

The corresponding styles are available, we can also click on the operation, but smart you should have found that the page now loops out the same content, how do we have differentiated content?

• Take the drop-down box for example. The key code is as follows:

<div id="tree">
<script>
    d = new dTree("d","${ctx}/static/dtreebox/");
    //${ctx}/static/dtreebox/Paths for image storage
    var mark = '';
    var regionTree=[];
    <c:if test="${!empty wBaseInfos}">
        <c:forEach items="${wBaseInfos}" var="tree">
        regionTree.push(${tree.localgrade.loclaGrade});
        //This is the value to be displayed for each drop-down box               
        var mark = '';                                                   d.add("${tree.id}","${tree.fid}","${tree.cName}","","${tree       .id}","","","","","",mark);
        </c:forEach>
    </c:if>
    document.write(d);
</script>

When the page is loaded, traverse all drop-down boxes and assign values to the corresponding values in the array

$(function(){
    $('.selectCheck').each(function(index){
        $(this).val(regionTree[index]);
        $(this).siblings('.oldSelect').val($(this).val());
    }); 
});

When I did this, I felt OK, but the product manager suggested that when the value of the drop-down box changed, I would first prompt the user whether to change, change the value of the voice interface, and cancel the old value. At this time, I need to change the code in dtree.js.

if(node.id != 436){
        str+='<input type="hidden" class="oldSelect" name="authorityId" value=""/><select name="selectNode" class="selectCheck input-small" onchange="saveSelect(this.value,'+node.id+',this)"><option value="1">First tier Province</option><option value="2">Two level Province</option><option value="6">Municipality directly under the Central Government</option><option value="7">Special grade city</option><option value="3">First tier city</option><option value="4">Two tier city</option><option value="5">Three tier city</option></select>';
    }
    //Then add the corresponding method in dtree.js:
    function saveSelect(element,Id,that){
    oldSelect=$(that).siblings('.oldSelect').val();
    //At this point, you need to assign the initial value to the element whose class is oldSelect when the page is loaded.
    var r=confirm("Are you sure you want to change it?");
      if (r==true)
        {         
          $.get('/bg/qyLocalGrade/update/'+Id+'/'+element,function(data){
                if(data){
                    $(that).siblings('.oldSelect').val(element);
                    alert('Successful revision!');
                }else{
                    $(that).val(oldSelect);
                    alert('Modification failed!');
                }
          });
        }
      else
        {
          $(that).val(oldSelect);
          return false;
        }
}

Eventually, from the production of the page to the final data interaction has been ok, similar functions can almost be achieved in this way, you can try.
Defects: You must also find that three pages have been implemented, and I rewrote dtree.js three times, so that dtree.js is not very public, so you try to add conditional judgment in dtree.js to choose to use it.