列表——表头自定义显示字段

最新推荐文章于 2022-02-18 16:19:50 发布

weixin_34221773

最新推荐文章于 2022-02-18 16:19:50 发布

阅读量922

点赞数

文章标签：前端 php c/c++ ViewUI

原文链接：https://segmentfault.com/a/1190000005009167

版权

序言

Yii2框架的扩展性能真的很不错，很多效果都可以通过插件去实现，你想不到的老外都帮你想好了，于是，人群中就流传了这么一句话：效果不会写不要紧，会用插件也不错。GitHub是一个庞大而且开放的资源库，平时有事没事可以到上面逛逛，收获会很大。今天我就来讲讲kartik-v/yii2-dynagrid插件的使用，它是如何实现列表表头自定义显示字段的，我把我的经验分享出来，满足一下不懂英语的人，给你们搭个快车。

需求分析

1、实现列表表头自定义显示字段，自定义表头排序。
2、把1的实现做成永不改变。
附图：
改变前图片
图片描述

改变后图片图片描述

代码分析

1、安装kartik-v/yii2-dynagrid插件
下载地址：https://github.com/kartik-v/yii2-dynagrid
1.1、composer安装。推荐使用，原因是通过composer安装源码全。
1.2、手动安装。不会composer安装但是想用这插件，怎么办？那就手动安装吧！手动安装好了也能用，就是有些插件吧，你手动安装的话会缺少些文件，在使用过程中根据错误提示修改就好了。
手动安装的方法：
大家可以根据我给你们的下载地址，把源码下载下来，然后解压放到项目的vendor文件夹下，把插件的文件夹命名为“yii2-dynagrid”，接着在vendor\composer\autoload_psr4.php文件里边加上这么一段代码：'kartik\\dynagrid\\' => array($vendorDir . '/kartik-v/yii2-dynagrid')，安装完成。

2、使用yii2-dynagrid插件
2.1、首先，创建两个表tbl_dynagrid和tbl_dynagrid_dtl
2.1.1、创建表tbl_dynagrid的执行语句

CREATE TABLE `tbl_dynagrid` (
  `id` varchar(100) NOT NULL COMMENT 'Unique dynagrid setting identifier',
  `filter_id` varchar(100) COMMENT 'Filter setting identifier',
  `sort_id` varchar(100) COMMENT 'Sort setting identifier',
  `data` varchar(5000) DEFAULT NULL COMMENT 'Json encoded data for the dynagrid configuration',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Dynagrid personalization configuration settings';

2.1.2、创建表tbl_dynagrid_dtl的执行语句

CREATE TABLE `tbl_dynagrid_dtl` (
  `id` varchar(100) NOT NULL COMMENT 'Unique dynagrid detail setting identifier',
  `category` varchar(10) NOT NULL COMMENT 'Dynagrid detail setting category "filter" or "sort"',
  `name` varchar(150) NOT NULL COMMENT 'Name to identify the dynagrid detail setting',
  `data` varchar(5000) DEFAULT NULL COMMENT 'Json encoded data for the dynagrid detail configuration',
  `dynagrid_id` varchar(100) NOT NULL COMMENT 'Related dynagrid identifier',
  PRIMARY KEY (`id`),
  UNIQUE KEY `tbl_dynagrid_dtl_UK1` (`name`,`category`,`dynagrid_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Dynagrid detail configuration settings';

2.2、然后，引入相关JS

'assets/3f00623f/jquery.js'， 
'assets/bd33b66/js/bootstrap.js'， 
'assets/global/plugins/select2/js/select2.full.js'， 
'assets/js/select2-krajee.min.js'，

这里要注意JS冲突的问题，多使用查看源代码，把该引的引入，多余注释掉。
2.3、接下来，在view里引用和配置插件(看代码注释)

<?php

use yii\helpers\Html;
use kartik\grid\GridView;
use kartik\dynagrid\DynaGrid; //引用yii2-dynaGrid插件
use yii\widgets\Pjax;
use api\modules\v1\models\User;
use api\modules\v1\tag\models\Tag;
use api\modules\v1\models\Sales;
use kartik\editable\Editable;

$this->title = Yii::('yii','Sales');
$this->params['breadcrumbs'][] = $this->title;

?>
<div class="page-content-wrapper">
    <div class="page-content">
                <div class="page-title">
                    <h3><?= Html::encode($this->title) ?></h3>
                </div>
        <?php
         // Pjax::begin(); 

 $gridColumns = [
    ['class' => 'kartik\grid\CheckboxColumn'],
    ['class' => 'kartik\grid\SerialColumn'],
   
                't_name',
                't_qq',
                't_phone',
                't_tel', 
                't_url:url', 
                't_company', 
                't_email:email', 
                't_for_sale',            
    [
        'class' => 'kartik\grid\ActionColumn',
        'dropdown' => false,
        'vAlign'=>'middle',

    ],
    

];

        echo DynaGrid::widget([
            'columns'=>$gridColumns,
            'storage'=>DynaGrid::TYPE_DB,//把列表表头自定义字段编辑后的数据插入到表里，实现编辑后永久保存。
            'theme'=>'panel-info',
            'showPersonalize'=>true,//打开工具栏才显示
            'allowFilterSetting'=>false,
            'allowSortSetting'=>true, //是否允许Default Sort
            'allowThemeSetting'=>false, //设置主题背景
            'enableMultiSort'=>true,
            'toggleButtonGrid'=>[  
                'title'=>Yii::t('yii','Personalize Grid Configuration'),
                'data-pjax'=>false,
            ],
            'toggleButtonFilter'=>[  //保存编辑过滤器按钮
                'title'=>Yii::t('yii','Save / Edit Grid Filter'),
                'data-pjax'=>false,
            ],
            'toggleButtonSort'=>[
                'title'=>Yii::t('yii','Save / Edit Grid Sort'),
                'data-pjax'=>false,
            ],
            
            'gridOptions'=>[
                'dataProvider'=>$dataProvider,
                'filterModel'=>$searchModel,
                'panel'=>[
                    'type' => GridView::TYPE_PRIMARY,
                    'heading'=>'<h3 class="panel-title"><i class="glyphicon glyphicon-th-list"></i> '.Html::a(Yii::t('yii','Sales'), ['index'],[]).' </h3>',
                    'type'=>'info',
                    'before'=>Html::a('<i class="glyphicon glyphicon-plus"></i>'.Yii::t('yii','Create Sales'), ['create'], ['class' => 'btn btn-success'])
                    .'&nbsp;&nbsp;&nbsp;&nbsp;'.Html::a(Yii::t('yii','Sales pool'), ['index?t_for_sale=0'], ['class' => 'btn btn-info']).'&nbsp;&nbsp;&nbsp;&nbsp;'.'<input type="button" value="转为公共线索" class="btn btn-primary" onclick="topublic()">', 
                    'after'=>Html::a('<i class="glyphicon glyphicon-repeat"></i>'.Yii::t('yii', 'Reset Grid'), ['index'], ['class' => 'btn btn-info']),
                    'showFooter'=>false,
                ],
                'toolbar' =>  [
                        ['content'=>
                            Html::button('<i class="glyphicon glyphicon-plus"></i>', ['type'=>'button', 'title'=>Yii::t('yii', 'Add Book'), 'class'=>'btn btn-success', 'onclick'=>'alert("This will launch the book creation form.\n\nDisabled for this demo!");']) . ' '.
                            Html::a('<i class="glyphicon glyphicon-repeat"></i>', ['index'], ['data-pjax'=>0, 'class' => 'btn btn-default', 'title'=>Yii::t('yii', 'Reset Grid')])
                        ],
                        ['content'=>'{dynagridFilter}{dynagridSort}{dynagrid}'],//列表表头自定义字段工具栏的设置，这个{dynagrid}就是设置表头自定义字段的按钮
                        '{export}',
                        '{toggleData}'
                ],
            ],
            'options'=>['id'=>'dynagrid-1'], // a unique identifier is important


        ]);


         // Pjax::end(); 
?>

    </div>

</div>

好了，到这里你试试看，是不是已经实现了列表表头自定义显示字段了。哈哈...

常见问题

1、下面这两个JS冲突：
"assets/global/plugins/jquery.min.js",
"assets/global/plugins/bootstrap/js/bootstrap.min.js",
解决方式：把冲突的JS给注释掉就好了。
2、JS没引用全。注意检查相关JS是否引全了。
3、提醒注意：测试的时候要拖动到位，必须拖进这Hidden / Fixed Columns蓝色区域里。

列表——表头自定义显示字段

序言

需求分析

代码分析

常见问题

相关资料