<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
//引入easyui
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
//引入編輯插件
<script type="text/javascript" src="../../jquery.edatagrid.js"></script>
<body>
<!--
作者：offline
時間：2017-03-07
描述：添加、保存、取消、刪除
-->
<div style="margin-bottom:10px">
<a href="#" onclick="javascript:$('#dg1').edatagrid('addRow')">AddRow</a>
<a href="#" onclick="javascript:$('#dg1').edatagrid('saveRow')">SaveRow</a>
<a href="#" onclick="javascript:$('#dg1').edatagrid('cancelRow')">CancelRow</a>
<a href="#" onclick="javascript:$('#dg1').edatagrid('destroyRow')">destroyRow</a>
</div>
-------javascript 創建數據網格（datagrid）。
<table id="dg1"></table>
-------script------
<script>
$('#dg1').edatagrid({
url:'datagrid_data1.json',//從遠程站點請求數據的 URL。
method:'get',//請求遠程數據的方法（method）類型默認為post(忘記不寫get會報500錯誤)
columns:[[//數據綁定
{field:'productid',title:'productid',width:100,editor:"text"},//editor編輯必須
{field:'productname',title:'productname',width:100,editor:"text"},
{field:'unitcost',title:'unitcost',width:100,align:'right',editor:"text"}
]],
singleSelect:'true',
pagination:true,//分頁功能 默認為false
pagePosition:'top',//定義分頁欄的位置。可用的值有：'top'、'bottom'、'both'。該屬性自版本 1.3 起可用。
rownumbers:true,//顯示行號
toolbar: [//通過數組定義工具欄：
{
iconCls: 'icon-edit',
handler: function(){alert('edit')}
},
'-',//會生成間隔符號
{
iconCls: 'icon-help',
handler: function(){alert('help')}
},
'-',
{
iconCls: 'icon-help',
handler: function(){alert('help')}
},
],
//checkOnSelect:false,// 如果設置為 true，點擊復選框將會選中該行。如果設置為 false，選中該行將不會選中復選框。該屬性自版本 1.3 起可用。
//selectOnCheck:false,//如果設置為 true，點擊復選框將會選中該行。如果設置為 false，選中該行將不會選中復選框。該屬性自版本 1.3 起可用。
/*queryParams: {//當請求遠程數據時，發送的額外參數。
name: 'easyui',
subject: 'datagrid'
},*/
//multiSort:true, //定義是否啟用多列排序。該屬性自版本 1.3.4 起可用。
//remoteSort:true,//定義是否從服務器排序數據。
//sortName:"unitcost",//定義可以排序的列。
//sortOrder:'desc',//定義列的排序順序，只能用 'asc' 或 'desc'。
//showHeader:true,//定義是否顯示行的頭部。
//showFooter:false,//定義是否顯示行的底部。
//scrollbarSize:'18',//滾動條寬度（當滾動條是垂直的時候）或者滾動條的高度（當滾動條是水平的時候）。
/*rowStyler: function(index,row){//返回例如 'background:red' 的樣式。該函數需要兩個參數：rowIndex：行的索引，從 0 開始。rowData：該行相應的記錄。
if (row.unitcost>12){//unitcost字段大於12的行 樣式修改
return 'background-color:#6293BB;color:#fff;'; // return inline style
// the function can return predefined css class and inline style
// return {class:'r1', style:{'color:#fff'}};
}
},*/
//pageNumber:'2',//當設置了 pagination 屬性時，初始化頁碼。(沒用起)
//pageSize:'10',//當設置了 pagination 屬性時，初始化頁面尺寸。
//pageList:[10,20,30,40,50],//當設置了 pagination 屬性時，初始化頁面尺寸的選擇列表。
//singleSelect:true,//設置為 true，則只允許選中一行。默認為false
//toolbar: '#tb',//調用頭部工具欄這里指向id
//fitColumns:true,//自動擴大或縮小
//事件
/*onClickRow:function(rowIndex,rowData)//當用戶點擊一行時觸發rowIndex：被點擊行的索引，從 0 開始,rowData：被點擊行對應的記錄
{alert(rowIndex+"--"+rowData)},*/
/*onDblClickRow:function(rowIndex,rowData)//當用戶雙擊行時觸發rowIndex：被點擊行的索引，從 0 開始,rowData：被點擊行對應的記錄
{alert(rowIndex+"--"+rowData)},*/
/*onClickCell:function(rowIndex,rowIndex,value)//當用戶單擊一個單元格時觸發。//onDblClickCell雙擊觸發
{
alert(rowIndex+"--"+rowIndex+"...."+value)
},*/
/*frozenColumns:[[//與columns一樣但是會自動靠在最左邊
//{field : 'id',title : '編號',checkbox : true },//添加復選框
{field:'itemid',title:'itemid',width:100},
{field:'attr1',title:'attr1',width:100},
]],*/
//resizeHandle:'right',//調整列的位置，可用的值有：'left'、'right'、'both'。當設置為 'right' 時，用戶可通過拖拽列頭部的右邊緣來調整列。
//autoRowHeight:false,//定義是否設置基於該行內容的行高度。設置為 false，則可以提高加載性能。默認為true
//striped:true,//設置為 true，則把行條紋化筆者暫未實現
//nowrap:true,//據說設置為 true，則把數據顯示在一行里。設置為 true 可提高加載性能。
//idField:'itemid',//指示哪個字段是標識字段。
//data:[{f1:'123',f2:'333'}],//要加載的數據。該屬性自版本 1.3.2 起可用。(也許筆者版本問題，暫未成功)
//loadMsg:'努力加載數據中...',//當從遠程站點加載數據時，顯示的提示消息。(筆者刷新時會看見)
});
</script>
------------------------------------------------
</body>
</html>
效果圖
