第一篇笔记中记录了如何实现表格的增删改，那个是点击之后跳出来一个对话框然后进行的，这里是在表格本身上进行的操作，也很简单，但是这里发现一个版本问题，也可以说是兼容性问题。
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按钮就可以正常保存，这个对我们来说有点抓瞎的，如果某一列不需要编辑呢。
作者：Tyler Ning
出处：http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过以下邮箱地址williamningdong@gmail.com 联系我，非常感谢。
![EasyUI-DataGrid控件[表格+日历]应用](https://ucc.alicdn.com/pic/developer-ecology/cb1b36e8855642b5bcc71862cfcac533.png?x-oss-process=image/resize,h_160,m_lfit)
