JQuery EasyUI 结合ztrIee的后台页面开发实例
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,
zTree是国内的大牛们搞的一个jquery树形tree插件,感觉很好用,很强大,而且完全免费,API等做的也非常不错.推荐
easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
easyui 非常简单，但是功能非常强大。
需要的导入以下几种js文件和样式表
easyui/themes/default/easyui.css
easyui/themes/icon.css
jquery-1.8.3.js
easyui/jquery.easyui.min.js
ztree/jquery.ztree.all-3.5.js(该文件包括core,exhide,exedit,excheck)
ztree/zTreeStyle.css<script type="text/javascript">
// ztree菜单设置
var zTreeObj,
setting = {
view: {
selectedMulti: false
},
// 添加编辑设置:修改树节点名称/删除树节点
edit: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback:{
onClick: zTreeOnClick
}
};
// 回调函数:单击事件
function zTreeOnClick(event, treeId, treeNode, clickFlag) {
alert(treeNode.id + ", " + treeNode.name);
var content = '<div style="width:100%;height:100% ;overflow:hidden;">'
+'<iframe src="'
+treeNode.url
+'" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>';
if(treeNode.url != undefined && treeNode.url != ""){
// 当centre中是否存在名称为treeNode.name的tabs
if($("#tt").tabs('exists',treeNode.name)){
$("#tt").tabs('select',treeNode.name);
}else {
$("#tt").tabs('add',{
title:treeNode.name,
content:content,
closable:true
})
}
};
event.preventDefault();
};
// 提供ztree树形菜单数据
zTreeNodes = [ {"id":1, "pId":0, "name":"海贼王"},
{"id":11, "pId":1, "name":"娜美", "url":"http://man.linuxde.net/"},
{"id":12, "pId":1, "name":"罗宾", "url":"http://www.baidu.com"},
{"id":13, "pId":1, "name":"汉库克", "url":"http://www.google.cn/"},
{ "id":2, "pId":0, "name":"父节点 2", "open":true},
{"id":21,"pId":2, "name":"叶子节点 2-1"},
{"id":22, "pId":2, "name":"叶子节点 2-2"},
{"id":23,"pId":2, "name":"叶子节点 2-3"},
{"id":3, "pId":0, "name":"父节点 3", "open":true},
{"id":31, "pId":3, "name":"叶子节点 3-1"},
{"id":32, "pId":3, "name":"叶子节点 3-2"},
{"id":33, "pId":3, "name":"叶子节点 3-3"}
];
// 3.生成树形菜单
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
});
// 4.对象选项卡注册右击事件
$(document).ready(function(){
$("#tt").tabs({
onContextMenu:function(e,title,index){
// 阻止系统默认的右击事件
e.preventDefault();
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
});
// 获取所选取的面板对象
$(document).ready(function(){
$("#tt").tabs({
// 获取所选取的面板对象
onSelect : function(title,index ){
// 5. menu的单击事件绑定
$("#mm").menu({
onClick:function(item){
alert(item.name);
// 当点击关闭当前选项卡时
if(item.name==='current'){
$('#tt').tabs('close',title);
// 当点击关闭其他选项卡时
}else if(item.name === 'others'){
var tabs = $('#tt').tabs('tabs');
$(tabs).each(function(){
if($(this).panel('options').title != '消息中心' && $(this).panel('options').title != title){
$('#tt').tabs('close',$(this).panel('options').title);
}
});
// 当点击关闭所有选项卡时
}else if(item.name === 'all'){
var tabs = $('#tt').tabs('tabs');
$(tabs).each(function(){
if($(this).panel('options').title != '消息中心'){
$('#tt').tabs('close',$(this).panel('options').title);
}
});
}
}
});
}
})
})
</script>
相应的htm 部分代码
<body class="easyui-layout">
<div data-options="region:'north',title:'北丐:洪七公',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'南帝:一灯大师',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'东邪:黄药师',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'西毒:欧阳锋',split:true" style="width:250px;">
<div id="aa" data-options="fit:'true'" class="easyui-accordion">
<div title="赵敏" data-options="iconCls:'icon-save'" >
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="大玉儿" data-options="iconCls:'icon-reload',selected:true" >
// ztree属性结构
<ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
</div>
<div title="婉容儿" >
who?
</div>
</div>
</div>
<div data-options="region:'center',title:'中神通:周伯通'">
// tabs 面板
<div id="tt" class="easyui-tabs" data-options="fit:true">
<div title="小龙女"data-options="closable:true" ></div>
<div title="沐剑屏" data-options="closable:true" ></div>
<div title="阿珂" data-options="iconCls:'icon-reload',closable:true"></div>
</div>
</div>
// menu菜单栏
<div id="mm" class="easyui-menu" style="width:120px;">
<div name="current">关闭当前选项卡</div>
<div name="others">关闭其他选项卡</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-cancle'" name="all">关闭所有选项卡</div>
</div>
</body>
以上这篇JQuery EasyUI 结合ztrIee的后台页面开发实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
jQuery EasyUI 入门必看
学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下载及运行 jQuery EasyUI 在正式了解 jQuery EasyUI 之前,我们先了解一下什么是 jQuery EasyUI.它的学习条件.市场上的同类产品.所支持的浏览器等.然后配置运行 jQuery EasyUI. 一．什么是 jQuery EasyUI jQuery EasyUI 是一
-
基于jQuery Easyui实现登陆框界面
效果图 CSS a{ text-decoration:none; } body{ margin:0px; } #header{ width:100%; height:30px; background-color:#E0EFFF; padding-top: 5px; padding-bottom: 10px; } #header .logo{ margin-left: 50px; font-size: 24px; font-family: 微软雅黑; } #picture{ width:100%;
-
jquery easyui 结合jsp简单展现table数据示例
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu
-
jquery Easyui快速开发总结
最近工作很轻松,整理了些关于easyui的datagrid的开发文档,整理的比较细致,直接复制粘贴就可以使用了. 代码内容如下: <link href="../../Content/easyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../../Content/easyUI/themes/icon.css&q
-
JQuery EasyUI 结合ztrIee的后台页面开发实例
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的, zTree是国内的大牛们搞的一个jquery树形tree插件,感觉很好用,很强大,而且完全免费,API等做的也非常不错.推荐 easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easy
-
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE H
-
SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架
前面两篇,我们整合了SSH并且抽取了service和action部分的接口,可以说基本开发环境已经搭建好了,这一节我们搭建一下后台的页面.我们讨论一下两种搭建方式:基于frameset和基于easyUI.最后我们会使用easyUI来开发. 1. 抽取公共JSP页面 我们先来看一下当前的jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
-
在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法
easyUI是jquery的一个插件,是民间的插件.easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码.html代码和Css样式.我们在导入easyUI库后,可以直接复制粘贴里面的代码,从而简单轻便地初步设置网页. 首先导入easyUI函数库: <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
-
jQuery EasyUI开发技巧总结
jQuery EasyUI开发技巧总结 1.使用tabs时,如果使用的不是url,而是content,则要嵌入iframe addTab({ title:node.text, closeable:true, content:'<iframe src="'+url+'" frameborder="0" style="border:0;width:100%;height:99%"></iframe> }); 1)外部调用ifr
-
jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,zTree是国内的大牛们搞的一个jquery树形tree插件,感觉很好用,很强大,而且完全免费,API等做的也非常不错.推荐 easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyu
-
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
书写jQuery EasyUI Tab 样例时,如果刷新前面的Tab 选项卡,某一个Tab 选项卡里面的页面布局变乱.如下面图片所示: 刚开始打开时页面布局正确: 此时我们在第二个选项卡里面,点击第一个页面的刷新按钮,一直刷新,然后切换回来再看看页面,如下图: 但是首页选项卡的页面是正常的. 为了便于解释说明,这里用第一个选项卡代表 "首页",第二个选项卡代表"子菜单10" 出现这种情况的问题根本原因在于,你在第二个选项卡里面,点击其它第一个选项卡刷新按钮时,其实刷
-
jQuery EasyUI 页面加载等待及页面等待层
下面一个代码片段是 easyUI 页面加载等待,代码如下所示: function ajaxLoading() { var id = "#textboxDiv"; var left = ($(window).outerWidth(true) - 190) / 2; var top = ($(window).height() - 35) / 2; var height = $(window).height() * 2; $("<div class=\"datagr
-
Jquery EasyUI的添加，修改，删除，查询等基本操作介绍
初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套前台控件,于是在网上找了一些参考示例.写了一些基本的增删改查功能,算是对该控件的基本入门.后续有时间继续深入学习. 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1.列表展示 2.新增页面 3.修改页面 把jquery easyui下载好之后,一般引用下页几