EasyUI前后端分离

陈旧的开发模式

美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。

Vs

前后端分离

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

我们进行操作所需的表格

easyui的crud（dialog，datagrid、form讲解）

1、datagrid布局
jsp

<!-- 展示数据 -->
<table id="dg"></table> 

js

$('#dg').datagrid({    
    url:'datagrid_data1.json',    
        fit:true,//行填充
	    fitColumns:true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
	    pagination:true,//如果为true，则在DataGrid控件底部显示分页工具栏。
	    singleSelect:true,//如果为true，则只允许选择一行
    columns:[[    
          {field:'uid',title:'ID',width:100},    
	      {field:'uname',title:'用户名',width:100},    
	      {field:'upwd',title:'密码',width:100,align:'right'}       
    ]]    
}); 

2、dialog布局

<!-- 弹窗 -->
<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'">  

toolbar: [{
			iconCls: 'icon-add',
			handler: function(){
				$('#dd').dialog('open')
			}
		},'-',{
			iconCls: 'icon-edit',
			handler: function(){
				$('#dd').dialog('open&#