プリザンターの一覧画面をカスタマイズしてみます。
フィルター・ソートのリセットボタンの使い勝手が自分の感覚？と違う気がするので変更してみたいと思います！
フィルタとソートをまとめてリセットするボタンを追加します
バージョン
- プリザンターver1.4.15.0
スクリプトの作成
リセットボタン
一覧画面には、フィルタとソートそれぞれに対してリセットボタンがあります。
しかし、フィルタとソートをまとめてリセットしたい場合もあるため、そのボタンを追加しました。
全体
// ボタンを追加
function CreateAddResetButton() {
// resetAllがあったら何もしない
if (document.getElementById('resetAll')) return;
// ViewFilters_Resetが非表示で無かったら何もしない
if (!document.getElementById('ViewFilters_Reset')) return;
// ボタンを作成
const button = document.getElementById('ViewFilters_Reset').cloneNode(true); // trueで子要素もコピー
button.textContent = 'Allリセット';
// ボタンのIdを変更
button.id = 'resetAll';
button.addEventListener('click', () => AllReset());
// 要素を追加
document.getElementById("ViewFilters").prepend(button);
};
// フィルタとソートをまとめてリセット
function AllReset() {
const observer = new MutationObserver((mutationsList, observer) => {
// ソートのリセットをクリック
document.querySelector('.menu-sort > li.reset').click();
// 監視を停止
observer.disconnect();
});
// 監視を設定
observer.observe(document.getElementById('ViewModeContainer'), { attributes: true, childList: true, subtree: true });
// フィルタのリセットをクリック
document.getElementById('ViewFilters_Reset').click();
}
// ページ読み込み時に設定
CreateAddResetButton();
// $p.setで再描画時の設定
$p.events.on_grid_load = function () {
CreateAddResetButton();
};
ボタンの追加
- 見た目は既存のボタンに合わせるため、
ViewFilters_Resetをコピーしています - リセット後に再度ボタンを追加するため、
$p.events.on_grid_loadを設定しています
ボタンのイベント
-
フィルタのリセットは
document.getElementById('ViewFilters_Reset').click(); -
ソートのリセットは
document.querySelector('.menu-sort > li.reset').click(); -
しかし、それぞれを単純に続けて書くだけでは正常に処理されませんでした
-
リセット時に画面が再描画されたり、同期処理として進んでしまうため、適切に処理されないようです
-
そこで、一覧部分
ViewModeContainerをMutationObserverで監視する処理を追加しました -
クリックイベントは以下のようになっていました
$(function () {
$(document).on('click', '#ViewFilters_Reset', function () {
$p.send($(this));
});
});
$(document).on('click', '.menu-sort > li.reset', function (e) {
var $control = $(this);
var $grid = $control.closest('.grid');
var data = $p.getData($control);
data.Direction = $grid.attr('data-name');
data.TableId = $grid.attr('id');
data.TableSiteId = $grid.attr('data-id');
$('[data-id^="ViewSorters_"]').each(function () {
delete data[$(this).attr('data-id')];
});
$p.send($('#ViewSorters_Reset'));
e.stopPropagation();
});
完成
