operamasks-tree

最新推荐文章于 2018-02-06 17:45:40 发布

boloyz

最新推荐文章于 2018-02-06 17:45:40 发布

阅读量1k

点赞数

分类专栏： operamasks 文章标签： operamasks-ui

本文链接：https://blog.csdn.net/boloyz/article/details/8554632

版权

operamasks 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

operamasks-ui开源组件，基于jquery开发的

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="ui/om-core.js"></script>
	<script type="text/javascript" src="ui/om-tree.js"></script>
	<link rel="stylesheet" type="text/css" href="css/om-all.css"/>
	<script type="text/javascript">
		var data1 = [{
			"text":"node1",
			"children":[{
				"text":"node11"
			},{
				"text":"node12"
			}]
		 },{
			"text":"node2",
			"expanded":true,
			"children":[{
				"text":"node21",
				"expanded":true,
				"children":[{
					"text":"node211"
				},{
					"text":"node212"
				}]
			},{
				"text":"node22"	
			}]
		},{
			"text":"node3"
		},{
			"text":"node4"
		}];

		var data2 = [{id:"n1",text:"品牌",expanded:true},
		             {id:"n2",text:"运营商",expanded:true},
		             {id:"n11",pid:"n1",text:"三星"},
		             {id:"n12",pid:"n1",text:"诺基亚"},
		             {id:"n13",pid:"n1",text:"摩托罗拉"},
		             {id:"n14",pid:"n1",text:"索尼"},
		             {id:"n21",pid:"n2",text:"移动"},
		             {id:"n22",pid:"n2",text:"联通"},
		             {id:"n23",pid:"n2",text:"电信"},
			     		];
		
		$(function(){
			$('#mytree1').omTree({
				dataSource:data1
			});
			$('#mytree2').omTree({
				dataSource:data2,
				simpleDataModel:true		//简单数据模型
				})
		});
	</script>
  </head>
  
  <body>
    <div id="main">
    	<table>
    		<tr>
    			<td style="color: blue;">常规数据结构</td>
    			<td style="color: blue;">简单数据结构</td>
    		</tr>
    		<tr valign="top">
    			<td width="160"><ul id="mytree1"></ul></td>
    			<td><ul id="mytree2"></ul></td>
    		</tr>
    	</table>
    </div>
  </body>
</html>

效果图：

boloyz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
operamasks-tree

operamasks-ui开源组件，基于jquery开发的<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> ">
复制链接

扫一扫

专栏目录