首页 > 代码库 > JQuery EasyUI学习笔记

JQuery EasyUI学习笔记

2024-09-13 22:26:07   215人阅读

转载请注明原文地址：http://www.cnblogs.com/ygj0930/p/6690888.html 

简介与准备

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

准备：下载：http://www.jeasyui.com/download/index.php

导入：

<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.mamicode.com/easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/easyui/jquery.easyui.min.js"></script>

使用插件：如使用EasyUI提供的面板：

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" iconCls="icon-save" collapsible="true">
    This is EasyUI！
</div>

 

一：拖动效果

$(选择元素).draggable();

二：菜单

创建菜单：一个div包含一个菜单项，div嵌套div就是子菜单，并列的div是同级的菜单项。

    <div id="mm" class="easyui-menu" style="width:120px;">//使用easyui-menu菜单插件创建菜单
        <div>New</div>
        <div>
            <span>Open</span>//包含子菜单
            <div style="width:150px;">
                <div>Word</div>
                <div>Excel</div>
                <div>PowerPoint</div>
            </div>
        </div>
        <div>Save</div>
        <div>Exit</div>
    </div>

显示与隐藏菜单：调用 ‘show‘ 方法显示或者调用 ‘hide‘ 方法隐藏，可以设置为右键事件show。

 

三：按钮

链接按钮：把普通的链接以按钮图标显示。

使用<a>标签创建链接，href属性为链接url，class 属性为‘easyui-linkbutton‘ ，iconCls属性为按钮图标，<a>标签之间值为按钮文本。

<a href="#" class="easyui-linkbutton" iconCls="icon_cancel">Cancel</a>

 

菜单按钮：点击该按钮时弹出一个下拉菜单。

定义一个<a>标签和一个菜单，href属性为连接url，class属性为"easyui-menubutton",iconCls属性为按钮图标，menu属性为菜单id，标签之间值为按钮文本。

<a href="#" class="easyui-menubutton" menu="#menu_help" iconCls="icon_help">Help</a>

 

分割按钮：与菜单按钮相似，不同的是，分割按钮被分割为两部分。当移动鼠标到分割按钮上时，将显示一条分割线。只有当移动鼠标在分割按钮的右侧部分时才显示菜单。

定义同菜单按钮，只不过class属性为easyui-splitbutton。

<a href="#" class="easyui-splitbutton" menu="#menu" iconCls="icon_edit">Edit</a>

 

四：网格

1：创建表格

表格插件：<table id="table" class="easyui-datagrid" style="">

表头：列的名称信息定义在 <thead> 标签之间，<tr>为一行，<th>标签间为列名， field属性指定列id。

表数据：定义在 <tbody> 标签中。<tr>为一行，<td>之间为一列值。

<table id="tt" class="easyui-datagrid" style="width:400px;height:auto;">
        <thead>//定义表头
            <tr>
                <th field="name1" width="50">Col 1</th>//列名
                <th field="name2" width="50">Col 2</th>
                <th field="name3" width="50">Col 3</th>
            </tr>                          
        </thead>                           
        <tbody>   //表内容                         
            <tr>                           
                <td>Data 1</td>            
                <td>Data 2</td>            
                <td>Data 3</td>                    
            </tr>                          
            <tr>                           
                <td>Data 1</td>            
                <td>Data 2</td>            
                <td>Data 3</td>                   
            </tr>                                               
        </tbody>                           
    </table>

2：获得表格选中行

var rows = $(‘#tableid‘).datagrid(‘getSelections‘);

3：添加工具栏 

定义一个工具类div并指定id，然后集成到网格中。

 <table id="tid" class="easyui-datagrid" style="width:600px;height:250px"，toolbar="#toolbarid">

4:格式化列数据

<th  formatter="formatfunction">列值</th>

定义一个formatfunction函数对列值的格式化显示，比如：红色字体，下划线。

5：设置按列值排序

<th field="列名" sortable="true">列值</th>

6：添加复选框

表头创建一列为复选框列即可：<th field="check_box" checkbox="true"></th>

7：分页显示

<table id="tid" class="easyui-datagrid" pagination="true">

设置 ‘pagination‘ 属性为 true，它将在数据网格的底部生成一个分页工具栏。pagination将发送两个参数到服务器：

  • page：页码，起始值 1。
  • rows：每页显示行。

8：属性表格

<table id="tid" class="easyui-propertygrid" style="width:300px" url="properties.json" showGroup="true" scrollbarSize="0"></table>

9：滚动条实现分页查询

 当滚动垂直滚动条时，数据网格（datagrid）执行 ajax 请求来加载和刷新现有的记录，整个刷新的行为过程平稳没有闪烁。

<table id="tid" class="easyui-datagrid" style="width:700px;height:300px" data-options="view:scrollview,rownumbers:true,singleSelect:true,

url:‘ajax.do‘,pageSize:50">

不需要使用 pagination 属性，而用pageSize 属性。滚动时执行 ajax 请求向url申请数据来显示。

 

 

五：树形菜单

1：创建树形菜单

树形菜单可以定义在 <ul> 元素中，设置class="easyui-tree"。一个 <li> 元素产生一个树节点，子 <ul> 元素将产生一子树菜单。

<ul class="easyui-tree">
        <li>
            <span>Folder</span>
            <ul>
                <li>
                    <span>Sub Folder 1</span>
                    <ul>//子树
                        <li><span>File 11</span></li>
                        <li><span>File 12</span></li>
                        <li><span>File 13</span></li>
                    </ul>
                </li>
                <li><span>File 2</span></li>
                <li><span>File 3</span></li>
            </ul>
        </li>
        <li><span>File21</span></li>
    </ul>

2：创建带复选框的树形菜单，可以从JSON文件提取数据根据层级转化成树形菜单

<ul id="tt" class="easyui-tree"
            url="tree_data.json"
            checkbox="true">//开启复选框功能
</ul>

3：创建树形网格

<table id="test" class="easyui-treegrid" style="width:400px;height:300px"
            url="tree_data.json"//从JSON文件加载树形菜单数据
            rownumbers="true"
            idField="id" treeField="name">
        <thead>//创建网格列头信息
            <tr>
                <th field="name" width="160">Name</th>
                <th field="size" width="60" align="right">Size</th>
                <th field="date" width="100">Modified Date</th>
            </tr>
        </thead>
    </table>

 

六：表单

 

：窗口

：布局

：EasyUI提供的插件们

JQuery EasyUI学习笔记


联系
我们