基于z-tree树形结构的多级下拉选择列表

火星的你

2017-02-17

最近项目需要一个基于树形结构的多选下拉列表的功能，，网上搜了搜也没发现有啥好的，，，一生气决定自己搞一个。。。。。。

首先，树形的结构是用的zTree，，所以项目需要引入ztree的相关脚本，下图是这个插件的目录结构

基于z-tree树形结构的多级下拉选择列表
下图是引入的相关脚本和样式：

<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是必须要引入的。。。。

以下代码，是例子的代码。。。。

使用步骤如下：

1、先定义一个div，，指定ID

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

2、定义数据源，按照zTree的格式，增加value属性对应原生select的value

var data = [
    {
        name: '树形结构展示名称',
        value: '原生select类似的value',
        children: [{}]//子内容
    }
]

3、项目的使用方式，第一个参数是jquery的对象，第二个参数是数据源，第三个参数表示是否多选

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

4、获取数据的方式

var data = ddd.getValue(); //获取value属性
var name = data.getName();  //获取name属性

5、多选的例子：

基于z-tree树形结构的多级下拉选择列表
6、单选的例子（单选不该用这个，原生的就满足了，，。。。哈哈哈）：

基于z-tree树形结构的多级下拉选择列表

该项目的测试代码如下：

<SCRIPT LANGUAGE="JavaScript">
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   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>测试</div>
</div>

树形结构 z-tree