Yii2 插件系列——kartikdetailDetailView

graf 发布于2019-08-20 15:14 / 3617人阅读

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

前言

前段时间研究了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事务

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82104.html

Yii2 插件系列——kartikdetailDetailView

摘要：视图用属性属性放这关闭动画的数组格式如下提交时间测试姓名昵称联系人分类男性别注意如果编辑与保存刷新的页面分开写，那么记得也要在刷新的页面加上属性，不然保存刷新后加上的自定义字段就消失了。前言前段时间研究了DetailView插件结合自定义字段的显示与编辑，DetailView插件本身没有这么灵活，要实现这种效果必须得改造插件。显示与编辑DetailView插件都有了，只需要我们把自...

lieeps 2019-06-27 15:48 评论0 收藏0
Yii2系列教程六：集成编辑器

摘要：而这些问题目前的最好解决方案就是集成一个编辑器，鉴于大家这里不是指程序员都是喜欢所见即所得，所以，这里我主要是演示怎么集成所见即所得的富文本编辑器。原文来自： https://jellybool.com/post/programming-with-yii2-rich-text-input-with-redactor 首先，很惭愧的是，前几天都出去外面玩了，没有及时更新教程，...

xiaochao 2019-06-27 11:26 评论0 收藏0

发表评论

登陆后可评论

0条评论

graf

男|高级讲师

我要关注我要私信

TA的文章

web技术分享| LRU 缓存淘汰算法

阅读 3953·2021-11-24 09:39
自定义 OpenShift s2i 镜像与模板——OracleJDK8

阅读 3856·2021-11-22 12:07
便宜腾讯云云服务器选择推荐（优先新客三年实惠套餐）

阅读 1195·2021-11-04 16:10
求C n m（从n个数中选m个数，有多少种组合?问题）暴力—递归——回归数学公式，三种方法，层层优化

阅读 937·2021-09-07 09:59
Less 日常用法

阅读 1977·2019-08-30 15:55
埋坑一： vue中子组件调用兄弟组件方法

阅读 1021·2019-08-30 15:54
Javascript图片懒加载

阅读 806·2019-08-29 14:06
MyBatis插件使用--分页插件与性能拦截器

阅读 2546·2019-08-27 10:54

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

Yii2 插件系列——kartikdetailDetailView

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章