Multilevel drop-down selection list based on z-tree tree structure

Recently, the project needs a multi-select drop-down list function based on a tree structure. I searched the Internet and found nothing good. When I got angry, I decided to make one myself. . . . . .

First of all, the tree structure is zTree, so the project needs to introduce ztree related scripts. The following figure is the directory structure of this plugin.

The following figure shows the related scripts and styles introduced:

	<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath() %>/assets/iesSelectTree/ztree/jquery.ztree.all.min.js"></script>
  	<script type="text/javascript" src="<%=request.getContextPath() %>/assets/iesSelectTree/iesselect.js"></script>
  	<link href="<%=request.getContextPath() %>/assets/iesSelectTree/ztree/zTreeStyle.css" rel="stylesheet" />
  	<link href="<%=request.getContextPath() %>/assets/iesSelectTree/iesselect.css" rel="stylesheet" />

Jquery must be introduced. . . .

The following code is the code of the example. . . .

The use steps are as follows:

1. First define a div, specify the ID

<div id="test"></div>

2. Define the data source, according to the format of zTree, add the value attribute corresponding to the value of the native select

var data = [
    {
        name: 'Tree structure display name',
        value: 'Native select similar value',
        children: [{}]//Child content
    }
]

3. How to use the project, the first parameter is the object of jquery, the second parameter is the data source, and the third parameter indicates whether to select multiple

var test = new iesSelectTree($("#test"), data, true);

4. How to get data

var data = ddd.getValue(); //Get the value attribute
var name = data.getName(); //Get the name attribute

5. Multiple choice example:

6. Example of single-choice (single-choice should not use this, the native one is satisfied,,...hahaha):

The test code for this project is as follows:

  <SCRIPT LANGUAGE="JavaScript">
   // Data attributes of zTree, please refer to the API documentation for in-depth use (detailed explanation of zTreeNode node data)
   var zNodes = [
   	{
   		name:"test1",
   		value: '1',
   		children:[
      		{
      			name:"test1_1",
      			value: "1-19"
      		},
      		{
      			name:"test1_2",
      			value: "1-20"
      		}
      	]
   	},
    {
   		name:"test2",
   		children:[
     		{
     			name:"test2_1"
     		},
     		{
     			name:"test2_2"
     		}
     	]
   	}
   ];
   var zNodes1 = [
                 {name:"test1", open:true, children:[
                    {name:"test1_1"}, {name:"test1_2"}]},
                 {name:"test2", open:true, children:[
                    {name:"test2_1"}, {name:"test2_2"}]}
                 ];
   var ddd;
   $(document).ready(function(){
	   ddd = new iesSelectTree($("#test"), zNodes, true);
	   var d = new iesSelectTree($("#test1"), zNodes1, false);
// 	   iesSelectTree.initSelectTree($("#test"), zNodes);
   });
   function getData(){
	   alert(ddd.getValue());
   }
  </SCRIPT>
 </HEAD>
<BODY>
<div>
	<input type="button" value="点击" onclick="getData()"/>
	<div id="test"></div>
	<div id="test1"></div>
   <br>
   <div>Test</div>
</div>

Multilevel drop-down selection list based on z-tree tree structure

Guess you like