<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /><link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" /><link rel="stylesheet" href="jquery-easyui-1.3.5/demo/demo.css"/><script type="text/javascript" src="jquery-easyui-1.3.5/jquery-1.10.2.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.5/plugins/datagrid-detailview.js"></script>

    <table id="dg" title="My User" style="width:700px;height:250px" url="get_users.php" toolbar="#toolbar" pagination="true" fitColumns="true" singleSelect="true"><thead><tr><th field="firstname" width="50">First Name</th><th field="lastname" width="50">Last Name</th><th field="phone" width="50">Phone</th><th field="email" width="50">Email</th></tr></thead></table><div id="toolbar"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()">Destory</a></div>

    <script type="text/javascript"> //创建一个匿名方法并立即执行$(function(){$("#dg").datagrid({view:detailview,detailFormatter:function(index,row){  //返回一个空的div，展开行的时候将展开内容放到这个div中return "<div class='ddv'></div>";},onExpandRow:function(index,row){var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv'); //在这一行中找到class="ddv"的div
                ddv.panel({                                         border:false,cache:true,href:'show_form.php?index='+index,      //展开行访问的路径及传递的参数onLoad:function(){$("#dg").datagrid('fixDetailRowHeight',index);//固定高度$('#dg').datagrid('selectRow',index);$('#dg').datagrid('getRowDetail',index).find('form').form('load',row);  //将行的数据加载，这里可能要把列名和show_form.php文件中的name对应起来
                    }});$('#db').datagrid('fixDetailRowHeight',index);//加载之后固定高度
            }});});//保存function saveItem(index){var row = $("#dg").datagrid('getRows')[index]; //找到当前行var url = row.isNewRecord?'save_user.php':'update_user.php?id='+row.id;//根据条件设置访问url$('#dg').datagrid('getRowDetail',index).find('form').form('submit',{ //发送数据
            url:url,onSubmit:function(){return $(this).form('validate'); //发送请求数据之前验证
            },success:function(data){data = eval('('+data+')');data.isNewRecord = false;$('#dg').datagrid('collapseRow',index); //收缩$('#dg').datagrid('updateRow',{         //用请求数据更新编辑的哪一行的数据
                    index:index,row:data});}})}//取消function cancelItem(index){var row = $('#dg').datagrid('getRows')[index];if(row.isNewRecord){                      //如果是新增直接删除这一行，包括展开内容，否则是更新则收缩$('#dg').datagrid('deleteRow',index);}else{$('#dg').datagrid('collapseRow',index);}}//删除function destroyItem(){var row = $('#dg').datagrid('getSelected');if(row){$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){if(r){var index = $('#dg').datagrid('getRowIndex',row); //为destory_user.php传递参数id$.post('destory_user.php',{id:row.id},function(){$('#dg').datagrid('deleteRow',index);});}});}}//点击新加function newItem(index){$('#dg').datagrid('appendRow',{isNewRecord:true});var index = $('#dg').datagrid('getRows').length-1;$('#dg').datagrid('expandRow',index);$('#dg').datagrid('selecteRow',index);}</script>

<form method="post"><table class="dv-table" style="width:100%;border:1px solid #ccc;background:#fafafa;padding:5px;margin-top:5px;"><tr><td>First Name</td><td><input name="firstname" class="easyui-validatebox" required="true"></input></td><td>Last Name</td><td><input name="lastname" class="easyui-validatebox" required="true"></input></td></tr><tr><td>Phone</td><td><input name="phone"></input></td><td>Email</td><td><input name="email" class="easyui-validatebox" validType="email"></input></td></tr></table><div style="padding:5px 0;text-align:right;padding-right:30px"><a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="saveItem(<?php echo $_REQUEST['index'];?>)">Save</a><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancelItem(<?php echo $_REQUEST['index'];?>)">Cancel</a></div>
</form>