jqGrid-如何跟踪本地操作的速度

Question

我收到了创建两个应用程序的任务，一个是优化的，另一个是未优化的，我正在使用免费的jqGrid来显示DB中的数据。

我已经成功地创建了这两个，但我想跟踪本地操作（分页、搜索、排序）的速度。

我试着为每个触发操作的按钮设置事件，但它们似乎不会触发。。。我想知道jqGrid中是否有更好的东西可以使用，或者有什么建议可以帮助我解决这个问题。

我的jqGrid代码如下：

$(function () {
    var colModelSettings = [
        {name:'id', label:'id',key: true, hidden: true, width:10,sorttype:'number',editable: true},     
        {name:'judet',label:'Judet',width:70,   align: 'center',editable:true},
        {name:'localitate',label:'Localitate',width:80,editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center'},
        {name:'tipStrada',label:'tipStrada',editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']},width:100,align: 'center'  },
        {name:'denumire',label:'denumire',editable:true,width:100,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center'},
        {name:'cod',label:'cod',width:90,editable:true,align: 'center'}
        ];
    var beforeEvent = 0;    
    $("#gridAdrese").jqGrid({
        pager: $("#pagerGrid"), 
        url: "/UnoptimizedProject/rest/fetchData",
        datatype: "json",
        mtype: "POST",
        loadonce: true,
        forceClientSorting:true,
        height: window.innerHeight-250,
        sortname: 'id',
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        serializeGridData: function (postData) {
            if (postData.searchField === undefined) postData.searchField = null;
            if (postData.searchString === undefined) postData.searchString = null;
            if (postData.searchOper === undefined) postData.searchOper = null;
            return JSON.stringify(postData);
        },
        rowNum: 5000,
        viewrecords: true,
        loadComplete: function(){
            if(beforeEvent !== undefined){
                var afterEvent = new Date().getTime();
                console.log(afterEvent- beforeEvent);
                beforeEvent = 0;
            }
        },
        sortorder: 'asc', 
        caption:'Coduri Postale Neoptimizat' ,
        autowidth: true,
        colModel: colModelSettings,
    });
    $("#gridAdrese").jqGrid('navGrid', "#pagerGrid", {edit:false, add:false, del:false, save:false, cancel:false, search:true, searchtext: 'Search', refresh: false});
    $("#jqgh_gridAdrese_judet, #jqgh_gridAdrese_localitate, #jqgh_gridAdrese_tipStrada, #jqgh_gridAdrese_denumire, #jqgh_gridAdrese_cod ").on("click",function(){
        beforeEvent = new Date().getTime();
        console.log("Sorting");
    })
    $("#fbox_gridAdrese_search").on("click",function(){
        beforeEvent = new Date().getTime();
        console.log("searching");
    });
    $("#next_pagerGrid , #last_pagerGrid, #prev_pagerGrid, #first_pagerGrid").on("click",function(){
        beforeEvent = new Date().getTime();
        console.log("paging");
    })
});

Answer 1

您可以执行以下操作：

var startTime, measureTime = false, timeInterval,
    startMesure = function () {
        startTime = new Date();
        measureTime = true;
    };
startMesure();
$("#gridAdrese").jqGrid({
    url: "/UnoptimizedProject/rest/fetchData",
    ...
    onSortCol: function () {
        startMesure();
    },
    onPaging: function (pgButton, options) {
        //if (pgButton === "records") {
            startMesure();
        //}
    },
    searching: {
        closeAfterSearch: true,
        closeAfterReset: true,
        closeOnEscape: true,
        searchOnEnter: true,
        beforeSearch: function () {
            startMesure();
            return false; // allow filtering
        },
        onSearch: function () {
            startMesure();
        },
        onReset: function () {
            startMesure();
        },
    },
    loadComplete: function () {
        if (measureTime) {
            timeInterval = new Date() - startTime;
            setTimeout(function () {
                alert("Total loading time: " + timeInterval + "msnFull time: " +
                    (new Date() - startTime));
            }, 50);
            measureTime = false;
        }
    }
}).jqGrid("filterToolbar").jqGrid("navGrid");

在排序、分页或筛选开始时，我们将startTime相对于startTime = new Date();重置为当前时间。