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

 1、datagrid（数据表格）

数据表格是基于table标签的

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

1. $('#dg').datagrid({   
2.     url:'datagrid_data.json',   
3.     columns:[[   
4.         {field:'code',title:'代码',width:100},   
5.         {field:'name',title:'名称',width:100},   
6.         {field:'price',title:'价格',width:100,align:'right'}   
7.     ]] 
8. });  

数据  ‘datagrid_data.json’   可以是指定的 json文件，也可以是从后台传输过来的 json 对象。

（注：这个 json 的数据格式是有要求的，

{ “total”: count , "rows":[

            {"field1": value1 ,"field2": value2 ,"field3": value3 }，

            {"field1": value1 ,"field2": value2 ,"field3": value3 }，

            {"field1": value1 ,"field2": value2 ,"field3": value3 }

]}

）

2、Dialog（对话框窗口）

1. <div id="dd">Dialog Content.</div>  

使用Javascript创建对话框窗口也是允许的。我们创建一个模式窗口并调用'refresh'方法通过ajax读取内容。

1. $('#dd').dialog({   
2.     title: 'My Dialog',   
3.     width: 400,   
4.     height: 200,   
5.     closed: false,   
6.     cache: false,   
7.     href: 'get_content.php',   
8.     modal: true  
9. });   
10. $('#dd').dialog('refresh', 'new_content.php');  

3、Form（表单）

1. <form id="ff" method="post">  
2.     <div>  
3.         <label for="name">Name:</label>  
4.         <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />  
5.     </div>  
6.     <div>  
7.         <label for="email">Email:</label>  
8.         <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />  
9.     </div>  
10.     ...   
11. </form>  

使普通表单成为ajax提交方式的表单。

1. $('#ff').form({   
2.     url:...,   
3.     onSubmit: function(){   
4.         // do some check   
5.         // return false to prevent submit;   
6.     },   
7.     success:function(data){   
8.         alert(data)   
9.     }   
10. });   
11. // submit the form   
12. $('#ff').submit(); 

做一个提交操作。

1. $('#ff').form('submit', {   
2.     url:...,   
3.     onSubmit: function(){   
4.         // do some check   
5.         // return false to prevent submit;   
6.     },   
7.     success:function(data){   
8.         alert(data)   
9.     }   
10. });  

工具栏的添加（拿DataGrid举例）：

1. $('#dg').datagrid({   
2.     url:'datagrid_data.json',   
3.     columns:[[   
4.         {field:'code',title:'代码',width:100},   
5.         {field:'name',title:'名称',width:100},   
6.         {field:'price',title:'价格',width:100,align:'right'}   
7.     ]] ,
8.     toolbar:[{
9.          iconCls:'icon-edit',         // 此属性为工具栏按钮的样式
10.          handler: function(){alert('编辑按钮')}        // 此属性为点击该按钮触发的事件
11.     }],'-',[{
12.          iconCls:'icon-help',
13.          handler: function(){alert('帮助按钮')}
14.     }]
15. });  

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