【问题标题】:Sort only the current page rows in jqgrid仅对 jqgrid 中的当前页面行进行排序
【发布时间】:2016-05-03 09:49:48
【问题描述】:

我想在页面级别的网格中实现排序功能。也就是说,如果我有 100 条记录,并且 10 条记录显示在一页中,每页有 10 行。这意味着我有 10 页,每页 10 行。

现在问题来了。如果我在下面的代码中对某个 id 的列进行排序,它将对整个行进行排序,并将在当前页面中显示以前根本不存在的记录 (99) (1)。

现在我如何对仅出现在该页面上的记录进行排序以获取以下代码?

示例:如果我对 page1 中的某个 id 应用排序,则按升序显示一些 id 包含 1 到 10,按降序显示它应该包含 10 到 1。我们真的能做到这一点吗?

请帮助我解决这个问题,因为我对 jqgrid 非常陌生,并寻求有关基本问题的帮助。

var myGrid = $("#mygrid").jqGrid({
                    datatype: 'local',
                    colModel: [
                        { name: 'AID', label: 'Some ID', key: true, width: 100, editable: false, sorttype: "int" },
                        { name: 'Name', width: 300, editable: false },
                        { name: 'Group', width: 100, editable: false },
                        { name: 'Info', width: 100, editable: false },
                        { name: 'AValue', width: 100, editable: true, edittype: 'text' }
                    ],
                    pager: '#mypager',
                    rowNum: 10,
                    rowList: [10, 20, 500],
                    viewrecords: true,
                    autowidth: true,
                    sortname: 'AID',
                    sortorder: 'desc'
                });
                myGrid.jqGrid('navGrid','#mypager',{edit:false,add:false,del:false,search:false});

                var mydata = [];
                for (var i = 0; i < 100; i++) {
                   mydata.push({AID:i,Name:"123",Group:"456",Info:"78",AValue:"8"});
                }
                myGrid.setGridParam({data: mydata}).trigger("reloadGrid");

【问题讨论】:

    标签: javascript jquery asp.net-mvc sorting jqgrid


    【解决方案1】:

    您是否考虑过使用后端来管理分页和排序?

    我使用 SQL Server 来执行此操作,因此始终发送当前页面、pageSize、sortField、sortOder。以下是相同的示例:

    CREATE PROCEDURE [dbo].[usp_GetGroupsList]
    

    ( @PageNum INT=1, @PageSize INT=10, @OrderField VARCHAR(32)='id',
    @OrderDir VARCHAR(8)='asc', @name nvarchar(100) = '', @description nvarchar(100) = '' ) 作为 开始 设置无计数;

    ;WITH groupList AS (
        SELECT 
            RowNum = ROW_NUMBER() OVER(ORDER BY               
                                            CASE WHEN @OrderField = 'id' AND @OrderDir='asc' THEN g.Id END ASC,              
                                            CASE WHEN @OrderField = 'id' AND @OrderDir='desc' THEN g.Id END DESC, 
    
                                            CASE WHEN @OrderField = 'name' AND @OrderDir='asc' THEN g.[Name] END ASC,              
                                            CASE WHEN @OrderField = 'name' AND @OrderDir='desc' THEN g.[Name] END DESC, 
    
                                            CASE WHEN @OrderField = 'description' AND @OrderDir='asc' THEN g.[Description] END ASC,              
                                            CASE WHEN @OrderField = 'description' AND @OrderDir='desc' THEN g.[Description] END DESC
                                        )
            ,g.Id GroupId
            ,g.[Name]
            ,g.[Description]
        FROM 
            [cx_Security].[Groups] g
        WHERE 
            (isnull(@name,'') = '' OR g.[Name] like '%' + @name + '%')
            AND (isnull(@description,'') = '' OR g.[Description] like '%' + @description + '%')
            AND g.IsActive = 1
    )
    
    SELECT 
        g.GroupId
        ,g.[Name]
        ,g.[Description]
        ,PS.TotalRec
    FROM 
        groupList g
        INNER JOIN (SELECT COUNT(RowNum) TotalRec FROM groupList) PS ON 1=1
    WHERE @PageNum = 0 OR (RowNum BETWEEN (@PageNum - 1) * @PageSize + 1 AND @PageNum * @PageSize)
    

    结束

    【讨论】:

    • 我没有使用服务器端分页。相反,我使用了 loadonce:true 并将整个数据加载到页面。
    • 如果您使用不同的函数对表格进行排序,我说的是不使用 jqgrid 的排序功能。像这样的东西:link
    猜你喜欢
    • 1970-01-01
    • 2023-03-26
    • 2015-02-10
    • 2011-12-04
    • 2019-08-18
    • 2015-02-23
    • 2017-10-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多