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' });