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

yii2 GridView の共通操作、yii2gridview

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

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

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

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

• ドロップダウン検索

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

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

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

• 写真を見せる

• htmlレンダリング

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

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

• カスタムフィールド

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

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

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

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

リーリー

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

リーリー

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

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

ケースバイケースでご相談させていただきます

1. データベース フィールド created_at に保存されている時刻形式が date または datetime の場合、上の図の右側に示すように、フィールド created_at をグリッドビューに直接出力するだけです。

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

リーリー

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

コードは次のとおりです

リーリー

データベースにタイムスタンプが保存されている場合、

最初のステップは、以下の図に示すように、対応するルールを変更することです

2 番目のステップでは、次のコードを参照して dataProvider を変更できます

リーリー

ここで少しまとめます。個人的には、タイムスタンプを保存するのは非常に面倒だと思います。良い提案があれば、以下にメッセージを残してください。

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

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

条件: getパラメータ型がある

要件: type の値が 1 に等しい場合のみ、列名が表示されます。それ以外の場合、列は表示されません

コードは次のように実装されます:

リーリー

実装方法も非常に簡単です。

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

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

写真ケースを表示

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

htmlレンダリングのケース

これはどういう意味ですか? たとえば、タイトルとマークされたフィールドがありますが、このタイトルには 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请点击参考

http://www.bkjia.com/PHPjc/1122386.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1122386.htmlTechArticleyii2 GridView常见操作，yii2gridview 作者：白狼 出处：http://www.manks.top/article/yii2_gridview 本文版权归作者，欢迎转载，但未经作者同意必须保留此...