序言
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'])
.' '.Html::a(Yii::t('yii','Sales pool'), ['index?t_for_sale=0'], ['class' => 'btn btn-info']).' '.'<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蓝色区域里。
相关资料
1、yii2-dynagrid插件演示地址：http://demos.krajee.com/dynagrid-demo
2、yii2-dynagrid插件详细介绍和属性配置文档：http://demos.krajee.com/dynagrid
