Ztree tree-shaped components combined with the use of bootstrap

Ztree parameter settings

var setting = {              view: {                false  //Hide icon            },            data: {                key: {                    "Setsubarea"  //JSON set the name of the child node JSON format {ID: ' 1 ', Name: ' Shenzhen ', setsubarea[{}]}}            ,            check: {                true,                false,                "Y": "P", "N": "S" }                }               // whether a CheckBox  is displayed on each node        ;  

Request to load data

1$ (document). Ready (function(){2             //loading a page is sending an asynchronous request3 $.ajax ({4Type: ' POST ',   5DataType: "JSON",   6URL: "Queryareatreejson.action",//the requested action path7Successfunction(data) {//The request succeeds after processing the function. 8Znodes =data;9Ztreeobj= $.fn.ztree.init ($ ("#areaTree"), setting, data);
Depending on the value in input, the corresponding node is selected in the tree structureTen                     varTreeobj = $.fn.ztree.getztreeobj ("Areatree"); One                     varInputarea = $ ("#areaNames"). Val (). split (); A                      for(vari = 0; i < inputarea.length; i + +) { -                         varnode = Treeobj.getnodebyparam ("name", Inputarea[i]);//$ ("#areaNames"). Val () -Treeobj.checknode (node,true,true); the                     } -                 }    -            });  -$ ("#area"). blur (Getselectnodes); Input get focus Auto trigger +});

Based on the value selected by Ztree, displayed in the input box

functiongetselectnodes () {varTreeobj = $.fn.ztree.getztreeobj ("Areatree"); varnodes = Treeobj.getcheckednodes (true); varAreaarr = [];  for(vari = 0; i < nodes.length; i + +){            varnode =Nodes[i];            Console.log (node); if(Node.isparent = =false|| (Node.check_child_state = = 0) {//Selected node and the child node of the node is not selected or is a leaf node areaarr.push (node.name); }        }                 $("#areaNames"). Val (Areaarr.join (",")); $(' #myModal '). Modal (' Hide '); }

<Buttonclass= "btn btn-primary btn-xs"Data-toggle= "Modal"Data-target= "#myModal"onclick= "return false;">Select Region</Button><!--modal frame (Modal) -        <Divclass= "Modal Fade"ID= "Mymodal"TabIndex= "-1"role= "Dialog"Aria-labelledby= "Mymodallabel"Aria-hidden= "true">           <Divclass= "Modal-dialog">              <Divclass= "Modal-content">                 <Divclass= "Modal-header"style= "padding:5px;">                    <!--<button type= "button" class= "btn Btn-xs" data-dismiss= "modal" aria-hidden= "true" >                    &times; </button> -                    <h4class= "Modal-title"ID= "Mymodallabel">Select Region</h4>                 </Div>                 <Divclass= "Modal-body">                    <Divclass= "Ztreedemobackground Left">                        <ulID= "Areatree"class= "Ztree"style= "Max-height:300px;width:auto; overflow-y:scroll;"></ul>                    </Div>                 </Div>                 <Divclass= "Modal-footer"style= "padding:5px;">                    <Buttontype= "button"class= "Btn btn-primary"onclick= "getselectnodes ();">Confirm</Button>                    <Buttontype= "button"class= "Btn Btn-default"Data-dismiss= "Modal"onclick= "getselectnodes ();">Close</Button>                 </Div>              </Div><!--/.modal-content -            </Div><!--/.modal -        </Div>

Ztree tree-shaped components combined with the use of bootstrap