javascript - dgrid 行和双击事件

Question

我有一个 dgrid选择模式为 的表toggle .我的一个要求是实现双击一行来触发一个函数。

这是我所拥有的:

grid.on('.dgrid-content .dgrid-row:dblclick', function () {
    window.alert('Hello world!');
});

问题是双击也会导致 selection events dgrid-select和 dgrid-deselect触发，因为它还注册了两次单击以进行选择。

我曾尝试添加此代码，但无法按预期工作:

var timer;

grid.on('.dgrid-content .dgrid-row:click', function (event) {
    var row = this;
    if (timer) {
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
        clearTimeout(timer);
    } else {
        timer = window.setTimeout(function() {
            // something to make the click go through?
            row.emit('something here');
            clearTimeout(timer);
        }, 250);
    }
});

有没有办法实现这一目标？

我咨询过 How to use both onclick and ondblclick on an element?但是那里的答案在我的情况下似乎不起作用。

我还查看了 misc 实用程序，也许它是 debounce 我需要的功能，但我不知道如何使用它。

Answer 1

您可以使用函数 row和 cell 来自 Dgrid 类:

 define([
     "dojo/_base/declare",
     "dojo/_base/lang", // hitch
     "dgrid/OnDemandGrid"
 ], function (declare, lang, OnDemandGrid){
     return declare(OnDemandGrid, {

         _onSingleClickAction: function (event) {
             var row = this.row(event), // dgrid/Grid methods
                 cell = this.cell(event);

             /********************
             * WORKING WITH DATA *
             ********************/
         }, // _onSingleClickAction

         _onDblClickAction: function (event) {
             var row = this.row(event), // dgrid/Grid methods
                 cell = this.cell(event);

             /********************
             * WORKING WITH DATA *
             ********************/
         }, // _onDblClickAction

         postCreate: function () {
             this.inherited(arguments);

             this.on(".dgrid-content .dgrid-row:dblclick", lang.hitch(this, "_onDblClickAction"));
             this.on(".dgrid-content .dgrid-row:click", lang.hitch(this, "_onSingleClickAction"));
         } // postCreate
     }); // declare
 }); // define

最终类定义:

 define([
     "dojo/_base/declare",
     "dojo/_base/lang", // hitch
     "dgrid/OnDemandGrid"
 ], function (declare, lang, OnDemandGrid){
     return declare(OnDemandGrid, {

         onDblClick: function (row) {  // empty method for definition in childs
             console.log(row.id);      // record id from the store
             console.log(row.data);    // full object from the store
             console.log(row.element); // DOM element
         },

         _onDblClick: function (event) { // private method
             this.onDblClick(this.row(event)); // extract data from event
         }, // _onDblClick

         postCreate: function () {
             this.inherited(arguments);

             this.on(".dgrid-content .dgrid-row:dblclick", lang.hitch(this, "_onDblClick"));
         } // postCreate
     }); // declare
 }); // define

[1] https://github.com/SitePen/dgrid/blob/v1.2.1/doc/usage/Working-with-Events.md