Question

我为我的数据网格实现了jqgrid，并启用了其搜索功能。当我使用桌面浏览器时，我可以像往常一样拖动搜索模式。但是，当我使用触摸将它拖到平板电脑上时，我无法做到这一点。

有谁知道如何启用它，以便我可以在平板电脑设备上拖动搜索模式？这是我的网格代码

$grid = $('#' + gridId);

var ListOfColName = ['Client PID', 'Date Assessed', 'Date Superseded', 'Client Name','Create From Existing', 'Detailed Care Plan'];

var ListOfColModel = [{ name: 'ClientPID', index: 'ClientPID', editable: true },{ name: 'ConsumerCarePlanId', formatter: ViewDetailLinkFormat, align: 'left', search: false}];

$grid.jqGrid({
        datatype: 'json',
        url: '../../JsGridService/ConsumerCarePlanSearchService.svc/GetCarePlanList',
        jsonReader: { repeatitems: false },
        loadui: "block",
        mtype: 'GET',
        rowNum: 5,
        rowList: [5, 10, 20, 30],
        viewrecords: true,
        colNames: ListOfColName,
        colModel: ListOfColModel,
        pager: '#' + pagerId,
        sortname: 'ClientPID',
        sortorder: 'desc',
        height: "100%",
        width: "100%",
        prmNames: { nd: null, search: null },
        caption: 'Care Plan List',
        autowidth: true,
        rownumbers: true,
        loadonce: true
    });
    $.extend($.jgrid.search, {
        multipleSearch: true,
        multipleGroup: true,
        recreateFilter: false,
        closeOnEscape: true,
        closeAfterSearch: true,
        overlay: 0
    });

谢谢。

Answer 1

触摸移动设备上的事件不会触发与Click Events在浏览器中触发相同的方式。这也是我一直在努力的事情，我有一个自定义地图拖动我写的应用程序，并且无法在触摸屏上拖动地图。

编辑：我使用以下内容来映射触摸事件：

$('#zoomIn').on('click', function( e ) {
    e.stopPropagation();
    var scale = parseInt(mapscale) - 1;
    rescaleMap( scale );
});

$('#zoomOut').on('click', function( e ){
    e.stopPropagation();
    var scale = parseInt(mapscale) + 1;
    rescaleMap( scale );
});    

$('#zoomIn').on('touchstart', function( e ) {
    var scale = parseInt(mapscale) - 1;
    rescaleMap( scale );
    e.stopPropagation();
});

$('#zoomOut').on('touchstart', function( e ){
    var scale = parseInt(mapscale) + 1;
    rescaleMap( scale );
    e.stopPropagation();
});

我包含了点击处理程序，所以你可以看到我实现了两次（这种不好的做法，代码应该在函数调用中以避免重复并遵循DRY模式）一次用于标准鼠标接口，一次用于移动界面。

稍后在我的代码中，我有以下内容在文档内部调用：

function touchHandler(event) {
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
         switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type = "mousemove"; break;        
        case "touchend":   type = "mouseup"; break;
        default: return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                              first.screenX, first.screenY, 
                              first.clientX, first.clientY, false, 
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);

    event.preventDefault();
}

这将触摸事件视为鼠标事件，并允许它们在正常的jQuery鼠标移动事件中运行。此代码在此处直接从此答案中提取并修改：JavaScript mapping touch events to mouse events

可拖动的句柄不可用（至少在我测试的设备上没有），因为它仍然专门针对鼠标事件。

JqGrid无法在平板电脑上拖动搜索模式

1 个答案:

JqG​​rid无法在平板电脑上拖动搜索模式

1 个答案:

JqGrid无法在平板电脑上拖动搜索模式