Yii2 插件系列——kartikdetailDetailView

lieeps 發布于2019-06-27 15:48 / 1887人閱讀

摘要：視圖用屬性屬性放這關閉動畫的數組格式如下提交時間測試姓名昵稱聯系人分類男性別注意如果編輯與保存刷新的頁面分開寫，那么記得也要在刷新的頁面加上屬性，不然保存刷新后加上的自定義字段就消失了。

前言

前段時間研究了DetailView插件結合自定義字段的顯示與編輯，DetailView插件本身沒有這么靈活，要實現這種效果必須得改造插件。顯示與編輯DetailView插件都有了，只需要我們把自定義的字段加進去就行可以實現了。但是怎么加進去呢？既然是自定義字段，那肯定是可有可無，不能寫死的，我來分享下具體實現思路吧！

效果圖

提交時間、昵稱、聯系人分類、性別屬于自定義字段

找插件源碼

找插件的源碼（vendorkartik-vyii2-detail-viewDetailView.php），可以通過它方法的命名或者打印測試找到相關的代碼，知點擊詳細時走插件的如下方法：

 /**
     * Renders the main detail view widget
     *
     * @return string the detail view content
     */
    protected function renderDetailView()
    {  
        $rows = [];
        foreach ($this->attributes as $attribute) {
            $rows[] = $this->renderAttributeRow($attribute);
        }
        $tag = ArrayHelper::remove($this->options, "tag", "table");
        $output = Html::tag($tag, implode("
", $rows), $this->options);
        return ($this->bootstrap && $this->responsive) ?
            "" . $output . "" :
            "" . $output . "";
    }

重寫類及其方法

1、類與方法都找到了，就重寫。把DetailView類以及renderDetailView方法里涉及的方法、組件都拷貝過來重寫一遍，并繼承父類kartikdetailDetailView。

2、仿造父類的public $attributes;屬性給子類增加public $custom;屬性，原因是$attributes屬性的字段與自定義字段走的不是同一個model，所以必須得定義一個新的屬性來用。

3、重寫完了之后代碼如下（重點注意的部分我在代碼中已加上注釋）：

 "hiddenInput",
        self::INPUT_TEXT => "textInput",
        self::INPUT_PASSWORD => "passwordInput",
        self::INPUT_TEXTAREA => "textArea",
        self::INPUT_CHECKBOX => "checkbox",
        self::INPUT_RADIO => "radio",
        self::INPUT_LIST_BOX => "listBox",
        self::INPUT_DROPDOWN_LIST => "dropDownList",
        self::INPUT_CHECKBOX_LIST => "checkboxList",
        self::INPUT_RADIO_LIST => "radioList",
        self::INPUT_HTML5_INPUT => "input",
        self::INPUT_FILE => "fileInput",
        self::INPUT_WIDGET => "widget",
    ];

    // dropdown inputs
    private static $_dropDownInputs = [
        self::INPUT_LIST_BOX => "listBox",
        self::INPUT_DROPDOWN_LIST => "dropDownList",
        self::INPUT_CHECKBOX_LIST => "checkboxList",
        self::INPUT_RADIO_LIST => "radioList",
    ];
    protected function renderDetailView()
    { 
        $rows = [];
        foreach ($this->attributes as $attribute) {
            $rows[] = $this->renderAttributeRow($attribute);
        }
        //注意點一：增加循環獲取自定義字段的值
        foreach ($this->custom["attributes"] as $attribute) {
            $rows[] = $this->renderCustomAttributeRow($attribute);
        }
        $tag = ArrayHelper::remove($this->options, "tag", "table");
        $output = Html::tag($tag, implode("
", $rows), $this->options);
        return ($this->bootstrap && $this->responsive) ?
            "" . $output . "" :
            "" . $output . "";
    }
    //自定義字段的顯示
    protected function renderCustomAttributeRow($attribute)
    {    
        //注意點二：只留這三行代碼，把其它多余的刪除
        $this->_rowOptions = ArrayHelper::getValue($attribute, "rowOptions", $this->rowOptions);
        $content = $this->renderCustomAttributeItem($attribute);
        return Html::tag("tr", $content, $this->_rowOptions);
    }
    protected function renderCustomAttributeItem($attribute)
    {
        $labelColOpts = ArrayHelper::getValue($attribute, "labelColOptions", $this->labelColOptions);
        $valueColOpts = ArrayHelper::getValue($attribute, "valueColOptions", $this->valueColOptions);
        if (ArrayHelper::getValue($attribute, "group", false)) {
            $groupOptions = ArrayHelper::getValue($attribute, "groupOptions", []);
            $label = ArrayHelper::getValue($attribute, "label", "");
            if (empty($groupOptions["colspan"])) {
                $groupOptions["colspan"] = 2;
            }
            return Html::tag("th", $label, $groupOptions);
        }
        if ($this->hideIfEmpty === true && empty($attribute["value"])) {
            Html::addCssClass($this->_rowOptions, "kv-view-hidden");
        }
        if (ArrayHelper::getValue($attribute, "type", "text") === self::INPUT_HIDDEN) {
            Html::addCssClass($this->_rowOptions, "kv-edit-hidden");
        }
        $value = $attribute["value"];
        if ($this->notSetIfEmpty && ($value === "" || $value === null)) {
            $value = null;
        }
        $dispAttr = $this->formatter->format($value, $attribute["format"]);
        Html::addCssClass($this->viewAttributeContainer, "kv-attribute");
        Html::addCssClass($this->editAttributeContainer, "kv-form-attribute");
        $output = Html::tag("div", $dispAttr, $this->viewAttributeContainer) . "
";
        //var_dump($this->editAttributeContainer);exit;
        if ($this->enableEditMode) {
          $editInput = ArrayHelper::getValue($attribute, "displayOnly", false) ? $dispAttr : $this->renderFormCustomAttribute($attribute);
          $output .= Html::tag("div", $editInput, $this->editAttributeContainer);
        }
        return Html::tag("th", $attribute["label"], $labelColOpts) . "
" . Html::tag("td", $output, $valueColOpts);
    }
    protected function renderFormCustomAttribute($config)
    {
        if (empty($config["attribute"])) {
            return "";
        }
        //注意點三：把這里的model注釋掉，不能用，這是attribute的model
        
        //$model = ArrayHelper::getValue($config, "editModel", $this->model);
        //if (!$model instanceof Model) {
            $model = $this->model;
        //}
        $attr = ArrayHelper::getValue($config, "updateAttr", $config["attribute"]);
        $input = ArrayHelper::getValue($config, "type", self::INPUT_TEXT);
        $fieldConfig = ArrayHelper::getValue($config, "fieldConfig", []);
        $inputWidth = ArrayHelper::getValue($config, "inputWidth", "");
        $container = ArrayHelper::getValue($config, "inputContainer", []);
        if ($inputWidth != "") {
            Html::addCssStyle($container, "width: {$inputWidth}"); // deprecated since v1.7.4
        }
        $template = ArrayHelper::getValue($fieldConfig, "template", "{input}
{error}
{hint}");
        $row = Html::tag("div", $template, $container);
        if (static::hasGridCol($container)) {
            $row = "" . $row . "";
        }
        $fieldConfig["template"] = $row;
        if (substr($input, 0, 8) == "kartik") {
            Config::validateInputWidget($input, "as an input widget for DetailView edit mode");
        } elseif ($input !== self::INPUT_WIDGET && !in_array($input, self::$_inputsList)) {
            throw new InvalidConfigException(
                "Invalid input type "{$input}" defined for the attribute "" . $config["attribute"] . ""."
            );
        }
        $options = ArrayHelper::getValue($config, "options", []);
        $widgetOptions = ArrayHelper::getValue($config, "widgetOptions", []);
        $class = ArrayHelper::remove($widgetOptions, "class", "");
        if (!empty($config["options"])) {
            $widgetOptions["options"] = $config["options"];
        }
        //return array("options"=> array("class"=> "form-group"));
        //return "yyyy";

        if (Config::isInputWidget($input)) {
            $class = $input;
            return $this->_form->field($model, $attr, $fieldConfig)->widget($class, $widgetOptions);
        }
        if ($input === self::INPUT_WIDGET) {
            if ($class == "") {
                throw new InvalidConfigException("Widget class not defined in "widgetOptions" for {$input}".");
            }
            return $this->_form->field($model, $attr, $fieldConfig)->widget($class, $widgetOptions);
        }
        if (in_array($input, self::$_dropDownInputs)) {
            $items = ArrayHelper::getValue($config, "items", []);
            return $this->_form->field($model, $attr, $fieldConfig)->$input($items, $options);
        }
        if ($input == self::INPUT_HTML5_INPUT) {
            $inputType = ArrayHelper::getValue($config, "inputType", self::INPUT_TEXT);
            return $this->_form->field($model, $attr, $fieldConfig)->$input($inputType, $options);
        }
        
        /*
            注意點四：把原來的返回值改寫。至于為什么要改寫成如下，原因有：
             1、用$this->_form->field()的話會走attribute的model，改寫失敗;
             2、可以參照$this->_form->field()的用法，然后查看原碼生成功div、input的規律你就明白為什么要這么改寫了。
        */
        $name = $this->custom["id"]."[".$config["attribute"]."]";
        $id   = strtolower($this->custom["id"])."-".$config["attribute"];
        $html = Html::input("text", $name, $config["value"], ["class" => "form-control","id"=> $id]);
        $html .= Html::tag("div", "", ["class" => "help-block"]);
        $html = Html::tag("div", $html, []);
        $fieldclass = "field-".$id;
        $html = Html::tag("div", $html, ["class" => $fieldclass]);
        return $html;
    }
}

視圖用custom屬性

    "contact-view",
        
        "formOptions"=>[
            "id"=>"contact-form-view",
            "action"=>"/contact/update?id=".$model->id."&salesId=".$model->sale_id,
            "options"=>["data-form"=>"public-form-submit"],
         ],
        "model" => $model,
        "condensed"=>false,
        "hover"=>true,
        "mode"=>Yii::$app->request->get("edit")=="t" ? DetailView::MODE_EDIT : DetailView::MODE_VIEW,
        "panel"=>[
           "heading"=>$this->title,
           "type"=>DetailView::TYPE_INFO,
        ],
        "custom" => $custom, //custom屬性放這
        "attributes" => $attributes,
        "deleteOptions"=>[
            "class"=>"prohibit deletet",
            "label"=>"",
        ],
        "enableEditMode"=>true,
        "fadeDelay"=>0, //關閉動畫
    ]) ?>

$custom的數組格式如下：

Array
(
    [id] => ClassForm
    [attributes] => Array
        (
            [0] => Array
                (
                    [attribute] => add_time
                    [value] => 
                    [label] => 提交時間
                    [format] => text
                )

            [1] => Array
                (
                    [attribute] => nickname
                    [value] => 測試姓名
                    [label] => 昵稱
                    [format] => text
                )

            [2] => Array
                (
                    [attribute] => sort
                    [value] => 
                    [label] => 聯系人分類
                    [format] => text
                )

            [3] => Array
                (
                    [attribute] => sex
                    [value] => 男
                    [label] => 性別
                    [format] => text
                )

        )

)

注意：如果編輯與保存刷新的頁面分開寫，那么記得也要在刷新的頁面加上custom屬性，不然保存刷新后加上的自定義字段就消失了。

總結分析

以上就是我要給大家分享的DetailView插件結合自定義字段的顯示與編輯的實現過程。
搞程序，水很深，不常總結，將來更費勁。
（完）

相關資料

1、DetailView

GPU云服務器云服務器 yii2 yii2分頁 Yii2框架 yii2事務

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/22560.html

Yii2 插件系列——kartikdetailDetailView

摘要：視圖用屬性屬性放這關閉動畫的數組格式如下提交時間測試姓名昵稱聯系人分類男性別注意如果編輯與保存刷新的頁面分開寫，那么記得也要在刷新的頁面加上屬性，不然保存刷新后加上的自定義字段就消失了。前言前段時間研究了DetailView插件結合自定義字段的顯示與編輯，DetailView插件本身沒有這么靈活，要實現這種效果必須得改造插件。顯示與編輯DetailView插件都有了，只需要我們把自...

graf 2019-08-20 15:14 評論0 收藏0
Yii2系列教程六：集成編輯器

摘要：而這些問題目前的最好解決方案就是集成一個編輯器，鑒于大家這里不是指程序員都是喜歡所見即所得，所以，這里我主要是演示怎么集成所見即所得的富文本編輯器。原文來自： https://jellybool.com/post/programming-with-yii2-rich-text-input-with-redactor 首先，很慚愧的是，前幾天都出去外面玩了，沒有及時更新教程，...

xiaochao 2019-06-27 11:26 評論0 收藏0