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

CodeTerminator 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>

 
 

相关推荐

两个蝴蝶飞 / 0评论 2010-03-16

PHP100 / 0评论 2019-03-28

PHP100 / 0评论 2019-03-27