Easy-UI入門事例
12113 ワード
Easy-UIは、フロントロジックおよび表示をカプセル化Jquery技術に基づくフロントエンドフレームワークである.
Easy-UIの特徴 EasyUIは、javascript方式(例えば、$('#p')の2つのレンダリング方式をサポートする.panel({...})とhtmlタグ方式(class="easyui-panel") HTML 5(data-optionsプロパティ経由) をサポート
Easy-UI共通コンポーネント Base Layout Menu and Button Form Window DataGrid and Tree Extension
構文
ツールバーの
すべての属性はjQueryに定義されています.fn.{plugin}.defaultsの中.たとえば、ダイアログボックスのプロパティはjQuery.に定義されます.fn.dialog.defaultsの中.
≪イベント｜Events｜ldap≫
すべてのイベント(コールバック関数)もjQueryに定義する.fn.{plugin}.defaultsの中.
方法
呼び出し方法の構文:$(‘selector’).plugin(‘method’, parameter);
説明:selectorはjQeryオブジェクトセレクタです.pluginはプラグインの名前です.methodは、対応するプラグインの既存の方法です.parameterはパラメータオブジェクトであり、1つのオブジェクト、文字列などであってもよい.
開発手順ライブラリをダウンロードし、EasyUIのCSSおよびJavascriptファイル にインポートタグまたはJavascriptによってEasyUIコンポーネント を する.
トップページjsp
ユーザリストjsp(crud)
Easy-UIの特徴
Easy-UI共通コンポーネント
構文
ツールバーの
すべての属性はjQueryに定義されています.fn.{plugin}.defaultsの中.たとえば、ダイアログボックスのプロパティはjQuery.に定義されます.fn.dialog.defaultsの中.
≪イベント｜Events｜ldap≫
すべてのイベント(コールバック関数)もjQueryに定義する.fn.{plugin}.defaultsの中.
方法
呼び出し方法の構文:$(‘selector’).plugin(‘method’, parameter);
説明:selectorはjQeryオブジェクトセレクタです.pluginはプラグインの名前です.methodは、対応するプラグインの既存の方法です.parameterはパラメータオブジェクトであり、1つのオブジェクト、文字列などであってもよい.
開発手順
The panel content
トップページjsp
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
});
function addTab(title,url){
// ,
if ($('#tt').tabs('exists',title)){
//
$('#tt').tabs('select',title)
return ;
}
$('#tt').tabs('add',{
title:title,
content:"<iframe src='"+url+"' style='width:100%;height:100%' />",
closable:true,
});
}
!
ユーザリストjsp(crud)
$(function(){
$('#test').datagrid({
singleSelect:true,
title:' ',
iconCls:'icon-save',
nowrap: false,
striped: true,
collapsible:false,
url:'${pageContext.request.contextPath}/UserAction_list',//
sortName: 'id',//
sortOrder: 'asc',//
remoteSort: false,
idField:'id',
frozenColumns:[[ //
{field:'ck',checkbox:true}, //
{title:'id',field:'user_id',width:80,sortable:true}//
]],
columns:[[
{field:'user_code',title:' ',width:120},
{field:'user_name',title:' ',width:220,rowspan:2,sortable:false,},
]],
pagination:true,//
rownumbers:true,//
toolbar:[{
id:'btnadd',
text:' ',
iconCls:'icon-add',
handler:function(){
//
$('#ff').form('clear');
open1();
}
},{
id:'btncut',
text:' ',
iconCls:'icon-pencil',
handler:function(){
//
getSelected();
}
},{
id:'btnsave',
text:' ',
iconCls:'icon-cancel',
handler:function(){
//
var selected = $('#test').datagrid('getSelected');
// ,
if (!selected){
alert(" !");
return;
}else {
alert(" !");
}
// ajax
// ,
$.post("${pageContext.request.contextPath}/UserAction_list",
{ user_id: selected.user_id },
function(data){
alert(" !");
});
//
$('#test').datagrid('reload');
}
}]
});
var p = $('#test').datagrid('getPager');
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
});
function resize(){
$('#w').window({
title: 'New Title',
width: 600,
modal: true,
shadow: false,
closed: false,
height: 300
});
}
function open1(){
$('#w').window('open');
}
function close1(){
$('#w').window('close');
}
// ajax
$('#ff').form({
url:'${pageContext.request.contextPath}/UserAction_regist',
onSubmit:function(){return true},
success: function(data){
alert(data);
//
$('#w').window('clear');
//
close1();
//
$('#test').datagrid('reload');
}
});
//
function submitForm() {
$('#ff').submit();
}
//
function getSelected(){
var selected = $('#test').datagrid('getSelected');
if (selected){//
// alert(selected.user_id+":"+selected.user_name+":"+selected.user_code);
//
$('#ff').form('load',{
user_id:selected.user_id,
user_name:selected.user_name,
user_code:selected.user_code,
});
//
open1();
}else {
alert(" !");
}
}
- layout
- ， ， 。 API
- 5 ： 、 、 、 。 ， 。 ， 。
- accodion
1. ， ajax
2. ， 。 。 。 ’href’ ajax 。 ， ， 。
- tabs
1. tabs ， ， ， ， 。
2. 。 。 ， 。
- datagride
1.
2.DataGrid ， 、 、 。 、 、 。
- window
1. ， 。
2. 。 , , 。 html ajax 。
- form
1.
2.form ， ：ajax , load, clear 。 validate 。
3. ajax 。
$('#ff').form({
url:...,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
// submit the form
$('#ff').submit();
ユーザーの をラジオ に
datagridでcheckboxを つけsingleSelectプロパティをtrueに した を
DatagridのgetSelectedメソッドを び すと、 に された が されるか、 されていない がnullが されます.
すべきデータを する fromでloadメソッドの が つかりました: み りレコードがフォームに め まれます.データ・パラメータは、 またはオブジェクト・タイプ、 の はリモート・URL、それ の はローカル・レコードとして できます.
ユーザーの を
DatagridのgetSelectedメソッドを び すと、 に された が されるか、 されていない がnullが されます. ajax を クライアント を する. 、リスト をリフレッシュする.
Datagridのreloadメソッドを び します.「load」メソッドと ですが、 のページに されます.