EasyUI DataGrid と ThinkPHP を組み合わせて、beginer_html/css_WEB-ITnose の追加、削除、変更、検索操作を実装します。

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('address', 'parameter'...)} のメソッドが採用されます。 次に、使用されるデータ形式です。 EasyUIのデータはjsonであり、コントローラーのreadメソッドはjson形式のデータを出力します。ツールバー:'#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 はツールバーに対応する必要があります: '#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' は、背景と対話する必要があるため、このダイアログ ボックス内の入力要素の一部をインストールする必要があります。 required="true" は必要であることを意味します。要素を入力します

class="easyui-validatebox" は検証失敗後のプロンプトを定義します。buttons="#dlg-buttons" はその下の 2 つの確認ボタンとキャンセル ボタンを表します。ダイアログボックス。 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. Page 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 はまだあまり得意ではないので、インターネット上のコードを参照しました。 $.messager.show は、EasyUI (参考: http://www.jeasyui.net/demo/371.html) が提供するメッセージ プロンプト ボックスで、画面右下にメッセージ ウィンドウを表示できます。 $.messager.confirm は、メッセージ確認ボックスをポップアップ表示する対話型メッセージです。

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;