easyui高级控件（增修删）

easyui高级控件

目标：
easyui的crud（dialog，datagrid、form讲解）
1、Datagrid（数据表格）布局
2、dialog布局
3、form布局
4、通用的JsonBaseDao增删改方法
5、dao层
6、web层
7、功能完善

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

1、首先需要在API中找到datagrid数据库表格

放入jsp页面

<table id="dg"></table>

放入js里面的架构

$('#dg').datagrid({    
    url:'datagrid_data1.json',    
    columns:[[    
        {field:'code',title:'代码',width:100},    
        {field:'name',title:'名称',width:100},    
        {field:'price',title:'价格',width:100,align:'right'}    
    ]]    
});  

项目 图片

2、代码展示 前台代码

userManage.js

var geturl = $('#url').val();
$(function() {
	$('#dg').datagrid({    
		//最好用全路径名 
	    url:'../userAction.action?methodName=list', //数据来源   
	    pagination:'true',//底部分页工具类
	    fitColumns:'true',//自适应页面宽度
	    columns:[[    
	        {field:'uid',title:'id',width:100},    
	        {field:'uname',title:'名称',width:100},    
	        {field:'upwd',title:'密码',width:100,align:'right'},
	        {field:'SerialNo',title:'SerialNo',width:100,align:'right'} 
	        
	    ]],
	    toolbar: [{//顶部工具栏的DataGrid面板
	    	iconCls: 'icon-add',//图标样式
			handler: function(){//执行内容 新增
				$('#ff').form('clear');//清空表单
				$('#dd').dialog('open');//打开窗体
				}
		},'-',{
			iconCls: 'icon-edit',
			handler: function(){//修改
				$('#dd').dialog('open');//打开窗体
				//通过form控件直接回填选中的数据
				//getSelected 返回第一个被选中的行或如果没有选中的行则返回null。
				//getSelections 返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。
				var row = $('#dg').datagrid('getSelected');
				if(row){
					$('#ff').form('load',row);
				}else{
					alert("请选中你要修改的行");
				}
				
				}
		},'-',{
			iconCls: 'icon-remove',
			handler: function(){//删除
				$('#deldd').dialog('open');//打开窗体
				var row = $('#dg').datagrid('getSelected');
				if(row){
					$('#delff').form('load',row);
				}else{
					alert("请选中你要删除的行");
				}
				}
		}]
		

	}); 
})

function ok() {//修改往后台
	var seturl = '../userAction.action?methodName=edit';
	var SerialNo = $('#SerialNo').val();
	alert($('#SerialNo').val())
	if(SerialNo == null || SerialNo == ""){
		seturl = '../userAction.action?methodName=add';
	}
	$('#ff').form('submit', { 
	    url:seturl,    
	    success:function(data){  
	    	//data 返回的数据 1代表成功，0代表失败，如果有业务逻辑需要处理的话，由前端完成
	    	//将json串转成json对象
	    	var res = eval('('+data+')');
	        if(res.code == 1){
	        	//成功
	        	$('#dd').dialog('close');//关闭窗体
	        	$('#dg').datagrid('reload');//刷新
	        }else{
	        	
	        }
	    }    
	}); 
}
function del() {//删除往后台
	
	$('#delff').form('submit', {    
	    url:'../userAction.action?methodName=del',    
	    success:function(data){  
	    	//data 返回的数据 1代表成功，0代表失败，如果有业务逻辑需要处理的话，由前端完成
	    	//将json串转成json对象
	    	var res = eval('('+data+')');