SharEDITor

教你成为全栈工程师(Full Stack Developer) 十四-实现漂亮的网站管理后台

全栈技术 教你成为全栈工程师(Full Stack Developer) 发表于 2016-04-27 16:58:26 阅读1506次


如果你按照前几章节的内容一步一步建设管理后台,你会发现在编辑BlogPost的界面中每一项都是堆叠在一起的,假如增加非常多的管理项,那么这个页面会拉的很长,又难看又不好管理,这时你是否想到可不可以把界面重新组织一下呢?这一节为你提供一个简单的方法重构界面

请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址

重组BlogPost编辑界面

 

打开src/AppBundle/Admin/BlogPostAdmin.php文件,修改configureFormFields方法,增加几行,像下面的样子:

 

        $formMapper
            ->with('Content', array('class' => 'col-md-9'))
            ->add('title', 'text')
            ->add('body', 'ckeditor', array('autoload' => true))
            ->add('create_time', 'sonata_type_date_picker', array(
                'format'=>'yyyy-MM-dd HH:mm:ss',
                'dp_default_date'        => date('Y-m-d H:i:s'),))
            ->end()

            ->with('Meta data', array('class' => 'col-md-3'))
            ->add('subject', 'sonata_type_model', array(
                'class' => 'AppBundle\Entity\Subject',
                'property' => 'name',
            ))
            ->add('category', 'sonata_type_model', array
                'class' => 'AppBundle\Entity\Category',
                'property' => 'name',
            ))
            ->end();

请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址

看下BlogPost编辑界面:

 

 

我们把有关分类的项目单独作为一列放到右侧,并且占据相对狭窄的宽度,是不是看起来井井有条了?

 

原理讲解

 

我们其实只增加了这样几行:

            ->with('Content', array('class' => 'col-md-9'))
    ……
            ->end()
    ……
            ->with('Meta data', array('class' => 'col-md-3'))
    ……
            ->end()

 

这是一种布局方式,with和end成对出现,它表示把其间的项目组织成一个组布局在一起,Content和Meta data都是组显示的名称,而col-md-9和col-md-3是bootstrap框架的内容,表示两个组放到一行里,列的宽度比例是9:3,有关bootstrap的详细内容后面再详细讨论