EasyUI学习笔记

来源：互联网发布：期货软件怎么用编辑：程序博客网时间：2024/05/16 15:45

easyUI笔记

easyUI介绍

什么是 jQuery EasyUI
jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。
easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
easyui 非常简单，但是功能非常强大。

easyUI快速入门

easyui-resizable展示可变拖动变化效果

导入easyUI

复制easyUI到项目静态资源下即可

引入easyUI

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><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.min.js"></script><script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script></head>

使用 easyui-resizable

<div style="width: 100px;height: 200px;background-color: red;" class="easyui-resizable"></div>

为resizable控件添加属性-html

data-options="maxWidth:400,maxHeight:400"

js中设置resizable中的属性

$("div").resizable({        maxWidth: 400,        maxHeight: 400,        minWidth: 10,        minHeight: 10,        edge: 30});

设置easyUI的事件

$("div").resizable({        onStartResize: function() {            $("span").html("开始改变大小了");        },        onStopResize: function() {            $("span").html("停止改变大小了");        },        onResize: function() {            $("span").html("大小在一直改变");        }});

设置easyUI的方法

$("#bt1").click(function(){        $("div").resizable("disable");    });    $("#bt2").click(function(){        $("div").resizable("enable");});

快速入门总结：
- 对于easyUI中两个属性以，隔开
- 大小不写单位
- 键值对以 key:value形式进行书写
- 事件调用该class类型，执行事件

LinkButton

效果演示

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">提交</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no'">删除</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">剪切</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">帮助</a>

js中设置按钮

$("#a").linkbutton({    iconCls: 'icon-search'});

禁用和启用按钮（调用按钮中方法）

$("#a1").click(function(){    $("#a").linkbutton("disable");});$("#a1").click(function(){    $("#a").linkbutton("enable");});

ProgressBar 进度条

效果展示

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

js代码操作

$("#p").progressbar({    width:700,    height:23,    value: 60,    text: "正在下载中"});

动态修改进度

var progress = 0;var interval;$(function() {    //点击下载按钮开始下载    $("#download").click(function() {        //启动定时任务        interval = window.setInterval(download, 50);    });    function download() {        //设置progressbar的value值        $("#p").progressbar("setValue", progress++)    }    $("#p").progressbar({        onChange: function(value) {            //当value值==100时，还原            if(value == 100) {                $("#p").progressbar("setValue", 0)                window.clearInterval(interval);                alert("下载成功");            }        }    });})

Panel（面板）

效果演示

    <div style="height:150px;width:300px;"     title="标题文件" class="easyui-panel">文本内容</div>

panel属性展示

$(function() {    $("#myId").panel({        width: 300,        height: 200,        title: '我是标题',        collapsible: true,        minimizable: true,        maximizable: true,        closable: true,        href: 'http://www.baidu.com',        loadingMessage: '伦家正在努力加载'    });    //用程序设置id为myId的DOM节点的定位方式为绝对定位--如果不设置，没有效果      $("#myId").panel("panel").css("position", "absolute");});

自定义效果演示

$("#myId2").panel({        width: 300,        height: 200,        title: '我是标题',        href: 'http://www.baidu.com',        loadingMessage: '伦家正在努力加载',        tools: [{            iconCls: 'icon-add',            handler: function() {                alert("添加");            }        }, {            iconCls: 'icon-remove',            handler: function() {                alert("移除");            }        }, {            iconCls: 'icon-edit',            handler: function() {                alert("编辑");            }        }]    });

Window效果

效果演示

<div id="win"></div>$('#win').window({    width:600,    height:400,    modal:true   });

window方法测试

$("#hcenter").click(function() {        $("#win").window("hcenter");    });    $("#vcenter").click(function() {        $("#win").window("vcenter");    });    $("#center").click(function() {        $("#win").window("center");    });    $("#open").click(function() {        $("#win").window("open");    });    $("#close").click(function() {        $("#win").window("close");});

Messager（消息窗口）

消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

效果演示
警告框
```
$.messager.alert
```
确认输入框
```
$.messager.confirm
```
输入框
```
$.messager.prompt
```
广告框
```
$.messager.show
```

进度条框

基本效果展示

$.messager.progress({            text: "正在下载",            interval: 2000,            title: "下载框"});

获取进度条对象 bar

var progressbar = $.messager.progress("bar");

案例：当进度到100时，让进度条框消失

$("#bt1").click(function() {    $.messager.progress({        interval: 1000,        title: "下载框"    });    var p = $.messager.progress("bar");    p.progressbar({        onChange: function(value) {            if(value == 100) {                $.messager.progress("close");            }        }    });});

Dialog（对话框窗口）

js效果演示

$("#dd").dialog({    title: "员工管理系统",    collapsible: true,    minimizable: true,    content: "我是管理内容",    maximizable: true,    toolbar: [{        text: "添加",        iconCls: "icon-add",        handler: function() {            $("#dd").append("哈哈哈");        }    }, {        text: "删除",        iconCls: "icon-remove",        handler: function() {            alert("删除");        }    }]});

Tabs（选项卡）

选项卡效果演示

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">    <div title="Tab1" style="padding:20px;display:none;">        tab1    </div>    <div title="Tab2" style="overflow:auto;padding:20px;display:none;">        tab2    </div>    <div title="Tab3" style="padding:20px;display:none;">        tab3    </div></div>

监听选项卡选中

$('#tt').tabs({    border:false,    onSelect:function(title){        alert(title+' is selected');    }    });

添加操作按钮

$('#tt').tabs({    tools: [{        iconCls: 'icon-add',        handler: function() {            alert('添加')        }    }, {        iconCls: 'icon-save',        handler: function() {            alert('保存')        }    }]});

选中某个选项卡

$("#bt1").click(function() {        $("#tt").tabs("select",1);});

添加选项卡

$('#tt').tabs('add',{        title:'New Tab',        content:'Tab Body',        closable:true,        tools:[{            iconCls:'icon-mini-refresh',            handler:function(){                alert('refresh');            }        }]    });

添加选项卡并作为网页打开

function createStr(url) {var str = '<iframe style="width:100%;height:100%;" frameborder="no" src="'        + url + '"></iframe>';//alert(str);return str;}

判断某个标签是否存在，如果存在，不再叠加

var exists = $("#dd").tabs("exists", node.text);        if (!exists) {            $('#dd').tabs('add', {                title : node.text,                content : createStr(node.url),                closable : true            });        } else {            //选中当前选项卡            $("#dd").tabs("select", node.text);    }

代码扩展：tabs轮播效果

<div id="tt" class="easyui-tabs" style="width:330px;height:270px;">    <div title="新闻" style="padding:20px;">        <img src="aa.jpg" width="250px" height="200px">    </div>    <div title="娱乐" style="padding:20px;">        <img src="ab.jpg" width="250px" height="200px">    </div>    <div title="八卦" style="padding:20px;">        <img src="ae.jpg" width="250px" height="200px">    </div>    <div title="军事" style="padding:20px;">        <img src="ah.jpg" width="250px" height="200px">    </div></div>

$(function() {    var index = 0;    var t = $('#tt');    var tabs = t.tabs('tabs');    setInterval(function() {        t.tabs('select', index);        index++;        if(index >= tabs.length) {            index = 0;        }    }, 2000);})

Layout（布局）重点

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">        <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>    </div>

accordion

    <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">           <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">               <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="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">               content2            </div>           <div title="Title3">               content3            </div>       </div>

* 代码回顾

form表单

表单校验

设置提示信息为中文效果

    <script type="text/javascript"     src="../easyui/locale/easyui-lang-zh_CN.js">    </script>

校验
- 普通校验
- 两次密码校验
- 自定义规则校验
- 校验属性
表单提交
- 异步提交
- 表单字段加载

自定义下拉列表

定义input框
定义下拉效果

Java
C#
Ruby
Basic
Fortran

添加下拉列表

$(function() {        $('#cc').combo({            required: true,            multiple: true        });        $('#sp').appendTo($('#cc').combo('panel'));        $("div > input").click(function() {            var value=$(this).val();            var name=$(this).next("span").text();            $("#cc").combo("setValue",value);            $("#cc").combo("setText",name);            $("#cc").combo("hidePanel");        });})

下拉列表框
- 普通类型
  
  aitem1
  bitem2
  bitem3
  ditem4
  eitem5
- 加载json类型

数值输入框

<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input>

时间日期输入框

<input id="dd" type="text" class="easyui-datebox" required="required"></input>

微调

<input id="ss" class="easyui-numberspinner" style="width:80px;"   required="required" data-options="min:10,max:100,editable:false">

DataGrid（数据表格）

基本代码示例
编码名称价格 001name12323 002name24612

通过tab标签创建，并加载Json信息

<table class="easyui-datagrid" style="width:400px;height:250px"       data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   <thead>       <tr>           <th data-options="field:'code',width:100">编码</th>           <th data-options="field:'name',width:100">名称</th>           <th data-options="field:'price',width:100,align:'right'">价格</th>       </tr>   </thead>   </table>

通过js加载json中数据

<table id="dg"></table>$('#dg').datagrid({    url:'datagrid_data.json',   method:"get", columns:[[        {field:'code',title:'Code',width:100},        {field:'name',title:'Name',width:100},        {field:'price',title:'Price',width:100,align:'right'}    ]]    });

加载数据

加载和显示第一页的所有行，code和name为请求参数$('#dg').datagrid('load',{    code: '01',    name: 'name01'});

重新加载行
```
$('#dg').datagrid('reload'); 
```

案例：展示学生列表信息

界面整体展示

$('#dg').datagrid({url : "${pageContext.request.contextPath}/selectAllUser.action",fitColumns : true,fit : false,autoRowHeight : true,pagination : true,rownumbers : true,pageSize : 2,showFooter : true,pageList : [ 2, 4, 6, 8 ],toolbar : [ {    iconCls : 'icon-add',    handler : function() {        addUser();    }}, '-', {    iconCls : 'icon-remove',    handler : function() {        deleteUser();    }}, '-', {    iconCls : 'icon-edit',    handler : function() {        editUser();    }} ],columns : [ [ {    field : 'id',    checkbox : true,    title : '删除',    width : 100}, {    field : 'username',    title : '用户名',    width : 100}, {    field : 'sex',    title : '性别',    width : 100}, {    field : 'email',    title : '邮箱',    width : 100}, {    title : '图片',    field : 'image',    width : 100,    align : 'center',    formatter : function(value, row, index) {        return '<img src=/img/'+row.image+' width="100px" height="100px" >';    }}, {    title : '操作',    field : 'xxxxx',    width : 100,    align : 'center',    formatter : function(value, row, index) {        return '<a id="a" href='+row.id+' class="easyui-linkbutton" data-options="iconCls:"icon-remove""></a>';    }} ] ]

});

添加弹框

<div id="dd" class="easyui-dialog" title="My Dialog"    style="width: 400px; height: 200px;"data-options="iconCls:'icon-save',resizable:true,modal:true"><form action="" id="ff">    <table cellpadding="5">        <tr>            <th>姓名 </th>            <th><input style="width: 150px;" id="username"                class="easyui-textbox"                data-options="tipPosition:'top',required:true,validType:'length[0,4]'" /></th>        </tr>        <tr>            <th>邮箱</th>            <th><input style="width: 150px;" id="email"                class="easyui-textbox"                data-options="tipPosition:'top',required:true,validType:'email'" /></th>        </tr>        <tr>            <th>性别</th>            <th><input style="width: 150px;" id="sex"                class="easyui-textbox"                data-options="required:true,validType:'maxLength[4]'" /></th>        </tr>        <tr>            <th>出生日期</th>            <th><input style="width: 150px;" id="cpwd"                class="easyui-datebox" required="required"                validType="equals['#pwd']" /></th>        </tr>    </table>    </>

添加图片效果

formatter : function(value, row, index) {            return '<img src=/img/'+row.image+' width="100px" height="100px" >';}

高度自适应
```
fit false
```

批量删除

var selections = $("#dg").datagrid("getSelections");var path="${pageContext.request.contextPath}/deleteUserPatch.action?";var ids="";if(selections!=null&&selections.length>0){$.each(selections,function(index){                if(index==0){                ids=ids+"ids="+this.id;                }else{                ids=ids+"&ids="+this.id;                }})}var url=path+ids;$.get(url,function(data) {$("#dg").datagrid("reload");});

Tree

tree加载过程

$(function() {// 通过js渲染tree组件$("#nav").tree({    url : '${pageContext.request.contextPath}/getTree.action',    lines : true,    onLoadSuccess : function(node, data) {        if (data) {            // 遍历获取的节点            $(data).each(function() {                // 判断对象的state是否为closed                if (this.state == 'closed') {                    // 整个tree展开                    $("#nav").tree('expandAll');                }            });        }    }});

监听打开事件，当打开按钮时

$('#nav')        .tree(                {                    onClick : function(node) {                        // 判断触发条件，node的url参数不为空                        if (node.url) {                            alert(node.url);                            if ($("#tabs").tabs('exists', node.text)) { // 判断tab是否存在                                // 选中tab                                $("#tabs").tabs('select', node.text);                            } else { // 若不存在，添加tab                                $("#tabs")                                        .tabs(                                                'add',                                                {                                                    title : node.text,                                                    href : '${pageContext.request.contextPath}/2_datagrid/datagird.jsp',                                                    iconCls : node.iconCls,                                                    closable : true,                                                });                            }                        }                    }                });

设置iframe标签

function createStr(url) {        var str = '<iframe style="width:100%;height:100%;" frameborder="no" src="'                + url + '"></iframe>';        //alert(str);        return str;    }

阅读全文

0 0

EasyUI学习笔记

easyUI笔记

easyUI介绍

easyUI快速入门

LinkButton

ProgressBar 进度条

Panel（面板）

Window效果

Messager（消息窗口）

Dialog（对话框窗口）

Tabs（选项卡）

Layout（布局） 重点

accordion

form表单

表单校验

自定义下拉列表

DataGrid（数据表格）

案例：展示学生列表信息

Tree

Layout（布局）重点