JQuery EasyUI学习笔记

2022-11-01 12:59:56

转载请注明原文地址：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="easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="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>

六：表单

1：Ajax表单

//创建普通表单

<form id="formid" action="servlet.do" method="post">

    <input type="submit" value="Submit"></input>

</form>

//为表单添加回调函数成为Ajax表单

$('#formid').form({

        success:function(data){

            //data为返回结果

        }

    });

2：表单验证

为input标签指定class="easyui-validatebox"验证插件，type=""指定输入数据类型即可。

<input class="easyui-validatebox" type="text" name="subject" required="true"></input>

七：窗口

1：普通窗口

创建一个div，指定class属性为easyui-window即可，div标签之间为窗口内容。

2：窗口的打开与隐藏

$('#win').window('open');

$('#win').window('close');

3：复杂窗口

Layout可以嵌套到窗口div中，从而构建复杂的窗口。

4：普通对话框

创建一个div，指定class属性为easyui-dialog即可，div标签之间为对话框内容，可以通过toolbar="#"属性自定义对话框的工具栏，buttons属性指定对话框按钮。

    <div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;"

            title="My Dialog" iconCls="icon-ok"

            toolbar="#dlg-toolbar" buttons="#dlg-buttons">

        Dialog Content.

    </div>

八：布局

1：边框布局

边框布局提供五个区域：east、west、north、south、center。

  • north 区域可以用来显示网站的标语。
  • south 区域可以用来显示版权以及一些说明。
  • west 区域可以用来显示导航菜单。
  • east 区域可以用来显示一些推广的项目。
  • center 区域可以用来显示主要的内容。

应用布局，只需要创建一个div指定class="easyui-layout"作为布局容器，然后内嵌套各区域即可。各个区域的创建：<div region="east、west、north、south、center">

2：标签面板：easyui-tabs

    <div class="easyui-tabs" style="width:400px;height:100px;">

       //一个div一个标签页

        <div title="First Tab" style="padding:10px;">

            First Tab

        </div>

        <div title="Second Tab" closable="true" style="padding:10px;">

            Second Tab

        </div>

        <div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">

            Third Tab

        </div>

    </div>
上一篇：su - oracle /bin/bash: Permission denied


下一篇：动软代码生成器 可用于生成Entity层，可更改模板 /codesmith 也可以