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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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 fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
php验证码实现代码(3种)
2015/09/07 PHP
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Python 字符串池化的前提
2020/07/03 Python
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
战略合作意向书
2014/07/29 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
Python机器学习之底层实现KNN
2021/06/20 Python
python神经网络 使用Keras构建RNN训练
2022/05/04 Python
Linux中文件的基本属性介绍
2022/06/01 Servers
Redis Lua脚本实现ip限流示例
2022/07/15 Redis