JQuery EasyUI 结合ztrIee的后台页面开发实例


Posted in jQuery onSeptember 01, 2017

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 相关文章推荐
Angular2使用jQuery的方法教程
May 28 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 #jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 #jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 #jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 #jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 #jQuery
You might like
Search Engine Friendly的URL设计
2006/10/09 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python实现Dijkstra算法
2018/10/17 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
大学信息公开实施方案
2014/03/09 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL