dcat优化体验的小功能:双击触发编辑
dcat 默认的编辑按钮需要先点操作列的三个点,然后在弹框中选择编辑,这样使用感觉有点麻烦
这里通过 2 种方式查找编辑按钮,如果禁用了默认的编辑按钮,只要你自定义的编辑按钮的 class 带有 icon-edit 也能触发,这个是编辑图标的 css 类。如果你需要监听别的按钮,改一下 class 就行了。
可以直接在 bootsratp.php 里面调用 Admin::script, 但是我单独封装到 TableService,以免后期修改太多,bootsratp.php 太乱不好维护。
use Dcat\Admin\Admin;
class TableService {
// 双击表格行打开打开菜单
public function enableDoubleClickMenu(): TableService {
$script = <<<JS
// 监听每行的双击事件,如果该行有编辑按钮,就主动触发其点击
$("#grid-table > tbody > tr").on("dblclick",function() {
var obj = $(this).find(".grid__actions__ [class*=icon-edit]");
var obj2 = $(this).find(".grid__actions__ [action=edit]");
if (obj.length === 1) {
obj.trigger("click")
}else if(obj2.length===1){
obj2.trigger("click");
}
})
JS;
Admin::script($script);
return $this;
}
}
在 app/Admin/bootstrap.php
中调用后,可以全局使用双击来触发编辑按钮
app(TableService::class)->enableDoubleClickMenu();
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: