<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery.edatagrid.js"></script>
<script type="text/javascript">
$(function(){
$('#tt').edatagrid({
});
//add
$('#addid').click(function(){
var length=$('#tt').datagrid("getRows").length;
if(length>2){
alert("最多只能添加3个");
}else{
$('#tt').edatagrid('addRow');
}
});
//del
$('#delid').click(function(){
var rows = $('#tt').datagrid("getSelections");//获取你选择的所有行
//循环所选的行
for(var i =0;i<rows.length;i++){
var index = $('#tt').datagrid('getRowIndex',rows[i]);//获取某行的行号
$('#tt').datagrid('reload');
}
alert("删除成功");
/* var row = $('#tt').datagrid('getSelections');
var rowIndex = $('#tt').datagrid('getRows', row);
alert(rowIndex);
$('#tt').datagrid('getRowIndex', rowIndex);
$('#tt').datagrid('reload');//删除后重新加载下
*/
});
});
</script>
</head>
<body>
<h1>Editable DataGrid</h1>
<div style="margin-bottom:10px">
<a id="addid" href="#">AddRow</a>
<a href="#" onclick="javascript:$('#tt').edatagrid('saveRow')">SaveRow</a>
<a href="#" onclick="javascript:$('#tt').edatagrid('cancelRow')">CancelRow</a>
<a href="#" onclick="javascript:$('#tt').edatagrid('destroyRow')">destroyRow</a>
</div>
<table id="tt" style="width:600px;height:200px"
title="Editable DataGrid"
url="datagrid_data.json"
singleSelect="true">
<thead>
<tr>
<th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
<th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
<th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
<th field="unitcost" width="100" align="right" editor="numberbox"><a href="#" id="delid">删除</a></th>
</tr>
</thead>
</table>
</body>
</html>