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

aaarticlea/png;base64,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" alt="" />

图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按钮就可以正常保存，这个对我们来说有点抓瞎的，如果某一列不需要编辑呢。