这一篇介绍在一个展开行内进行的增删操作，如果一行很长有很多的数据，在一个展开行内进行编辑将更加方便。
1.先看引用的资源
<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>
这里又要吐槽一下了，在我下载的easyui源文件D:\Serious\phpdev\easyui\jquery-easyui-1.3.5中根本就没有datagrid-detailview.js这个文件，这是作死呢，没办法只能在官网上找这个文件，复制路径http://www.jeasyui.com/easyui/datagrid-detailview.js从IE浏览器中现在这个文件保存到自己目录中。这个不知道是不是因为我下载的是一个免费版本，收费版本里面才有这个文件，很想问一下这个团队的人。
2.在看表格的定义
<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>
和前面几篇的差不多，这里也给表格定义了工具栏。注意这里没有给表格定义class="easyui-datagrid"，不知何解。url="get_users.php"这句可以用来查找数据。
3.看js定义
<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>
这个js有点复杂，我在每个方法中都注释了。我在这里犯了一个错误将 $('#dg').datagrid('getRows')错误的写成了 $("#db").datagrid('getRows') 会报错TypeError: e is undefined，笔误。
4.最后还有一个文件show_form.php如下：
<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>
这是一个php文件，可以看到使用<?php echo $_REQUEST['index'];?>接受参数。
好了就写到这里。
作者：Tyler Ning
出处：http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过以下邮箱地址williamningdong@gmail.com 联系我，非常感谢。
