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）