JQueryEasyUI学习简单Demo

一.Layout布局

声明：此文档参考了jQuery EasyUI官方文档

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

1.通过以下代码可以构建下图的效果：

aaarticlea/png;base64,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" alt="" width="419" height="209" />

<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>  

2.折叠布局面板

 //获得id=‘cc’的布局面板
 $('#cc').layout();
 // collapse the west panel
 //coolapse表示折叠布局方法，west表示那个方向的面板
 $('#cc').layout('collapse','west');  

3.布局属性

fit属性：如果设置为true，布局组件将自适应父容器。当使用'body'标签创建布局的时候，整个页面会自动最大。默认false

4.区域面板属性

5.用tree的形式布局west区域的菜单

代码如下：

 <ul id="tt" class="easyui-tree">
     <li>
         <span>Folder</span>
         <ul>
            <li>
                         <span>部门管理</span>
                         <ul>
                             <li>
                                 <span><a href="#" onclick="doclickMenu('deplist.jsp','部门列表')">部门列表</a></span>
                             </li>
                             <li>
                                  <span><a href="#" onclick="doclickMenu('depadd.jsp','部门添加')">部门添加</a></span>
                             </li>
                             <li>
                                 <span><a href="#">部门审核</a></span>
                             </li>
                             <li>
                                 <span><a href="#">部门统计</a></span>
                             </li>
                         </ul>
                     </li>
                     <li>
                         <span>员工管理</span>
                         <ul>
                             <li>
                                 <span><a href="#">员工列表</a></span>
                             </li>
                             <li>
                                  <span><a href="#">员工添加</a></span>
                             </li>
                             <li>
                                 <span><a href="#">今日打卡</a></span>
                             </li>
                             <li>
                                 <span><a href="#">个人统计</a></span>
                             </li>
                         </ul>
                     </li>
                     <li>
                         <span>邮箱管理</span>
                         <ul>
                             <li>
                                 <span><a href="#">邮件列表</a></span>
                             </li>
                             <li>
                                  <span><a href="#">编写邮件</a></span>
                             </li>
                             <li>
                                 <span><a href="#">接收邮件</a></span>
                             </li>
                             <li>
                                 <span><a href="#">垃圾箱</a></span>
                             </li>
                         </ul>
                     </li>
                     <li>
                         <span>请假管理</span>
                         <ul>
                             <li>
                                 <span><a href="#">请假列表</a></span>
                             </li>
                             <li>
                                  <span><a href="#">请假申请</a></span>
                             </li>
                             <li>
                                 <span><a href="#">请假审核</a></span>
                             </li>
                             <li>
                                 <span><a href="#">请假统计</a></span>
                             </li>
                         </ul>
                     </li>
         </ul>
     </li>
     <li>
         <span>File21</span>
     </li>
 </ul>  

6.选项卡如下图：

代码如下：

 /********点击west区域的菜单栏，在center区域添加新标签******/
          function doclickMenu(surl, title) {
              //判断选项卡是否选中
              if($('#tt1').tabs('exists',title)) {
                  $('#tt1').tabs('select',title);//选中title这个选项卡
              } else {

                  $('#tt1').tabs('add',{
                                 title:title,
                                 content:'<iframe id="myfrm" src="'+surl+'" frameborder="0" height="100%" width="100%" scrolling="no" marginheight="0" marginwidth="0"></iframe>',    

                 });
             }
          }

  <li>
 ----------------------------------------------------------------------------------
 <span><a href="#" onclick="doclickMenu('deplist.jsp','部门列表')">部门列表 </a></span>
  </li>  

 ---------------------------------------------------------------------------------
 <div id="tt1" class="easyui-tabs" fit='true' style="width:500px;height:250px;">   

 </div> 

7.datagrid（数据表格树）

如下图：

代码：

 <link rel="stylesheet" href="easyui/themes/default/easyui.css"
     type="text/css"></link>
 <link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
 <script type="text/javascript" src="easyui/jquery-1.9.1.js"></script>
 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
 <script>
     $(function() {

         var data = [
                         {'sid':'1','uname':'张飞','sex':'男','address':'西安','birthday':'1990-01-01'},
                         {'sid':'2','uname':'关羽','sex':'男','address':'西安','birthday':'1990-01-01'},
                         {'sid':'3','uname':'魏延','sex':'男','address':'西安','birthday':'1990-01-01'},
                         {'sid':'4','uname':'赵云','sex':'男','address':'西安','birthday':'1990-01-01'},
                         {'sid':'5','uname':'黄忠','sex':'男','address':'西安','birthday':'1990-01-01'}
                     ];

         $("#tt").datagrid({
              data:data, //设置json格式数据
              width:'fit',  //设置面板宽度为父容器的宽度
              singleSelect:true, //这允许选中一行
              pagination:true,//如果为true，则在DataGrid控件底部显示分页工具栏
              pageList:[5,10,15,20],//在设置分页属性的时候 初始化页面大小选择列表
              pageSize:5,//在设置分页属性的时候初始化页面大小
              loadMsg:'正在加载数据...',
              columns:[[
                         {field:'sid',title:'编号',width:100,checkbox:true},
                         {field:'uname',title:'姓名',width:100},
                         {field:'sex',title:'性别',width:100,align:'right'},
                         {field:'address',title:'地址',width:100,align:'right'},
                         {field:'birthday',title:'生日',width:100,align:'right'},
                         {field:'option',title:'操作',width:100,align:'right',
                             formatter:function(value,row,index){
                                 return '<input type="button" name="button" id="button" value="删除" onclick="doDel('+ row.sid +')"/><input type="button" name="button" id="button" value="更新" />';
                             }}

                     ]]
         });

     });
     //删除
     function doDel(sid) {
         alert(sid);
     }
 </script>
 </head>

 <body>
     部门列表
     <table id="tt">

     </table>

 </body>

说明：formatter是datagrid的列属性，用法：

 $('#dg').datagrid({
     columns:[[
         {field:'userId',title:'User', width:80,
             formatter: function(value,row,index){
                 if (row.user){
                     return row.user.name;
                 } else {
                     return value;
                 }
             }
         }
     ]]
 });