README

此包将 JQuery FancyGrid 集成到 Symfony。有关详细信息，请参阅 https://fancygrid.com。

更多示例请参阅 https://fancygrid.com/samples/

安装

composer require cwd/fancygrid-bundle

添加到 AppKernel.php

[...]
new Cwd\FancyGridBundle\CwdFancyGridBundle(),
[...]

或 bundels.php

[...]
'Cwd\FancyGridBundle\CwdFancyGridBundle' => ['all' => true],
[...]

添加到 config.yml（您可以使用所有 JavaScript 选项，请参阅 https://fancygrid.com/api/config）

cwd_fancy_grid:
  js_options:
    theme: 'bootstrap'
    height: 'fit'
    trackOver: true
    i18n: '%locale%'
    menu: true
    selModel: 'row'
    striped: true
    columnLines: false
    searching: true
    textSelection: true
    refreshButton: true
    defaults:
      resizable: true
      sortable: true
      menu: true
    controllers: ['cwdcontrol']  

如果您有许可证，请将其添加到配置中

cwd_fancy_grid:
  license: '1234123123123123123123123'
  [...]

创建您的第一个网格

<?php
namespace AppBundle\Grid;

use Cwd\FancyGridBundle\Column\NumberType;
use Cwd\FancyGridBundle\Column\TextType;
use Cwd\FancyGridBundle\Grid\AbstractGrid;
use Cwd\FancyGridBundle\Grid\GridBuilderInterface;
use Doctrine\Common\Persistence\ObjectManager;
use Doctrine\ORM\QueryBuilder;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;

class UserGrid extends AbstractGrid
{
    /**
     * @param GridBuilderInterface $builder
     * @param array                $options
     */
    public function buildGrid(GridBuilderInterface $builder, array $options)
    {
        $builder->add(new NumberType('id', 'u.id', ['label' => 'ID', 'identifier' => true]))
                ->add(new TextType('firstname', 'u.firstname', ['label' => 'Firstname']))
                ->add(new TextType('lastname', 'u.lastname', ['label' => 'Lastname']))
                ->add(new TextType('email', 'u.email', ['label' => 'Email']));

    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        parent::configureOptions($resolver);

        $resolver->setDefaults(array(
            'default_sorts' => array('u.id' => false),
            'data_route' => 'app_user_ajaxdata',
        ));
    }


    /**
     * @param ObjectManager $objectManager
     * @param array         $params
     *
     * @return QueryBuilder
     */
    public function getQueryBuilder(ObjectManager $objectManager, array $params = [])
    {
        $qb = $objectManager
            ->getRepository('AppBundle\Model\User')
            ->createQueryBuilder('u')
            ->orderBy('u.lastname', 'ASC');

        return $qb;
    }
}

添加控制器操作

<?php
class UserController {
    [...]
      
    /**
    * @param Request $request
    *
    * @Route("/list/data")
    * @Method({"GET", "POST"})
    * @return JsonResponse
    */
    public function ajaxDataAction(Request $request)
    {
       $options = [
           'filter' => urldecode($request->get('filter', '')),
           'page' => $request->get('page', 1),
           'sortField' => $request->get('sort'),
           'sortDir' => $request->get('dir'),
       ];
    
       $grid = $this->getGrid($options);
       $data = $grid->getData();
    
       return new JsonResponse($data);
    }
       
    /**
     * @Route("/list")
     * @Route("/")
     * @Method({"GET"})
     * @Template("AppBundle:Grid:list.html.twig")
     * Security("has_role('ROLE_ADMIN')")
     *
     * @return array
     */
    public function listAction()
    {
        $grid = $this->getGrid();

        return array(
            'grid'        => $grid,
        );
    }  
         
    /**
     * @param array $options
     *
     * @return GridBuilderInterface
     */
    protected function getGrid(array $options = [])
    {
        return $this->get('cwd_fancygrid.grid.factory')->create(UserGrid::class), $options);
    }     

和视图

<div id="{{ grid.id }}" style="width:99%"></div>
<script type="text/javascript">
    {{ fancygrid(grid) }}
</script>

{# Add the Javascript and CSS files (after jQuery is loaded) #}
<script type="text/javascript" src="https://cdn.fancygrid.com/fancy.full.min.js"></script>
<link rel="stylesheet" href="https://code.fancygrid.com/fancy.min.css" />