1、jQuery easyUI中动态添加选项卡
2、jquery ztree插件使用
n 下载ztree
n 基于标准json数据构造ztree
n 基于简单json数据构造ztree（重点）
3、数据库建模工具PowerDesigner使用方式
4、myeclipse翻转引擎插件使用（了解）
5、项目底层代码构建（重点）
n 持久层代码抽取
n 表现层代码抽取
6、实现BOS项目登录和注销功能
2 jQuery easyUI中动态添加选项卡
l 用于动态添加一个选项卡
l 选中指定的选项卡和判断某个选项卡是否存在
<a >添加一个选项卡</a>
<script type="text/javascript">
$(function(){
//页面加载完成后，为上面的按钮绑定事件
$("#but1").click(function(){
//判断“系统管理”选项卡是否存在
var e = $("#mytabs").tabs("exists","系统管理");
if(e){
//已经存在，选中就可以
$("#mytabs").tabs("select","系统管理");
}else{
//调用tabs对象的add方法动态添加一个选项卡
$("#mytabs").tabs("add",{
title:'系统管理',
iconCls:'icon-edit',
closable:true,
content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
});
}
});
});
</script>
3 jquery ztree插件使用
官网：ztree.me
目录结构：
l 在页面中引入ztree相关的文件：
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
3.1 使用标准json数据构造ztree（了解）
<!-- 展示ztree效果 :使用标准json数据构造ztree-->
<ul ></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting = {};
//构造节点数据
var zNodes = [
{"name":"节点一","children":[
{"name":"节点一_1"},
{"name":"节点一_2"}
]},//每个json对象表示一个节点数据
{"name":"节点二"},
{"name":"节点三"}
];
//调用API初始化ztree
$.fn.zTree.init($("#ztree1"), setting, zNodes);
});
</script>
3.2 使用简单json数据构造ztree（重点）
<!-- 展示ztree效果 :使用简单json数据构造ztree-->
<ul ></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting2 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};
//构造节点数据
var zNodes2 = [
{"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
{"id":"2","pId":"3","name":"节点二"},
{"id":"3","pId":"0","name":"节点三"}
];
//调用API初始化ztree
$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
});
</script>
效果：
3.3 发送ajax请求获取json数据构造ztree
<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul ></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting3 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};
//发送ajax请求，获取json数据
//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>
3.4 使用ztree提供的API为节点绑定事件
<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul ></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码----动态创建ztree
var setting3 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
},
callback: {
//为ztree节点绑定单击事件
onClick: function(event, treeId, treeNode){
if(treeNode.page != undefined){
//判断选项卡是否已经存在
var e = $("#mytabs").tabs("exists",treeNode.name);
if(e){
//已经存在，选中
$("#mytabs").tabs("select",treeNode.name);
}else{
//动态添加一个选项卡
$("#mytabs").tabs("add",{
title:treeNode.name,
closable:true,
content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
});
}
}
}
}
};
//发送ajax请求，获取json数据
//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>