easyui高级控件02

今天写了一个案例easyui高级控件

1、优势就是前后端分离
美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json
前后端分离可以节省时间提高效率。

案例：增删查改

思路：
1、datagrid布局

$(function(){
	$('#dg').datagrid({    
	    url:$("#ctx").val()+'/userAction.action?methodName=list',   
	    fitColumns:true,
	    fit:true,
	    pagination:true,
	    columns:[[    
	        {field:'uid',title:'代码',width:100,align:'center'},    
	        {field:'uname',title:'名称',width:100,align:'center'},    
	        {field:'upwd',title:'价格',width:100,align:'center'}    
	    ]] ,
	    toolbar: [{
			iconCls: 'icon-edit',
			handler: function(){
				var row = $('#dg').datagrid('getSelected');
				if(row!=null){
					$("#tt").val('edit');
				$('#ff').form('load',row); 
				$('#dd').dialog('open');
				}
			}
		},'-',{
			iconCls: 'icon-add',
			handler: function(){
					 $("#tt").val('add');
					$('#ff').form('clear'); 
					$('#dd').dialog('open');
				}
				
			
		},'-',{
			iconCls: 'icon-remove',
			handler: function(){
				var row = $('#dg').datagrid('getSelected');
				if(row!=null){
					$('#ff').form('load',row); 
					$("#tt").val('del');
					ok();
				}
			}
		}]
		
		
	});  

})
function ok(){
	$('#ff').form('submit', {    
		 url:$("#ctx").val()+'/userAction.action?methodName='+$("#tt").val(),           
	    success: function(param){  
	    	
	    	$('#dd').dialog('close');
	    	$('#dg').datagrid('reload');
	    	$('#ff').form('clear');
	    	alert(param);
	    	
	    }    
	});  
	

}

2、dialog布局
通过已存在的DOM节点元素标签创建。下面的例子显示了一个可变大小的模式窗口。

代码如下：

<div id="dd" class="easyui-dialog" title="编辑窗体" style="width:400px;height:200px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">
</div>