In the case of easyUI DataGrid paging, click the small triangle icon in the header to reorder all the data in the database

Explain ：
When you click datagrid When the small triangle icon of a column in the header ,easyui It's sort of , But when we talk about datagrid In the case of paging , Click Sort to sort the data on the current page , And the demand requires me to sort all the data in the database , In this case, you can only arrange the order from the background and then return .

Took a look at the documentation , It is found that clicking the small triangle icon will trigger onSortColumn event , So we just need to ask the background again when this event is triggered datagrid The data is ready .

Then go straight to the code ~~

var sortOrder = "asc"; //  sort order ,asc： positive sequence ,desc： In reverse order 
var sortField = "NickName"; //  Name of the column to sort 

//  Initialize data list 
function initDatagrid() {
    
    $('#dg').datagrid({
        url: '/api/Member',
        method: "get",
        striped: true,
        border: true,
        selectOnCheck: false,
        checkOnSelect: false,
        remoteSort: true, //  Define whether to sort data from the server , To set up for true
        singleSelect: false,
        idField: 'MemberId',
        pagination: true,
        rownumbers: false,
        pageSize: 20,
        fitColumns: true,
        columns: [[                
                ...
        ]],
        //  Match the name of the column to be sorted with the positive order / These two parameters in reverse order are also transferred to the background for processing 
        onBeforeLoad: function (params) {
    
            params.nickName = $("#nickName").val();
            params.phone = $('#phone').val();
            params.sortField = sortField;
            params.sortOrder = sortOrder;
        },
        //  The event triggered when clicking a column to sort 
        onSortColumn: function (sort, order) {
    
            sortField = sort;  //  Name of the column to sort 
            sortOrder = order;  //  positive sequence or In reverse order 

            $('#dg').datagrid('reload');
        }
    });
}

But this is not perfect , stay easyui In the original Click onSortColumn Is to request a backstage , This point can be interrupted to test .
therefore , We need to block the original request , Otherwise, the background will be requested twice .
Specific measures , Is to modify jquery.easyui.js / jquery.easyui.min.js file .

stay jquery.easyui.js / jquery.easyui.min.js Search through the documents remoteSort, Find the following code

if(opts.remoteSort){
_646(_63c);
}else{
_647(_63c,$(_63c).datagrid("getData"));
}
opts.onSortColumn.call(_63c,opts.sortName,opts.sortOrder);
};

hold if Just comment out the code executed inside .（ In the picture above is _646(_63c);, It may be different ？？）.
PS：datagrid and treegrid There are remoteSort This east east , Don't get me wrong ！！

End.