首先引入相應的css 和jq 指令碼

 <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="css/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="jq/jquery.min.js" type="text/javascript"></script>
    <script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
 

然後建立一個table 標籤 實際上就是為這個table 標籤的class屬性賦值為
class=“easyui-datagrid” 此方法以類的模式建立

<table id="dg" class="easyui-datagrid" title="新聞資訊管理" style="width:700px;height:250px"
			data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',
			method:'get',toolbar:toolbar,remoteSort:true,
			rownumbers:true,
			multiSort:true,rownumbers:true,
           onLoadSuccess:function(){
           
           $(this).datagrid('freezeRow',0).datagrid('freezeRow',1);//此句程式碼表示凍結了 第一行與第二行 
          }
">
		<thead>
			<tr>
				<th data-options="field:'itemid',resizable:false,width:80,sortable:true,formatter:formatPrice">Item ID</th>
				<th data-options="field:'productid',resizable:true,width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
	<script type="text/javascript">
		var toolbar = [{
			text:'Add',\\按鈕顯示的文字
			iconCls:'icon-add',\\按鈕的圖示
			handler:function(){alert('add')}\\點選當前按鈕觸發的事件
		},{
			text:'Cut',
			iconCls:'icon-cut',
			handler:function(){alert('cut')}
		},'-',{
			text:'Save',
			iconCls:'icon-save',
			handler:function(){alert('save')}
		}];
		 function formatPrice(val, row) {
            if (val < 30) {
                return '<span style="color:red;">(' + val + ')</span>';
            } else {
                return val;
            }
        }
	</script>
 

還可以通過寫jquery 的形式 建立

    <script type="text/javascript">
        $(function () {
//            $('#dg').datagrid({
//                url: 'datagrid_data1.json',
//                method: 'get',
//                title: 'Context Menu on DataGrid',
//                iconCls: 'icon-save',
//                width: 700,
//                height: 250,
//                fitColumns: true,
//                singleSelect: true,
//                toolbar:[{
			text:'Add',\\按鈕顯示的文字
			iconCls:'icon-add',\\按鈕的圖示
			handler:function(){alert('add')}\\點選當前按鈕觸發的事件
		},{
			text:'Cut',
			iconCls:'icon-cut',
			handler:function(){alert('cut')}
		},'-',{
			text:'Save',
			iconCls:'icon-save',
			handler:function(){alert('save')}
		}],
		         pagination:true
//                pageNumber	:1,
//                pageSize	:5,
//              pageList:[5],
//                columns: [[
//如何要向後臺請求資料的話 fileld欄位名必須和後臺 序列化後的鍵的名稱一致
//					{ field: 'itemid', title: 'Item ID', width: 80 },
//					{ field: 'productid', title: 'Product ID', width: 120 },
//					{ field: 'listprice', title: 'List Price', width: 80, align: 'right' },
//					{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
//					{ field: 'attr1', title: 'Attribute', width: 250 },
//					{ field: 'status', title: 'Status', width: 60, align: 'center' }
//				]],
//             rowStyler: function(index,row){
					if (row.listprice < 30){
						return 'background-color:#6293BB;color:#fff;font-weight:bold;';
					}
				}
//                
//            });
        })
    </script>
 

這樣一個表格就顯示出來了下面對錶格出現的屬性做詳細說明
表格中設定都放到 data-options 屬性裡面
singleSelect : 返回值 true 或 false 是否只能選中一行
collapsible: 返回值 true 或 false 是否顯示彈出按鈕
url: 返回一個字串 表示 向伺服器發起請求的地址
method：請求方式 post 或 get
field: 返回字串 表示列的欄位
resizable:返回 true 或 false 表示是否可以拖拽列
align：返回值 ‘right’ ,‘left’,’ center’ 表示 列文字對齊方式
toolbar： 可在表格頭部顯示對應的按鈕如： 新增，修改，刪除 等資訊 返回一個 陣列型別的json。
toolbar屬性的相關說明見上述例子。
remoteSort: 返回 true 或 false 表示是否從伺服器排序資料。
multiSort： 返回true 或 false 表示是否進行多重排序。
sortable: 返回true 或 false 表示在列中是否可以排序
rownumbers: 返回true 或 false 表示是否顯現帶有標題列的行
onLoadSuccess:返回型別為 function 表示載入成功後執行的函式
formatter:返回型別為function 表示列中資料的格式化
pageNumber number 當設定了 pagination 屬性時，初始化頁碼。 1
pageSize number 當設定了 pagination 屬性時，初始化頁面尺寸。 10
pageList array 當設定了 pagination 屬性時，初始化頁面尺寸的選擇列表。 [10] 與pageSize 向呼應
queryParams object 當請求遠端資料時，傳送的額外引數。
rowStyler：返回function 傳遞的引數 index 表是行索引, row表示行 row.listprice 行中某欄位的值
toolbar:返回一個arr 表示工具欄上顯示按鈕
pagination:返回 一個bool 表示是否顯示分頁欄
在url：向伺服器請求資料時，rows 代表請求的所有資料 ,total 表示請求的總記錄數 ,page 表示請求的當前頁.