easyui學習筆記3—在展開行内的增删改操作

這一篇介紹在一個展開行内進行的增删操作，如果一行很長有很多的資料，在一個展開行内進行編輯将更加友善。

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/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，如有問題，可以通過以下郵箱位址

[email protected]

 聯系我，非常感謝。