EasyUI DataGrid结合ThinkPHP实现增删改查操作———初学者

EasyUI是基于jQuery的用户界面插件集合;DataGrid是数据表格;

ThinkPHP是快速、简单的基于MVC和面向对象的轻量级PHP开发框架。

使用的集成开发环境是 WAMPSever,(wampserver是一个集成了Apache、PHP和MySQL的开发套件,而且支持不同PHP版本、MySQL版本和Apache版本的切换)

效果如下

主要代码如下

1、定义一个表格

<table id="dg" class="easyui-datagrid" title="DataGrid Complex Toolbar" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,url:‘{:U(read)}‘,method:‘get‘,toolbar:‘#tb‘">
        <thead>
            <tr>
                <th data-options="field:‘ID‘,width:80,align:‘center‘">ID</th>
                <th data-options="field:‘Product‘,width:100">Product</th>
                <th data-options="field:‘Content‘,width:500,align:‘center‘">Content</th>
            </tr>
        </thead>
</table>

  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‘这个是表格的工具栏,就是增加、删除和修改。

定义表格的工具栏如下:

<div id="tb" style="padding:2px 5px;">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="addPro()"></a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editPro()"></a>
        <a href="javascrtpt:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removePro()"></a>
 </div>

注意:这里面的id要和 toolbar:‘#tb‘ 相对应;

2、点击增加和修改的时候要弹出一个对话框,代码如下:

<!--the page of dialog-->
    <div id="dl" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" footer="ft" buttons="#dlg-buttons">
       <div class="ftitle">Information</div>
       <form id="am" method="post" novalidate >
             Product:<input type="text" name="Product" class="easyui-validatebox" required="true"/></br>
             Content:<Textarea name="Content" rows="5" cols="45"></Textarea></br>
       </form>
    </div>  

class=‘easyui-dialog‘定义了一个对话框,因为要和后台交互,在这个对话框里面装了一个form,里面的input元素有些需要进行验证,required="true"表示必须填写元素

class="easyui-validatebox"定义了验证失败后的提示,buttons="#dlg-buttons"表示这个对话框下面的两个确认,取消按钮。novalidate表示不验证。

对话框中的按钮:

<div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="savePro()">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
          onclick="javascript:$(‘#dl‘).dialog(‘close‘)">Cancel</a></div>

3、页面js函数

  <script type="text/javascript">
        var url;
        function addPro(){
              $(‘#dl‘).dialog(‘open‘).dialog(‘setTitle‘,‘New Information‘);
              $(‘#am‘).form(‘clear‘);
              url = ‘__URL__/insert‘;
       }
        function editPro(){
            var row = $("#dg").datagrid("getSelected");
            if(row){
               $("#dl").dialog("open").dialog("setTitle","Change Information");
               $("#am").form("load",row);
               url = ‘__URL__/update?ID=‘+row.ID;//为update方法准备访问url,注意是全局变量
            }
        } 

       function savePro(){
            $(‘#am‘).form(‘submit‘,{
                url: url,
                onSubmit: function(){
                    return $(this).form(‘validate‘);
                },
                success: function(result){
                    var result = eval(‘(‘+result+‘)‘);
                    if (result.success){
                        $(‘#dl‘).dialog(‘close‘);        // close the dialog
                        $(‘#dg‘).datagrid(‘reload‘);    // reload the user data
                    } else {
                        $.messager.show({
                            title: ‘Error‘,
                            msg: result.msg
                        });
                    }
                }
            });
        }

      function removePro()
       {
          var row = $(‘#dg‘).datagrid(‘getSelected‘);
            if (row){
                $.messager.confirm(‘Confirm‘,‘Are you sure you want to remove this row?‘,function(r){
                    if (r){
                        $.post(‘__URL__/delete‘,{ID:row.ID},function(result){
                            if (result.success){
                                $(‘#dg‘).datagrid(‘reload‘);    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: ‘Error‘,
                                    msg: result.msg
                                });
                            }
                        },‘json‘);
                    }
                });
            }
     }
    </script>

JS还不是很会,所以参考了网上的代码。

4、控制器里面的代码(IndexAction.class.php)

<?php
// 本类由系统自动生成,仅供测试用途
class IndexAction extends Action {
    public function index(){
      $this->display();
    }
     publicfunction read(){
$Test = M(‘test‘);
        /*$Total = $Test->count();
        $Json = ‘{"total":‘.$Total.‘,"rows":‘.json_encode($Test->select()).‘}‘;*/
        $Json = json_encode($Test->select());
        echo $Json;
    }

    public function insert(){
        $data = $this->_post();
        $Test = M(‘Test‘);
        $result = $Test->add($data);
        if($result)    {
            echo json_encode(array(‘success‘=>true));
        }else {
            echo json_encode(array(‘msg‘=>‘Some error occured‘));
        }
      }
    public function update($ID=0){
       $Test  =   M(‘test‘);
       $ID = $_GET[‘ID‘];
       if($Test->create()) {
           $Test->ID = $ID;
        $result  =   $Test->save();
        if($result)    {
            echo json_encode(array(‘success‘=>true));
        }else {
            echo json_encode(array(‘msg‘=>‘Some error occured‘));
        }
        }else{
              $this->error($Test->getError());
         }
     }
     public function delete($ID=0){
         $result = false;
         $Test = M(‘test‘);
         $result = $Test->where(‘ID=‘.$ID)->delete();
         if($result==false){
             echo json_encode(array(‘msg‘=>‘删除出错!‘));
         }else{
             echo json_encode(array(‘success‘=>true));
         }
     }

}
?>
时间: 2024-10-21 11:00:13

EasyUI DataGrid结合ThinkPHP实现增删改查操作———初学者的相关文章

(转)SQLite数据库增删改查操作

原文:http://www.cnblogs.com/linjiqin/archive/2011/05/26/2059182.html SQLite数据库增删改查操作 一.使用嵌入式关系型SQLite数据库存储数据 在Android平台上,集成了一个嵌入式关系型数据库--SQLite,SQLite3支持NULL.INTEGER.REAL(浮点数字).TEXT(字符串文本)和BLOB(二进制对象)数据类型,虽然它支持的类型只有五种,但实际上sqlite3也接受varchar(n).char(n).d

Scala对MongoDB的增删改查操作

=========================================== 原文链接: Scala对MongoDB的增删改查操作 转载请注明出处! =========================================== 依赖环境:jdk1.8.Scala 2.12.idea mongodb Driver:3.1.1.注意,mongo for scala的驱动涉及多个jar(如下图),依赖于mongo-java-driver.jar 这里使用的sbt管理依赖,直接在bu

Java+MyEclipse+Tomcat (六)详解Servlet和DAO数据库增删改查操作

此篇文章主要讲述DAO.Java Bean和Servlet实现操作数据库,把链接数据库.数据库操作.前端界面显示分模块化实现.其中包括数据的CRUD增删改查操作,并通过一个常用的JSP网站前端模板界面进行描述.参考前文: Java+MyEclipse+Tomcat (一)配置过程及jsp网站开发入门 Java+MyEclipse+Tomcat (二)配置Servlet及简单实现表单提交 Java+MyEclipse+Tomcat (三)配置MySQL及查询数据显示在JSP网页中 Java+MyE

作业员工信息表实现增删改查操作

有以下员工信息表 当然此表你在文件存储时可以这样表示 1 1,Alex Li,22,13651054608,IT,2013-04-01 现需要对这个员工信息文件,实现增删改查操作 可进行模糊查询,语法至少支持下面3种: select name,age from staff_table where age > 22 select  * from staff_table where dept = "IT" select  * from staff_table where enroll

【greenDAO3】 项目搭建与增删改查操作

最近需要开始一个新的项目了,考虑到既然是新项目了,那么一些常用的框架肯定也要用当下最火的!这次的新项目中涉及到了本地数据存储,很早前有个项目的本地数据库框架用的是ActiveAndroid,github找了下这个框架,发现已经两年多已经没有更新了.然后就想到了一直没有时间去涉及到的greenDAO,github一搜索,哦呦?star有5000+,并且依然保持着很高的更新频率,并且性能远远的高于activeAndroid(见下图),果断选用. 刚开始想偷偷懒,大致浏览了下greenDAO官网后就开

基于Java的XML文件模拟数据库进行增删改查操作

我们知道XML文件既可以用来进行数据的传输,也可以配合DTD约束文件用来作为配置文件,当然其本质就是一个加了标签以及众多空格保持格式的字符串,那么就可以用Java进行操作. 本例是使用MyEclipse带入DOM4j解析时要用的jar包的基础上做的:当然DOM4j相对于DOM SAX 等解析方式的方便程度是不言而喻的. 下面是本次用例XML文件 <?xml version="1.0" encoding="UTF-8"?> <persons> 

MyBatis基本增删改查操作

本文内容主要介绍单条记录的增删改查操作,MyBatis提供了很多完成单条记录的增删改查操作的API.本例主要讲述<UserMapper> UserMapper org.apache.ibatis.session.SqlSession.getMapper(Class<UserMapper> clazz)的使用.使用此API,我们需要创建UserMapper操作接口,函数名和MyBatis的User.xml配置文件中的操作id名对应. [转载使用,请注明出处:http://blog.c

基于视图的增删改查操作(颠覆传统思维吧)

视图是关系型数据库提供的一个非常强大好用的功能,它提供了一种基于基本表(相对视图的虚拟表而言)的数据提取重组和分隔技术. 视图通过对一个或者多个基本表进行数据提取和重新组织,将数据以用户希望的方式重新呈现. 需要注意的是,视图的主要目的就是重新组织多个基础表的数据以新的方式展现,重点是数据展示,并不涉及到增删改的功能.(另一个主要功能是数据隔离) 对于现有市场上不同的数据库来说,对于视图的增删改都不支持,或者说支持的很不好,有很多约束条件. 有人说过,产品功能是有限的,用户需求是无限的,真理.我

DataSet之增删改查操作(DataGridView绑定)

DataSet数据集,数据缓存在客户端内存中,支持断开式连接.DataGridView控件绑定DataSet时,它自动的改变的DS的行的状态,而且在做增删改查的时候,可以借助SqlCommandBuilder类来完成. SqlCommandBuilder必须执行SELECT命令来检索元数据,所以它要求多往返服务器一次,从而增加了应用程序的开销,而且操作的表必须要有主键约束.优点是自动建立insertcommand等命令 1,添加操作 private void button2_Click(obje