Grid Script

Introduction

PhoenixGrid is a helper to operate table list includes sort, batch, select and ordering.

It will auto included in Phoenix admin template, or use this PHP code to init it:

\Phoenix\Script\PhoenixScript::grid();

// OR add custom selector of your <form >

\Phoenix\Script\PhoenixScript::grid('#my-form');

Sort

Sort this table by a column name:

// JS
Phoenix.Grid.sort('created', 'DESC');

After this method called, the form will auto submit and refresh page.

This method will send list_ordering and list_direction two variables to controller then you can use them to rebuild your SQL.

Check Row

Tick a checkbox of specify row.

// JS

// Start row is 0, so we tick the second row.
Phoenix.Grid.checkRow(1);

You must print a checkbox with row number in HTML:

<input type="checkbox" class="grid-checkbox" data-row-number="1" name="id[]" value="2">

Or use GridHelper to generate this checkbox in template:

{{-- In Edge --}}

@foreach ($items as $i => $item)
    @php($grid->setItem($item, $i))
    <tr>
        {{-- CHECKBOX --}}
        <td>
            {!! $grid->checkbox() !!}
        </td>

    {{-- ... --}}

@endforeach

Update Row

This method can update a row with specify data by sending request to BatchController:

// JS

Phoenix.Grid.updateRow(3, null, {task: 'publish'});

This method will update row 3 state => 1.

You must prepare checkboxes in HTML first to support this method

Send Batch Task

Send a batch task to update rows:

Phoenix.Grid.batch('unpublish');

Copy Row

Send a request to duplicate a row:

Phoenix.Grid.copyRow(3);

Delete List

Delete checked rows.

Phoenix.Grid.deleteList();

// Add custom confirm message
Phoenix.Grid.deleteList('Are you sure?');

Delete Row

Phoenix.Grid.deleteRow(3);

Toggle All Checkboxes

Phoenix.Grid.toggleAll();

More Methods

// Count checked checkboxes
Phoenix.Grid.countChecked();

// Get Checked boxes
Phoenix.Grid.getChecked();

// Validate there has one or more checked boxes.
// The method will throw Error instantly if no checked
try
{
    Phoenix.Grid.hasChecked().batch(...);
}
catch (Error)
{
    // ...
}

// Reorder
Phoenix.Grid.reorderAll();
Phoenix.Grid.reorder();

Multi-Select

Use this script you can press shift + click to select multiple checkboxes:

\Phoenix\Script\PhoenixScript::multiSelect();

// Custom selector
\Phoenix\Script\PhoenixScript::multiSelect('#my-form table');

If you found a typo or error, please help us improve this document.