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

序言

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里引用和配置插件(看代码注释)

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

?>

title) ?>

'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'=>'

'.Html::a(Yii::t('yii','Sales'), ['index'],[]).'

', 'type'=>'info', 'before'=>Html::a(''.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']).'    '.'', 'after'=>Html::a(''.Yii::t('yii', 'Reset Grid'), ['index'], ['class' => 'btn btn-info']), 'showFooter'=>false, ], 'toolbar' => [ ['content'=> Html::button('', ['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('', ['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(); ?>

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

常见问题

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

你可能感兴趣的:(列表——表头自定义显示字段)