摘要：今天我就來講講插件的使用，它是如何實現列表表頭自定義顯示字段的，我把我的經驗分享出來，滿足一下不懂英語的人，給你們搭個快車。需求分析實現列表表頭自定義顯示字段，自定義表頭排序。

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