ph-row-selector attribute
It’s for traditional multipage webpages, Single page app has no need to use this pagehelper.
Will keep track of the selected rows and consume it in ph-params.
Default id extractor:
this.valueAttr = (this.cfg && this.cfg.rowSelector?.attr) || "id";
this.idRegex = new RegExp(
(this.cfg && this.cfg.rowSelector?.ptn) || "_row_(.*)"
);
attributes for this helper:
| name | descriptio | link |
|---|---|---|
| ph-row-selector | ph-row-selector="todo", for individual select item, add ph-row-delete-selector=closest('tr'), when sever response delete row, what to delete. | |
| ph-row-selector-all | ph-row-selector-all="todo", for select all item | |
| ph-selector-listener | ph-selector-listener="todo", for menuitem to react on selection number.ph-config="toggle::disabled" or ph-config="toggle::classname" |
How row selector works?
Say we have a ph-row-selector="fruit", when user click to the value, the selected ids in memory/sessionStorage/localStorage will keep sync..
Bellow is select state of this path.
Show select state here.
<input type="checkbox" ph-row-selector="fruit" id="_row_101"/>
<input type="checkbox" ph-row-selector="fruit" id="_row_102"/>
<input type="checkbox" ph-row-selector="fruit" id="_row_103"/>
<label>All<input type="checkbox" ph-row-selector-all="fruit"></label>
And a ph-selector-listener="fruit" will be notified when selected id changes. Here use ph-config="toggle::disabled" to toggle the status of the button based on the selection number. User ph-config="toggle::your-class-name to toggle class.
<div class="select-all" ph-selector-listener="fruit" ph-config="toggle::disabled">
<button type="button" ph-mask="7" class="btn"
ph-pjax-link="."
ph-params="ids:::__selected_ids__/fruit">
New</button>
<button type="button" ph-mask="2" class="btn"
ph-pjax-link="."
ph-params="ids:::__selected_ids__/fruit">
Edit</button>
<button type="button" ph-mask="6" class="btn"
ph-ajax="../../fixtures/fruit"
ph-method="delete"
ph-params="ids:::__selected_ids__/fruit">
Delete</button>
</div>
How to get the selected ids by JS
In the intialize code assign the pagehelper and Alpine to window object.
<script type="module" ph-not-execute-me>
// ph-js-go-here
import { PageHelper } from "/forever/pagehelper/ph-1f304ae18424cd583620180e9d47e84b.js";
// ph-js-go-here
const pageHelper = new PageHelper({
debug: true,
alpine_before_start: function (Alpine, Swal) {
window.Alpine = Alpine;
window.Swal = Swal;
},
script_exclude_patterns: [/email-decode.min.js/],
after_pjax_load: () => {
},
});
pageHelper.enrich();
window.ph = pageHelper;
console.log("Alpine store:", window.Alpine.store('selectors'))
</script>
Now you are able to get the selectedIds by:
const ids = window.Alpine.store('selectors').all.images.map(it => {
if (typeof it === 'string') {
return parseInt(it);
} else {
return it;
}
});
Using ph.getSelectedIds() to get the selected ids for current url path.
<button
type="button"
class="btn"
x-on:click.prevent="alert(JSON.stringify(ph.getSelectedIds(),null, 2))">
Show selectedIds
</button>
</div>
Todo List
Show history state here.
| ID | Task | Due Date | Priority | |
|---|---|---|---|---|
| 1 | Finish project report | 2024-03-25 | High | |
| 2 | Buy groceries | 2024-03-24 | Medium | |
| 3 | Call mom | 2024-03-26 | Low |
Items per page:
<div
class="select-all"
ph-selector-listener="todo"
ph-config="toggle::disabled"
>
<button
type="button"
ph-mask="7"
class="btn"
ph-pjax-link="."
ph-params="ids:::__selected_ids__/todo"
>
New
</button>
<button
type="button"
ph-mask="2"
class="btn"
ph-pjax-link="."
ph-params="ids:::__selected_ids__/todo"
>
Edit
</button>
<button
type="button"
ph-mask="6"
class="btn"
ph-ajax="../../fixtures/todo"
ph-method="delete"
ph-params="ids:::__selected_ids__/todo"
>
Delete
</button>
</div>
<table>
<thead>
<tr>
<th style="text-align:left;">
<input
type="checkbox"
ph-row-selector-all="todo"
/>
</th>
<th>ID</th>
<th>Task</th>
<th>Due Date</th>
<th>Priority</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input
type="checkbox"
ph-row-selector="todo"
id="_row_1"
/>
</td>
<td>1</td>
<td>Finish project report</td>
<td>2024-03-25</td>
<td>High</td>
</tr>
<tr>
<td>
<input
type="checkbox"
ph-row-selector="todo"
id="_row_2"
/>
</td>
<td>2</td>
<td>Buy groceries</td>
<td>2024-03-24</td>
<td>Medium</td>
</tr>
<tr>
<td>
<input
type="checkbox"
ph-row-selector="todo"
id="_row_3"
/>
</td>
<td>3</td>
<td>Call mom</td>
<td>2024-03-26</td>
<td>Low</td>
</tr>
</tbody>
</table>
<div class="pagination">
<div>
<button
ph-params="*:*"
ph-qs-step="page:1,min:1,disabled"
ph-pjax-link="./"
>
« Prev
</button>
<button
class="active"
ph-pjax-link="./"
ph-params="*:*,page::1"
ph-qs-to-css="page:1,innerHTML,active"
>
1
</button>
<button
ph-pjax-link="./"
ph-params="*:*,page::2"
ph-qs-to-css="page:1,innerHTML,active"
>
2
</button>
<button
ph-pjax-link="./"
ph-params="*:*,page::3"
ph-qs-to-css="page:1,innerHTML,active"
>
3
</button>
<button
ph-params="*:*"
ph-qs-step="page:1,max:3,disabled"
ph-pjax-link="./"
>
Next »
</button>
</div>
<div>
<span>Items per page:</span>
<select
ph-page-submitter="pjax"
name="size"
ph-qs-to-value="size:5"
>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</div>
</div>
How ph-selector-listener react to the selection change. string will be treat as a class name.
type ToggleName = "disabled" | "visibility" | "display" | string;
Delete item
When server response body like bellow, if the the row has a ph-row-delete-selector attribute it will be deleted. based on the value of the ph-row-delete-selector:
- Has attribute but no value. –> just delete
- Starts with
closest(. –> will use closest css selector to choose the delete target. - Other value –> using
ele.querySelector || document.querySelector
{
"data": [
{
"action": "TOAST",
"params": {
"toast": {
"icon": "success",
"title": "Deleted.",
"timer": 3000
}
}
},
{
"action": "DELETE_ROWS",
"params": {
"ids": [
{
"name": "images",
"id": 127
}
]
}
}
]
}