yii2 GridView の共通操作、yii2gridview_PHP チュートリアル

yii2 GridView の共通操作、yii2gridview

著者: Bailang 出典: http://www.manks.top/article/yii2_gridview

この記事の著作権は著者に帰属しており、転載は自由ですが、この記述は著者の承諾なしに保持し、記事ページのわかりやすい位置に原文へのリンクを表示する必要があります。そうでない場合、当社は法的責任を追及する権利を留保します。

GridView で発生するほとんどの問題をインターネット上で収集してまとめました。その 1 つがお役に立てば幸いです。

以下に記載されていない GridView に関するよくある質問がある場合は、以下にメッセージを残してください。追加させていただきます。

• ドロップダウン検索

• 日付の書式設定と日付の検索可能化

• パラメータに基づいて表示するかどうかを決定します

• リンクをクリックするとジャンプできます

• 写真を見せる

• htmlレンダリング

• カスタマイズされたボタン

• 幅とその他のスタイルを設定する

• カスタムフィールド

• カスタマイズされた行スタイル

• JSオペレーションを呼び出すボタンを追加します

プルダウンして検索します。まず、予想されるレンダリングを見てみましょう

具体的にどうやって実装するの？データテーブルにはドロップダウン効果を必要とする多くのフィールドがある可能性があることを考慮して、最初に後続の操作を容易にするメソッドをモデルに実装します

次に、コードに進み、ドロップダウン検索を実装する方法を見てみましょう

このように、フィルタリング機能を実装するには、dataProvider にこのフィールドの検索条件を追加するだけです。

日付の書式設定、まずレンダリングを見てみましょう

2. データベースに保存されているタイムスタンプの種類が上図左の場合、以下のように出力する必要があります

上記はフォーマット出力の 2 つの方法を示していますが、どちらも使用できます。ただし、検索メカニズムを実装する場合、データベースに日時が格納されている場合は、dataProvider を変更する必要がなく、非常に便利です。

リーリー

リーリー

ケースの特定の列を表示するかどうか

簡単なケースを考えてみましょう

リーリー

リンクをクリックするとケースにジャンプできます

これは、次に説明する HTML レンダリング効果と非常によく似ています。ここで説明するのは、列の属性値の形式です。さまざまな形式については、ファイル yiii18nFormatter.php を確認してください。解決できます リーリー

写真ケースを表示

上記と同様に、ここではフォーマット形式を画像として指定するだけです。以下のコードを参照して、format の 2 番目のパラメータで画像サイズを設定できます。 リーリー

これはどういう意味ですか? たとえば、タイトルとマークされたフィールドがありますが、このタイトルには HTML タグが含まれています。 title123はpタグの形式で表示されており、以下のように形式をraw形式で指定するだけで参照できます。 リーリー

リストページのボタンを削除したくないが、「xxx を取得」などのボタンを追加したい場合があります。ここでは、ActionColumn クラスを設定し、構成項目テンプレートを変更し、テンプレートに追加された get-xxx をボタン項目に追加する必要があります リーリー

簡単な例を挙げると、タイトル列が長すぎます。まずこの列の幅を設定してもらえますか? 答え: はい。

例をご覧ください:

設定項目 headerOptions を指定するだけです。

いつカスタマイズするか?ここでは、テーブルに列を追加することを意味しますが、対応する列がデータベースに存在しません。注文消費額の新しい列を追加し、このフィールドがテーブルに存在しないとします リーリー

自定义行样式

有小伙伴说了，gii生成的这个gridview表格呀，行跟行的颜色不明显，看着难受，我滴乖乖，具体怎么难受咱们就不追究了。我们来看看怎么定义行样式

<?= GridView::<span>widget([
</span><span>//</span><span> ......</span>
    'dataProvider' => <span>$dataProvider</span>,
    'rowOptions' => <span>function</span>(<span>$model</span>, <span>$key</span>, <span>$index</span>, <span>$grid</span><span>) {
        </span><span>return</span> ['class' => <span>$index</span> % 2 ==0 ? 'label-red' : 'label-green'<span>];
    }</span>,
    <span>//</span><span> ......</span>
]); ?>

前面的操作我们都是依据列column的，这里因为是对行的控制，所以我们配置rowOptions要稍微注意一下。此外，自定义的label-red和label-green需要有对应的样式实现，这里我们看一下页面的实际效果

增加按钮调用js操作案例

那边产品经理走过来了，小王呀，你这个修改状态的功能很频繁，每次都要先点进详情页才能修改，能不能我在列表页面上鼠标那么一点就成功修改了呢？

其实就是一个异步请求操作了当前行的状态嘛，我们来看看gridview里面是怎么实现的。

<span>[
    </span>'class' => 'yii\grid\ActionColumn',
    'header' => '操作',
    'template' => '{view} {update} {update-status}',
    'buttons' =><span> [
        </span>'update-status' => <span>function</span> (<span>$url</span>, <span>$model</span>, <span>$key</span><span>) {
            </span><span>return</span> Html::a('更新状态', 'javascript:;', ['onclick'=>'update_status(this, '.<span>$model</span>->id.');']); },<span>
    ]</span>,<span>
]</span>,

还没完，我们还需要在页面写js实现方法 update_status, 关于如何在页面底部加载js请点击参考