EasyUI DataGrid结合ThinkPHP实现增删改查操作———初学者
EasyUI是基于jQuery的用户界面插件集合；DataGrid是数据表格；
ThinkPHP是快速、简单的基于MVC和面向对象的轻量级PHP开发框架。
使用的集成开发环境是 WAMPSever，（wampserver是一个集成了Apache、PHP和MySQL的开发套件，而且支持不同PHP版本、MySQL版本和Apache版本的切换）
效果如下：
主要代码如下
1、定义一个表格
<span style="color: #0000ff;"><span style="color: #800000;">table </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="dg"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="easyui-datagrid"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="DataGrid Complex Toolbar"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="width:700px;height:250px"</span><span style="color: #ff0000;"> data-options</span><span style="color: #0000ff;">="rownumbers:true,singleSelect:true,url:'{:U(read)}',method:'get',toolbar:'#tb'"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">thead</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">th </span><span style="color: #ff0000;">data-options</span><span style="color: #0000ff;">="field:'ID',width:80,align:'center'"</span><span style="color: #0000ff;">></span>ID<span style="color: #0000ff;"></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">th </span><span style="color: #ff0000;">data-options</span><span style="color: #0000ff;">="field:'Product',width:100"</span><span style="color: #0000ff;">></span>Product<span style="color: #0000ff;"></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">th </span><span style="color: #ff0000;">data-options</span><span style="color: #0000ff;">="field:'Content',width:500,align:'center'"</span><span style="color: #0000ff;">></span>Content<span style="color: #0000ff;"></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">thead</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"></span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>
class="easyui-datagrid"是easyui里面自定义的格式，data-options用来初始化属性，这里面的属性包括rownumbers显示行数，singleSelect表示行的选中状态；
url:'{U(read)}'首先，ThinkPHP的U方法（参考：http://www.thinkphp.cn/info/132.html）用来完成对URL地址的组装，在模板中的调用采用 {:U('地址', '参数'…)} 的方式，其次，EasyUI采用的数据格式是json,控制器里面的read方法输出一个json格式的数据。toolbar:'#tb'这个是表格的工具栏，就是增加、删除和修改。
定义表格的工具栏如下：
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="tb"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="padding:2px 5px;"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:void(0)"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="easyui-linkbutton"</span><span style="color: #ff0000;"> iconCls</span><span style="color: #0000ff;">="icon-add"</span><span style="color: #ff0000;"> plain</span><span style="color: #0000ff;">="true"</span><span style="color: #ff0000;"> onClick</span><span style="color: #0000ff;">="addPro()"</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:void(0)"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="easyui-linkbutton"</span><span style="color: #ff0000;"> iconCls</span><span style="color: #0000ff;">="icon-edit"</span><span style="color: #ff0000;"> plain</span><span style="color: #0000ff;">="true"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="editPro()"</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascrtpt:void(0)"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="easyui-linkbutton"</span><span style="color: #ff0000;"> iconCls</span><span style="color: #0000ff;">="icon-remove"</span><span style="color: #ff0000;"> plain</span><span style="color: #0000ff;">="true"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="removePro()"</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>
注意：这里面的id要和 toolbar：'#tb' 相对应；
2、点击增加和修改的时候要弹出一个对话框，代码如下：
<span style="color: #008000;"><!--</span><span style="color: #008000;">the page of dialog</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="dl"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="easyui-dialog"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="width:400px;height:280px;padding:10px 20px"</span><span style="color: #ff0000;"> closed</span><span style="color: #0000ff;">="true"</span><span style="color: #ff0000;"> footer</span><span style="color: #0000ff;">="ft"</span><span style="color: #ff0000;"> buttons</span><span style="color: #0000ff;">="#dlg-buttons"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ftitle"</span><span style="color: #0000ff;">></span>Information<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="am"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post"</span><span style="color: #ff0000;"> novalidate </span><span style="color: #0000ff;">></span><span style="color: #000000;"> Product:</span><span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Product"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="easyui-validatebox"</span><span style="color: #ff0000;"> required</span><span style="color: #0000ff;">="true"</span><span style="color: #0000ff;">/></span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span><span style="color: #000000;"> Content:</span><span style="color: #0000ff;"><span style="color: #800000;">Textarea </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="Content"</span><span style="color: #ff0000;"> rows</span><span style="color: #0000ff;">="5"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="45"</span><span style="color: #0000ff;">></span><span style="color: #800000;">Textarea</span><span style="color: #0000ff;">></span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> </span></span></span></span></span>
class='easyui-dialog'定义了一个对话框，因为要和后台交互，在这个对话框里面装了一个form，里面的input元素有些需要进行验证，required="true"表示必须填写元素
class="easyui-validatebox"定义了验证失败后的提示，buttons="#dlg-buttons"表示这个对话框下面的两个确认，取消按钮。novalidate表示不验证。
对话框中的按钮：
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="dlg-buttons"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:void(0)"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="easyui-linkbutton"</span><span style="color: #ff0000;"> iconCls</span><span style="color: #0000ff;">="icon-ok"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="savePro()"</span><span style="color: #0000ff;">></span>Save<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:void(0)"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="easyui-linkbutton"</span><span style="color: #ff0000;"> iconCls</span><span style="color: #0000ff;">="icon-cancel"</span><span style="color: #ff0000;"> onclick</span><span style="color: #0000ff;">="javascript:$('#dl').dialog('close')"</span><span style="color: #0000ff;">></span>Cancel<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">><br></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>3、页面js函数
<span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span> <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> url; </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> addPro(){ $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#dl</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).dialog(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">open</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).dialog(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">setTitle</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">New Information</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">); $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#am</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).form(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">clear</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">); url </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">__URL__/insert</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">; }</span> <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> editPro(){ </span><span style="color: #ff0000;"><span style="background-color: #f5f5f5;">var</span><span style="background-color: #f5f5f5;"> row </span><span style="background-color: #f5f5f5;">=</span><span style="background-color: #f5f5f5;"> $(</span><span style="background-color: #f5f5f5;">"</span><span style="background-color: #f5f5f5;">#dg</span><span style="background-color: #f5f5f5;">"</span><span style="background-color: #f5f5f5;">).datagrid(</span><span style="background-color: #f5f5f5;">"</span><span style="background-color: #f5f5f5;">getSelected</span><span style="background-color: #f5f5f5;">"</span></span><span style="background-color: #f5f5f5; color: #000000;"><span style="color: #ff0000;">)</span>;//取得选中行 </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(row){ $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#dl</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).dialog(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">open</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).dialog(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">setTitle</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">Change Information</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">); $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#am</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).form(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">load</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">,row); url </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">__URL__/update?ID=</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">row.ID;</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">为update方法准备访问url，注意是全局变量</span><span style="background-color: #f5f5f5; color: #000000;"> } } </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> savePro(){ $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#am</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).form(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">submit</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,{ url: url, onSubmit: </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){ </span><span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">).form(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">validate</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">); }, success: </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(result){ </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> result </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> eval(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">result</span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">); </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (result.success){ $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#dl</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).dialog(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">close</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> close the dialog</span><span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#dg</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).datagrid(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">reload</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> reload the user data</span><span style="background-color: #f5f5f5; color: #000000;"> } </span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;"> { $.messager.show({ title: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">Error</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, msg: result.msg }); } } }); } </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> removePro() { </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> row </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#dg</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).datagrid(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">getSelected</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">); </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (row){ $.messager.confirm(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">Confirm</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">Are you sure you want to remove this row?</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(r){ </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (r){ $.post(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">__URL__/delete</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,{ID:row.ID},</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(result){ </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (result.success){ $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#dg</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).datagrid(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">reload</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> reload the user data</span><span style="background-color: #f5f5f5; color: #000000;"> } </span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;"> { $.messager.show({ </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> show error message</span><span style="background-color: #f5f5f5; color: #000000;"> title: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">Error</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, msg: result.msg }); } },</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">json</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">); } }); } } </span><span style="color: #0000ff;"></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span></span>JS还不是很会，所以参考了网上的代码。 $.messager.show是EasyUI提供的消息提示框（参考：http://www.jeasyui.net/demo/371.html），可以在屏幕右下角显示一个消息窗口。$.messager.confirm是交互式消息，弹出一个消息确认框。var row = $("#dg").datagrid("getSelected");是取得选中行，而row.ID可以取得选中行的数据，其中ID是由field:'ID'决定。
4、控制器里面的代码（IndexAction.class.php）
<span style="color: #000000;">php</span><span style="color: #008000;">//</span><span style="color: #008000;"> 本类由系统自动生成，仅供测试用途</span><span style="color: #0000ff;">class</span> IndexAction <span style="color: #0000ff;">extends</span><span style="color: #000000;"> Action { </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> index(){ </span><span style="color: #800080;">$this</span>-><span style="color: #000000;">display(); } </span><span style="color: #0000ff;">public</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> read(){</span><span style="color: #800080;">$Test</span> = M('test'<span>); </span><span style="color: #008000;">/*</span><span style="color: #008000;">$Total = $Test->count(); $Json = '{"total":'.$Total.',"rows":'.json_encode($Test->select()).'}';</span><span style="color: #008000;">*/</span> <span style="color: #800080;">$Json</span> = json_encode(<span style="color: #800080;">$Test</span>-><span>select()); </span><span style="color: #0000ff;">echo</span> <span style="color: #800080;">$Json</span><span>;</span><span style="color: #0000ff;"><span style="color: #000000; line-height: 1.5;"> }<br> <br></span> public</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> insert(){ </span><span style="color: #800080;">$data</span> = <span style="color: #800080;">$this</span>-><span style="color: #000000;">_post(); </span><span style="color: #800080;">$Test</span> = M('Test'<span style="color: #000000;">); </span><span style="color: #800080;">$result</span> = <span style="color: #800080;">$Test</span>->add(<span style="color: #800080;">$data</span><span style="color: #000000;">); </span><span style="color: #0000ff;">if</span>(<span style="color: #800080;">$result</span><span style="color: #000000;">) { </span><span style="color: #0000ff;">echo</span> json_encode(<span style="color: #0000ff;">array</span>('success'=><span style="color: #0000ff;">true</span><span style="color: #000000;">)); }</span><span style="color: #0000ff;">else</span><span style="color: #000000;"> { </span><span style="color: #0000ff;">echo</span> json_encode(<span style="color: #0000ff;">array</span>('msg'=>'Some error occured'<span style="color: #000000;">)); } } </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span> update(<span style="color: #800080;">$ID</span>=0<span style="color: #000000;">){ </span><span style="color: #800080;">$Test</span> = M('test'<span style="color: #000000;">); </span><span style="color: #800080;">$ID</span> = <span style="color: #800080;">$_GET</span>['ID'<span style="color: #000000;">]; </span><span style="color: #0000ff;">if</span>(<span style="color: #800080;">$Test</span>-><span style="color: #000000;">create()) { </span><span style="color: #800080;">$Test</span>->ID = <span style="color: #800080;">$ID</span><span style="color: #000000;">; </span><span style="color: #800080;">$result</span> = <span style="color: #800080;">$Test</span>-><span style="color: #000000;">save(); </span><span style="color: #0000ff;">if</span>(<span style="color: #800080;">$result</span><span style="color: #000000;">) { </span><span style="color: #0000ff;">echo</span> json_encode(<span style="color: #0000ff;">array</span>('success'=><span style="color: #0000ff;">true</span><span style="color: #000000;">)); }</span><span style="color: #0000ff;">else</span><span style="color: #000000;"> { </span><span style="color: #0000ff;">echo</span> json_encode(<span style="color: #0000ff;">array</span>('msg'=>'Some error occured'<span style="color: #000000;">)); } }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ </span><span style="color: #800080;">$this</span>->error(<span style="color: #800080;">$Test</span>-><span style="color: #000000;">getError()); } } </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">function</span> delete(<span style="color: #800080;">$ID</span>=0<span style="color: #000000;">){ </span><span style="color: #800080;">$result</span> = <span style="color: #0000ff;">false</span><span style="color: #000000;">; </span><span style="color: #800080;">$Test</span> = M('test'<span style="color: #000000;">); </span><span style="color: #800080;">$result</span> = <span style="color: #800080;">$Test</span>->where('ID='.<span style="color: #800080;">$ID</span>)-><span style="color: #000000;">delete(); </span><span style="color: #0000ff;">if</span>(<span style="color: #800080;">$result</span>==<span style="color: #0000ff;">false</span><span style="color: #000000;">){ </span><span style="color: #0000ff;">echo</span> json_encode(<span style="color: #0000ff;">array</span>('msg'=>'删除出错！'<span style="color: #000000;">)); }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{ </span><span style="color: #0000ff;">echo</span> json_encode(<span style="color: #0000ff;">array</span>('success'=><span style="color: #0000ff;">true</span><span style="color: #000000;">)); } } }</span>?>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
