Home  >  Article  >  Web Front-end  >  EasyUI DataGrid combines with ThinkPHP to implement addition, deletion, modification and search operations for beginners_html/css_WEB-ITnose

EasyUI DataGrid combines with ThinkPHP to implement addition, deletion, modification and search operations for beginners_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:47:141287browse

EasyUI is a collection of user interface plug-ins based on jQuery; DataGrid is a data table;

ThinkPHP is a fast and simple lightweight PHP development framework based on MVC and object-oriented.

The integrated development environment used is WAMPSever, (wampserver is a development kit that integrates Apache, PHP and MySQL, and supports switching between different PHP versions, MySQL versions and Apache versions)

The effect is as follows:

The main code is as follows

1. Define a table

<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" is a custom format in easyui. data-options are used to initialize attributes. The attributes here include rownumbers to display the number of rows. singleSelect indicates the selected status of the row;

url:'{U(read)}' First, ThinkPHP's U method (reference: http://www.thinkphp.cn/info/132.html) is used To complete the assembly of the URL address, the call in the template adopts the method of {:U('address', 'parameter'...)}. Secondly, the data format used by EasyUI is json, which is in the controller. The read method outputs data in json format. toolbar:'#tb'This is the toolbar of the table, which is to add, delete and modify.

The toolbar that defines the table is as follows:

<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>

Note: the id here should correspond to the toolbar: '#tb';

2. When you click Add or Modify, a dialog box will pop up. The code is as follows:

<!--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' defines a dialog box because it needs to communicate with the background Interaction, a form is installed in this dialog box, and some input elements inside need to be verified. required="true" means that the elements must be filled in

class="easyui-validatebox" defines the prompt after verification failure. , buttons="#dlg-buttons" indicates the two confirmation and cancel buttons below this dialog box. novalidate means no verification.

Buttons in the dialog box:

<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. Page js function

  <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 is not yet I know a lot about it, so I referred to the code on the Internet. $.messager.show is the message prompt box provided by EasyUI (reference: http://www.jeasyui.net/demo/371.html), which can display a message window in the lower right corner of the screen. $.messager.confirm is an interactive message that pops up a message confirmation box.

4. Code in the controller (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));         }     }     }?>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn