easyUI详解 - 爱码网

1、EasyUI 是前端框架，封装大量 css和封装大量 JS

2、使用前端框架时，给标签定义class 属性，就会有样式和脚本功能了

3、data-options 属性是定义 easyui 属性的，如果 easyui 提供的属性和 html 标签属性相同,这个属性可以不写在 data-options 中

4、如果效果是静态的建议使用纯 html 标签方式，如果效果是动态建议使用 html 结合 js 方式

5、easyui 中所有脚本功能语法:

　　如果该效果(组件)是 abc,控制 abc 的语法

$(“jquery 选择器获取到 abc”).abc({
    属性名:值, 
    事件:function([参数]){}
})

6、如果该效果(组件)是 abc,控制 abc 方法的语法

$(“jquery 选择器获取到 abc”).abc(“方法名”);//调用方法
$(“jquery 选择器获取到 abc”).abc(“方法名”,”参数”);//调用方法

7、EasyUI 适用于后台管理界面,不适用于前台项目页面

8、优点:处理服务器传递过来的 json数据能力比较强，只要服务器传回固定格式的json数据，几乎不用写代码，效果就会呈现出来

注：能复制绝对不手写，html为弱规范，就算写错一个字母也不会报错

easyUI项目案例详解

一、登陆界面（login.jsp）

　　1、Panel（面板）　　通过纯 html 标签方式创建面板

<div id="p" class="easyui-panel" title="登录"     
            style="width:400px;height:200px;padding:10px;background:#fafafa;"   
            data-options="iconCls:\'myicon-login\'">   
                <form action="login" method="post" id="login_form">
                     <table width="225" align="center">
                         <tr>
                             <td colspan="2" style="text-align:center;font-size:20px; font-weight:bold">用户管理系统</td>
                         </tr>
                         <tr style="height:40px;">
                             <td>登录名</td>
                             <td><input type="text" name="username"/> </td>
                         </tr>
                         <tr style="height:40px;">
                             <td>
                                 密码
                             </td>
                             <td><input type="password" name="password"/> </td>
                         </tr>
                         <tr>
                             <td colspan="2" align="right">
                                 <a id="login_submit" href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-ok\'">登录</a> 
                             </td>
                         </tr>
                     </table>
                </form>
        </div>

　　2、LinkButton（按钮）

$(function(){ 
    $("#btn").click(function(){
        alert(\'easyui\');
    });
});

　　3、Form（表单）

$(\'#ff\').form(\'submit\', {    
    url:...,    
    onSubmit: function(){    
        
    },    
    success:function(data){    
        alert(data)    
    }    
});

　　4、Messager（消息窗口）

$.messager.alert(\'警告\',\'警告消息\');    
$.messager.confirm(\'确认\',\'您确认想要删除记录吗？\',function(r){    
    if (r){    
        alert(\'确认删除\');    
    }    
});

二、主界面（main.jsp）

　　1、Layout（布局）

<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、Tree（树）　　通过html 结合 js 方式创建树

<ul id="tt"></ul>

$(\'#tt\').tree({    
    url:\'tree_data.json\'   
});

　　树控件数据格式化

　　每个节点都具备以下属性：
　　　　id：节点ID，对加载远程数据很重要。
　　　　text：显示节点文本。
　　　　state：节点状态，\'open\' 或 \'closed\'，默认：\'open\'。如果为\'closed\'的时候，将不自动展开该节点。
　　　　checked：表示该节点是否被选中。
　　　　attributes: 被添加到节点的自定义属性。
　　　　children: 一个节点数组声明了若干节点。

　　点击树节点

$(\'#tt\').tree({
    onClick: function(node){
        alert(node.text);  // 在用户点击的时候提示
    }
});

　　3、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" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:\'icon-reload\',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>

//如果此标题在选项卡中不存在，则新增选项卡，否则选中此标题对应的选项卡
if($("#tt").tabs("getTab",title)==null){
    $(\'#tt\').tabs(\'add\',{
        title: \'新选项卡面板\',
        //是否选中选项卡
        selected: true,
        //是否可以关闭
        closable:true,
        href：……
    });
}else{
    $("#tt").tabs("select",title);
}

三、角色页面（role.jsp）

　　1、DataGrid（数据表格）

<table id="dg"></table>

$(\'#dg\').datagrid({    
    url:\'datagrid_data.json\',    
    columns:[[    
        {field:\'code\',title:\'Code\',width:100},    
        {field:\'name\',title:\'Name\',width:100},    
        {field:\'price\',title:\'Price\',width:100,align:\'right\'}    
    ]]    
});

　　数据表格控件数据格式化，分页时需要具备以下属性：

　　　　rows：当前页显示的数据

　　　　total：表中总个数

　　toolbar（定义工具栏）

$(\'#dg\').datagrid({
    toolbar: [{
        iconCls: \'icon-edit\',
        handler: function(){alert(\'编辑按钮\')}
    },\'-\',{
        iconCls: \'icon-help\',
        handler: function(){alert(\'帮助按钮\')}
    }]
});

　　2、Dialog（对话框窗口）

<div id="dd">Dialog Content.</div>

$(\'#dd\').dialog({    
    title: \'My Dialog\',    
    width: 400,    
    height: 200,    
    closed: false,    
    cache: false,    
    href: \'……\',    
    modal: true   
});

四、角色编辑页面（role_edit.jsp）

　　1、Form（表单）

$(\'#ff\').form(\'submit\', {    
    url:...,    
    onSubmit: function(){    
        // do some check    
        // return false to prevent submit;    
    },    
    success:function(data){    
        alert(data)    
    }    
});

　　2、Messager（消息窗口）

$.messager.show({
    title:\'我的消息\',
    msg:\'消息将在5秒后关闭。\',
    timeout:5000,
    showType:\'slide\'
});