最近项目需要一个基于树形结构的多选下拉列表的功能,,网上搜了搜也没发现有啥好的,,,一生气决定自己搞一个。。。。。。
首先,树形的结构是用的zTree,,所以项目需要引入ztree的相关脚本,下图是这个插件的目录结构
下图是引入的相关脚本和样式:
<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、多选的例子:
6、单选的例子(单选不该用这个,原生的就满足了,,。。。哈哈哈):
该项目的测试代码如下:
<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="点击" οnclick="getData()"/>
<div id="test"></div>
<div id="test1"></div>
<br>
<div>测试</div>
</div>