easyUI插件与ztree插件

Jquery easyui 1.3.2

         easyui 主要组件

1、 Form 表单组件

2、 Grid 表格组件 table

3、 Layout 布局组件

4、 Menu and Button 菜单和按钮

5、 Window 窗体

6、 Tree 树形结构

 

使用easyUI步骤

    解压jquery-easyui-1.3.2.zip后将下列文件复制到项目中

       

         第一步 : 导入 jQuery、easyUI、所需css


    第二步 : 使用easyui 完成layout布局

Layout 页面布局 将页面分成五个部分 è 东西南北中  (中不能省略)
<body class="easyui-layout ">

    <divdata-options="region :'north',  title :'北 ', split :true" style ="height:100px;"></div>

布局过程中只有center区域是必须的,其它区域都可以省略

 

    第三步 : 在west区域中加入可折叠菜单

Accordion 可折叠菜单

<div data-options=”west”>

   <div fit =”true” class=” easyui-accordion ”>(需要再套一个div

                   <divtitle="第一部分"  style="overflow:auto; padding:0;">内容一</div>

             <div title="第二部分" data-options="iconCls:'icon-save' ">内容二</div>

</div> 

</div>

 

 

第四步:应用ztree插件完成可折叠菜单中的树形结构

    ztree为jQuery 第三方的树形结构插件

使用简单 json数据制作

1) 引入 zTree js文件和css文件


2) 使用ztree

    目标div 显示树结构,给定id用于获得div节点对象

        <div  id="mytree" class="ztree">

 

    Setting 配置信息

    var setting = {

           data : {

              key : {

                  title : "t"

              },

              simpleData  : {

                  enable : true

             }

           },

           callback : {

              onClick : onClick

           }

    Json 数据

    [{ id:11, pId:0, name:"基础档案", click:false  },

     {id:111, pId:11, name:"基础档案设置", t:"基础档案设置", page: "page_base_jichuda        ngan.action"},

     {id:112, pId:11, name:"收派标准" ,page:""},

     {id:113, pId:11, name:"取派员设置" ,page:""}]

    注:id就是元素id属性,pid是节点的父节点的id 属性, name 显示的内容,open节点是否可         以展开(如果是可以展开的必须是父节点),pId0就说明该节点是根节点,没有任何父节点

 

    为目标div应用树数据

    $.fn.zTree.init ($("#mytree"), setting, zNodes);

 

3)为树上每个节点注册一个onclick函数,函数有四个参数

    onClick(event,treeId, treeNode , clickFlag)

    在onclick函数中判断 if(treeNode.click!=false){触发叶子节点点击效果}

 

    第五步 : 点击左侧树,在右侧添加一个tab页面

       使用 easyUI的布局(layout)的tabs

<divclass="easyui-tabs " style="height:200px;" id="mytabs">

        <div title="标题一">tab1</div>

        <div title="标题二">tab2</div>

    </div>

    点击树形结构后添加新的tab

    $("#mytabs").tabs('add',{

                     title: '新tab的标题',

                     content: 'tab的内容'

    });

 

easyUI下拉菜单的使用

       

 

<!-- 横向菜单布局 -->

<div style="position: absolute; right: 5px;bottom: 10px; ">

    <a  href="javascript:void(0);" class="easyui-menubutton"

        data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>

    <ahref="javascript:void(0);" class="easyui-menubutton"

        data-options="menu:'#layout_north_kzmbMenu',iconCls:'icon-help'">控制面板</a>

</div>

<!-- 第一个按钮的下拉菜单 -->

<div id ="layout_north_pfMenu"style="width: 120px; display: none;">

    <div onclick ="changeTheme('default');">default</div>

    <divοnclick="changeTheme('gray');">gray</div>

    <divοnclick="changeTheme('black');">black</div>

    <divοnclick="changeTheme('bootstrap');">bootstrap</div>

    <divοnclick="changeTheme('metro');">metro</div>

</div>

<!-- 第二个按钮的下拉菜单 -->

<div id="layout_north_kzmbMenu" style="width:100px; display: none;">

    <divοnclick="editPassword();">修改密码</div>

    <divοnclick="showAbout();">联系管理员</div>

    <divclass="menu-sep"></div>

    <divοnclick="logoutFun();">退出系统</div>

</div>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值