在dcat admin中实现双击按钮触发编辑功能代码示例

Laravel  /  管理员 发布于 3个月前   221

dcat-admin默认的编辑按钮需要先点操作列的三个点，然后在弹框中选择编辑，这样使用感觉有点麻烦，

下面来优化一下实现双击按钮触发编辑。

示例代码：

use Dcat\Admin\Admin;
class TableService {
    // 双击表格行打开打开菜单
    public function enableDoubleClickMenu(): TableService {
        $script = <<<JS
        // 监听每行的双击事件，如果该行有编辑按钮，就主动触发其点击
        $("#grid-table > tbody > tr").on("dblclick",function() {
        // 这里通过2种方式查找编辑按钮，如果禁用了默认的编辑按钮，只要你自定义的编辑按钮的class带有icon-edit也能触发，这个是编辑图标的css类
           var obj = $(this).find(".grid__actions__ [class*=icon-edit]");
           var obj2 = $(this).find(".grid__actions__ [action=edit]");
           // console.log(obj,obj2)
           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();