easyui學習筆記2—在行內進行表格的增刪改操作

第一篇筆記中記錄了如何實現表格的增刪改，那個是點擊之后跳出來一個對話框然后進行的，這里是在表格本身上進行的操作，也很簡單，但是這里發現一個版本問題，也可以說是兼容性問題。

1.首先我們看引用的js和css代碼

        <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/easyui/plugins/jquery.edatagrid.js"></script>

這里和上一篇比較而言新增加了一個<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>這個是修改表格時用到的，可是我在下載的源文件中就是找不到這個js文件呢，在里面有個類似的文件D:\Serious\phpdev\easyui\jquery-easyui-1.3.5\plugins/jquery.datagrid.js這個，看上去有點類似，但是少個字母“e”，納悶了到底是jquery.datagrid.js還是jquery.edatagrid.js呢？你可能已經注意到我這里下載的最新的easyui版本jquery-easyui-1.3.5，是版本更新么？先不管他，繼續往下看了。

2.然后是html代碼，先定義一個表格，如下：

            <table id="dg" title="My User" style="" style="width:700px;height:250px" toolbar="#toolbar" pagination="true" idField="id" rownumbers="true" fitColumns="true" singleSelect="true">
                <thead>
                    <th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
                    <th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
                    <th field="phone" width="50" editor="text">Phone</th>
                    <th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
                </thead>
            </table>

注意toolbar的命名要和下面定義的工具欄對應，idField="id"這個應該是定義這一行的主鍵，在做刪除操作的時候用到這個主鍵，在列名的定義中我們可以看到
editor="{type:'validatebox',options:{required:true}}"這樣的一句，字面意義上應該是可編輯的且需要驗證的，驗證規則是必填的。editor="text"這個就應該是簡單的文本信息不需要驗證的，不是必填的。editor="{type:'validatebox',options:{validType:'email'}}" 這個應該也是必填的且驗證規則是email驗證。

3.下面看工具欄是如何定義的

            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="jvascript:$('#dg').edatagrid('addRow')">New</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="jvascript:$('#dg').edatagrid('destroyRow')">Destory</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="jvascript:$('#dg').edatagrid('saveRow')">Save</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="jvascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
            </div>

這個就是定義增，刪，改的操作的onclick="jvascript:$('#dg').edatagrid('addRow')"這個很很明顯就是新增一行，效果如下圖1

圖1

4.最后我們看看js代碼

    $(function(){
        $('#dg').edatagrid({
        url: 'get_users.php',
        saveUrl: 'save_user.php',
        updateUrl: 'update_user.php',
        destroyUrl: 'destory_user.php'
        });
    });
    </script>

就這么幾行，這里只是指定了對應的動作url，估計jquery.edatagrid.js這個js里面會處理對應的操作規則。

最后就是我發現使用本地的jquery-easyui-1.3.5/easyui/plugins/jquery.datagrid.js這個文件是會報錯的，各種各樣的錯誤，使用官網上給的那個文件是可以的，就是引用<scripttype="text/javascript"src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>這個文件。不知道各位有沒有注意到這個讓人蛋疼的問題。還有這里工具欄中沒有給出編輯的按鈕，而是雙擊需要編輯的行，對應的行就會變成可編輯狀態，然后點擊Save按鈕就可以正常保存，這個對我們來說有點抓瞎的，如果某一列不需要編輯呢。