EasyUI可扩展Editable DataGrid（可编辑数据表格）

其实使用uasyui 的datagrid也可以实现可编辑但是使用起来很麻烦

在uasyui中文帮助文档里可扩展下有eDataGrid的使用说明，在使用的时候onDestroy事件不能很好的使用，导致数据库的数据删了，页面上的数据还在，想使用onDestroy事件执行location.location.reload()不走事件可以往下看，第一次使用想找个Demo的直接下载，
大神请飘走

步骤：
第一步：下载 jEasyUI和用到的扩展样式
第二步：

<!-- 第一步在JSP页面引入如下js和css样式 ：注意我的路径可能和你的不一样-->
 <link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
	<script type="text/javascript" src="ui/jquery.min.js"></script>
	<script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
<!--这个是实现DataGrid DetailView（数据表格详细展示）所需JS,你可以不引入-->
	<script type="text/javascript" src="juery/datagrid-detailview.js"></script>
	<!--这个是实现Editable DataGrid（可编辑数据表格）所需JS,你必须无条件引入，下载地址网上很多（中文帮助文档里有事也有）-->
<script type="text/javascript" src="juery/jquery.edatagrid.js"></script>

第三步：脚本渲染

  <table id="dg"></table>  
<script type="text/javascript">
		$(function(){ //网页加载完毕执行
//这里的渲染方式不是以前的datagrid了
		$('#dg').edatagrid({    
			    url:'DataGrid', //查询的Servlet（要返回分页查询的JSON）
			    updateUrl:'UpdateDatagrid',//更新(Servlet要返回更新的行)
			    saveUrl:'AddDategrid',//添加（servlet要返回添加的新行）
			    destroyUrl:'Delect',
//删除（这里在使用的时候要注意）
//看下英文的使用说明 servlet要返回true,和false;带消息的化要返回json
/* 			    Fires when the server errors occur. The server should return a row with 'isError' property set to true to indicate some errors occur. 

Code examples:

//server side code

echo json_encode(array(

    'isError' => true,

    'msg' => 'error message.'

)); */
			    pagination:true,//分页工具栏
			    fitColumns:true,//列的宽度自适应
			    view: detailview,//不需要详细表格可以不加
			    idField:'id',//绑定主键这个是必须的，不绑定删除不了
			    columns:[[    
//列的绑定
			        {field:'id',title:'编号',width:100},    
//editor:{type:'validatebox（想使用说明验证框就给说明值）',options:、、//{required:true（验证规则）}
			        {field:'name',title:'姓名',width:100,editor:{type:'validatebox',options:{required:true}}},    
			        {field:'age',title:'年龄',width:100,align:'right',editor:{type:'validatebox',options:{required:true}}} ,   
			        {field:'sex',title:'性别',width:100,align:'right',editor:{type:'validatebox',options:{required:true}}} ,   
			        {field:'iphone',title:'电话',width:100,align:'right',editor:{type:'validatebox',options:{required:true}}} ,   
			    ]]  ,
//详细表格开始（不讲解）
			   detailFormatter: function(index,row){
                 	var strA="";
					var rowIndex=index+1;
					strA+="<div id='ddv-"+index+"' style='padding :5px'>";
					strA+="第"+rowIndex.toString()+"条数据<br/>";
					strA+="编号:"+row.id+"<br/>";
					strA+="姓名:"+row.name+"<br/>";
					strA+="电话:"+row.iphone+"<br/>";
					strA+="</div>";
					return strA;
                 }, 
                  onExpandRow:function(index,row){
					$('#ddv-'+index).panel({
						title:"详细信息",
						height:100,
						width:100,
						fit:true
					});
					$("#dg").datagrid('fixDetailRowHeight',index);
				}, 
//详细表格结束（不讲解）
//添加工具
				toolbar:[{
				text:'添加一行数据',
				iconCls:'icon-add',
				handler:function(){
				$('#dg').edatagrid('addRow');
				}
			},{
				text:'删除',
				iconCls:'icon-remove',
				handler:function(){
				$('#dg').edatagrid('destroyRow');
				}
			}],
//在保存一行记录时触发。
			onSave:function(index,row){
				$.messager.alert("系统消息","保存成功"+row.name);
			},
				//销毁行的时候显示的确认对话框消息
				 destroyMsg:{
						norecord:{    // 在没有记录选择的时候执行
							title:'Warning',
							msg:'No record is selected.'
						},
						confirm:{       // 在选择一行的时候执行		
							title:'Confirm',
							msg:'Are you sure you want to delete?'
							//$.messager.alert("系统消息","删除"+row.name);
						}
					},


			});  
		});
	</script>

[u]第4步写后台实现了附件里是样例代码不是很严谨只求能运行[/u]
如果使用Myeclipse打开UI文件夹报错不用理会这是IDE的问题