Yii2 插件系列——kartikdetailDetailView

摘要：视图用属性属性放这关闭动画的数组格式如下提交时间测试姓名昵称联系人分类男性别注意如果编辑与保存刷新的页面分开写，那么记得也要在刷新的页面加上属性，不然保存刷新后加上的自定义字段就消失了。

前段时间研究了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;
    }
}

    "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