简单的应用,先把代码贴出来,后面有时间再整理
<script>
$().ready(function(){
$('#tree').tree({
url:'${ctx}/addressbook/addressgroup!tree.action',
onClick : function(node){addressbookTable(node.id);}
});
addressbookTable();
});
function addressbookTable(id){
if(id=='0') id = '';
grid=$('#addressbookTable').datagrid({
url:'${ctx}/addressbook/addressbook!datagrid.action',
title:'联系人资料',
queryParams:{id:id},
width:600,
height:350,
pagination:true,
singleSelect:true,
columns:[[
{field:'id',title:'id',width:80},
{field:'name',title:'姓名',width:80}
]],
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:newForm
},{
text:'Cut',
iconCls:'icon-cut',
handler:function(){
alert('cut');
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save');
}
}]
});
}
$('#btn-save,#btn-cancel').linkbutton();
win = $('#addressbook-window').window({
closed:true
});
form = win.find('form');
//crud
function newForm(){
win.window('open');
form.form('clear');
form.url = '${ctx}/addressbook/addressbook!easyuiSave.action';
}
function saveForm(){
form.form('submit', {
url:form.url,
success:function(data){
eval('data='+data);
if (data.success){
grid.datagrid('reload');
alert();
win.window('close');
} else {
$.messager.alert('错误',data.msg,'error');
}
}
});
}
function closeWindow(){
win.window('close');
}
</script>
<script type="text/javascript" charset="utf-8">
//日期控件
jQuery(function($){
$('#birthday').datepicker({
dateFormat: 'yy-mm-dd',//日期
yearRange: '1900:2099', //取值范围.
showOn: 'both', //输入框和图片按钮都可以使用日历控件。
buttonImage: '${ctx}/scripts/datepicker/calendar.gif', //日历控件的按钮
buttonImageOnly: true,
showButtonPanel: true
});
});
</script>
<div class="easyui-layout" fit="true">
<div region="west" split="true" title="通讯录分组" style="width:200px;padding1:1px;overflow:hidden;">
<div title="通讯录分组" selected="true" style="overflow:auto;padding:10px;">
<ul id="tree"></ul>
</div>
</div>
<div region="center" title="联系人" style="overflow:hidden;">
<table id="addressbookTable" ></table>
</div>
</div>
<div id="addressbook-window" title="新建联系人" style="width:400px;height:250px;">
<div style="padding:20px 20px 40px 80px;">
<form method="post">
<table>
<input type="hidden" name="groupId" value="1"/>
<tr>
<td>姓名:</td>
<td><input name="name"></input></td>
</tr>
<tr>
<td>电话:</td>
<td><input name="tel"></input></td>
</tr>
<tr >
<td >生日:</td>
<td><input type="text" id="birthday" name="birthday" readOnly="readOnly"/></td>
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" οnclick="saveForm()" id="btn-save" icon="icon-save">保存</a>
<a href="javascript:void(0)" οnclick="closeWindow()" id="btn-cancel" icon="icon-cancel">取消</a>
</div>
</div>