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 相关文章推荐
jquery仿微信聊天界面
May 06 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
超级强大的表单验证
2006/06/26 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
python构造IP报文实例
2020/05/05 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
学校司机岗位职责
2013/11/14 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
建议书格式
2015/02/04 职场文书
2016年教师新年寄语
2015/08/18 职场文书
创业计划书之餐饮
2019/09/02 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏