|
這一篇介紹在一個(gè)展開行內(nèi)進(jìn)行的增刪操作,，如果一行很長有很多的數(shù)據(jù)，在一個(gè)展開行內(nèi)進(jìn)行編輯將更加方便,。 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這個(gè)文件，這是作死呢,，沒辦法只能在官網(wǎng)上找這個(gè)文件,，復(fù)制路徑http://www./easyui/datagrid-detailview.js從IE瀏覽器中現(xiàn)在這個(gè)文件保存到自己目錄中。這個(gè)不知道是不是因?yàn)槲蚁螺d的是一個(gè)免費(fèi)版本,，收費(fèi)版本里面才有這個(gè)文件,，很想問一下這個(gè)團(tuán)隊(duì)的人。 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"這句可以用來查找數(shù)據(jù),。 3.看js定義 <script type="text/javascript">
//創(chuàng)建一個(gè)匿名方法并立即執(zhí)行
$(function(){
$("#dg").datagrid({
view:detailview,
detailFormatter:function(index,row){ //返回一個(gè)空的div，展開行的時(shí)候?qū)⒄归_內(nèi)容放到這個(gè)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, //展開行訪問的路徑及傳遞的參數(shù)
onLoad:function(){
$("#dg").datagrid('fixDetailRowHeight',index);//固定高度
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('getRowDetail',index).find('form').form('load',row); //將行的數(shù)據(jù)加載,，這里可能要把列名和show_form.php文件中的name對應(yīng)起來
}
});
$('#db').datagrid('fixDetailRowHeight',index);//加載之后固定高度
}
});
});
//保存
function saveItem(index){
var row = $("#dg").datagrid('getRows')[index]; //找到當(dāng)前行
var url = row.isNewRecord?'save_user.php':'update_user.php?id='+row.id;//根據(jù)條件設(shè)置訪問url
$('#dg').datagrid('getRowDetail',index).find('form').form('submit',{ //發(fā)送數(shù)據(jù)
url:url,
onSubmit:function(){
return $(this).form('validate'); //發(fā)送請求數(shù)據(jù)之前驗(yàn)證
},
success:function(data){
data = eval('('+data+')');
data.isNewRecord = false;
$('#dg').datagrid('collapseRow',index); //收縮
$('#dg').datagrid('updateRow',{ //用請求數(shù)據(jù)更新編輯的哪一行的數(shù)據(jù)
index:index,
row:data
});
}
})
}
//取消
function cancelItem(index){
var row = $('#dg').datagrid('getRows')[index];
if(row.isNewRecord){ //如果是新增直接刪除這一行,，包括展開內(nèi)容，否則是更新則收縮
$('#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傳遞參數(shù)id
$.post('destory_user.php',{id:row.id},function(){
$('#dg').datagrid('deleteRow',index);
});
}
});
}
}
//點(diǎn)擊新加
function newItem(index){
$('#dg').datagrid('appendRow',{isNewRecord:true});
var index = $('#dg').datagrid('getRows').length-1;
$('#dg').datagrid('expandRow',index);
$('#dg').datagrid('selecteRow',index);
}
</script>
這個(gè)js有點(diǎn)復(fù)雜,，我在每個(gè)方法中都注釋了,。我在這里犯了一個(gè)錯(cuò)誤將 $('#dg').datagrid('getRows')錯(cuò)誤的寫成了 $("#db").datagrid('getRows') 會報(bào)錯(cuò)TypeError: e is undefined，筆誤,。 4.最后還有一個(gè)文件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> 這是一個(gè)php文件,，可以看到使用<?php echo $_REQUEST['index'];?>接受參數(shù),。 好了就寫到這里。
|
|
|
