easyui第一天

 

简单的应用，先把代码贴出来，后面有时间再整理

<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)" onclick="saveForm()" id="btn-save" icon="icon-save">保存</a>
			<a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" icon="icon-cancel">取消</a>
		</div>
	</div>