jQuery树形结构选择器代码



161 640 214



特效描述:jQuery 树形选择器代码,jQuery树形结构选择器代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/tree.css">

2. 引入JS

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.11.0.js"></script>
<script src="js/bootstrap-3.3.4.js"></script>
<script src="js/tree.js"></script>

3. HTML代码

<div class="row">
	<!-- 默认树结构表格 -->
	<div id="default_tree" class="col-sm-4"><h3>原始树结构</h3></div>
	<!-- 保存的数据 -->
	<div id="tree_data" class="col-sm-4"><h3>选中的数据</h3><div></div></div>
	<div id="select_tree" class="col-sm-4"><h3>选中的树结构</h3><div></div></div>
</div>
<button id="setBtn" class="btn btn-primary">设置</button>
<div class="modal toggle" id="myModal" data-backdrop="static">
	<div id="modalDialog" class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="btn btn-default modal-btn" id="closeBtn" aria-hidden="true" title="关闭"><i class="fa fa-close"></i></button>
				<button class="btn btn-default modal-btn" id="saveBtn" title="保存"><i class="fa fa-save"></i></button>
				<div class="modal-title">表格-列选择</div>
			</div>
			<div class="modal-body">
				<!-- 默认树表格 -->
				<div id="tree_table"></div>
			</div>
			<div class="modal-footer">
				<!-- 选中的数表格 -->
				<h2 align="left">预览</h2>
				<div id="select_tree_table"></div>
			</div>
		</div>
	</div>
</div>
<script>
$(document).ready(function(){
	var data2 = [
		{title: "编码", field: "code",candidate: false},
		{title: "基本信息", open: true, children:[
			{title: "名称", field: "name", candidate: true},
			{title: "年龄", field: "age", candidate: true},
			{title: "性别", field: "sex", candidate: true}
		]}
	];
	var data = [
		{title: "编码", field: "code",candidate: false},
		{title: "基本信息", open: true, children:[
			{title: "名称", field: "name", candidate: true},
			{title: "年龄", field: "age", candidate: true},
			{title: "性别", field: "sex", candidate: true},
			{title: '教育相关1', open: true, children:[
				{title: "最高学历1", field: "education", candidate: true},
				{title: "毕业学校1", field: "college", candidate: true},
				{title: "所学技术1", open:true, children: [
					{title: "Java编程1", field: 'java', candidate: true},
					{title: "Oracle数据操作1", field: 'oracle', candidate: true},
					{title: "网页设计1", field: 'html', candidate: true}
				]}
			]},
			{title: '教育相关2', open: true, children:[
				{title: "最高学历2", field: "education", candidate: true},
				{title: "毕业学校2", field: "college", candidate: true},
				{title: "所学技术2", open:true, children: [
					{title: "Java编程2", field: 'java', candidate: true},
					{title: "Oracle数据操作2", field: 'oracle', candidate: true},
					{title: "网页设计2", field: 'html', candidate: true}
				]}
			]}
		]},
		{title: '工作信息', open: true, children:[
			{title: "职位", field: "office", candidate: true},
			{title: "职称", field: "call", candidate: true},
			{title: "所在楼层", field: "place", candidate: true}
		]}
	];
	$('#default_tree').append(loadTree(data));
	nodeClick($('#default_tree'));
	// 是否已保存数据
	var isSave = false;
	$('#setBtn').click(function(){
		$('#tree_table').empty();
		$('#tree_table').append(loadTreeTable(data));
		tableClick();
		$('#select_tree_table').empty();
		// 加载已选中的数据
		if(selectData != undefined && selectData.length > 0 && isSave){
			$('#select_tree_table').append(loadTreeTable(selectData));
		} else{
			$('#select_tree_table').append(loadTreeTable([{title:'编码', field:'code', candidate:false}]));
		}
		$('#myModal').modal('show');
	})
	// 保存数据
	$('#saveBtn').click(function(){
		$('#select_tree>div').empty();
		// 获取选中的叶子 field
		$('#tree_data>div').empty();
		if(selectData != undefined && selectData.length > 1){
			$('#select_tree>div').append(loadTree(selectData));
			$('#tree_data>div').append("[" + result(selectData) + "]");
			nodeClick($('#select_tree>div'));
		}
		isSave = true;
		$('#myModal').modal('hide');
	})
	$('#closeBtn').click(function(){
		$('#myModal').modal('hide');
	})
})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 收缩导航菜单 二级导航菜单 图片广告 文字提示框 文字收缩展开 下拉导航菜单 对联广告 提示框/弹出层 图片收缩展开 竖直导航菜单 layer 图标导航菜单 叠加浮动层 lightbox 固定导航菜单 侧边导航菜单 Tooltip工具提示框 树形导航菜单 浮动提示框 网址导航菜单 html5弹窗动画 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 悬浮浮动漂浮 弹出层拖动 窗口提示框 收缩收起展开 浮动提示框 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到