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

摘要：今天我就来讲讲插件的使用，它是如何实现列表表头自定义显示字段的，我把我的经验分享出来，满足一下不懂英语的人，给你们搭个快车。需求分析实现列表表头自定义显示字段，自定义表头排序。

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”，接着在vendorcomposerautoload_psr4.php文件里边加上这么一段代码："kartikdynagrid" => 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) ?>
                
         "kartikgridCheckboxColumn"],
    ["class" => "kartikgridSerialColumn"],
   
                "t_name",
                "t_qq",
                "t_phone",
                "t_tel", 
                "t_url:url", 
                "t_company", 
                "t_email:email", 
                "t_for_sale",            
    [
        "class" => "kartikgridActionColumn",
        "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.
Disabled 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