我可以用jqGrid实现延迟加载吗？

我有一个包含超过 5000 条数据记录的网格。该数据每天都在增长。当我加载带有网格的页面时，网格几乎需要一分钟才能显示我必须一次显示 10 行的数据。

那么是否可以用这个jqGrid实现延迟加载呢？

这是我生成 JSON 字符串的操作：

@RequestMapping(value = "studentjsondata", method = RequestMethod.GET)
public @ResponseBody String studentjsondata(HttpServletRequest httpServletRequest) {
    Format formatter = new SimpleDateFormat("MMMM dd, yyyy");
    String column = "id";
    if(httpServletRequest.getParameter("sidx") != null){
        column = httpServletRequest.getParameter("sidx");
    }
    String orderType = "DESC";
    if(httpServletRequest.getParameter("sord") != null){
        orderType = httpServletRequest.getParameter("sord").toUpperCase();
    }
    int page = 1;
    if(Integer.parseInt(httpServletRequest.getParameter("page")) >= 1){
        page = Integer.parseInt(httpServletRequest.getParameter("page"));
    }
    int limitAmount = 10;
    int limitStart = limitAmount*page - limitAmount;
    List<Student> students = Student.findAllStudentsOrderByColumn(column,orderType,limitStart,limitAmount).getResultList();  
    List<Student> countStudents = Student.findAllStudents();
    double tally = Math.ceil(countStudents.size()/10.0d);
    int totalPages = (int)tally;
    int records = countStudents.size();


    StringBuilder sb = new StringBuilder();
    sb.append("{\"page\":\"").append(page).append("\", \"records\":\"").append(records).append("\", \"total\":\"").append(totalPages).append("\", \"rows\":[");
    boolean first = true;
    for (Student s: students) {
        sb.append(first ? "" : ",");
        if (first) {
            first = false;
        }
        sb.append(String.format("{\"id\":\"%s\", \"cell\":[\"%s\", \"%s\", \"%s\", \"%s\", \"%s\", \"%s\"]}",s.getId(), s.getId(), s.getFirstName(), s.getLastName(),  formatter.format(s.getDateOfBirth().getTime()), s.getGender(), s.getMaritalStatus()));
    }
    sb.append("]}");
    return sb.toString();
}

这是 jqGrid 的页面：

$("#studentGrid").jqGrid({
            url: '/starburst/programmes/studentjsondata',
            datatype: 'json',
            height: 'auto',
            colNames:['id','First Name', 'Last Name', 'Date Of Birth', 'Gender', 'Marital Status'], 
            colModel:[ 
                {name:'id',index:'id', width:15}, 
                {name:'firstName',index:'firstName', width:30, formoptions:{elmprefix:'(*) '}, editable:true, edittype: 'text', editrules:{required:true}},
                {name:'lastName',index:'lastName', width:30, formoptions:{elmprefix:'(*) '}, editable:true, edittype: 'text',editrules:{required:true}},
                {name:'dateOfBirth',index:'dateOfBirth', width:30, formoptions:{elmprefix:'(*) '},editrules:{required:true}, editable:true, edittype: 'text',               
                    editoptions: {
                        dataInit: function(element) {
                            $(element).datepicker({dateFormat: 'MM dd, yy'})
                        }
                    } 
                },                    
                {name:'gender',index:'gender', width:30, formoptions:{elmprefix:'(*) '}, editable:true, editrules:{required:true}, edittype: 'select',
                    editoptions:{value:{}}
                },
                {name:'maritalStatus',index:'maritalStatus', width:30, formoptions:{elmprefix:'(*) '}, editable:true, editrules:{required:true}, edittype: 'select',
                    editoptions:{value:{}}
                }                    
            ],
            rowNum:10,
            autowidth: true,
            pager: '#pager', 
            sortname: 'id', 
            viewrecords: true, 
            sortorder: "desc",
            caption:"Students",
            emptyrecords: "Empty Records",
            subGrid: true,
            /* <![CDATA[ */ 
            onSelectRow: function(id){ 
                if((lastsel != 0)&&(id!==lastsel)){ 
                    $("#studentGrid").jqGrid('collapseSubGridRow', lastsel);                
                } 
                lastsel=id; 
            }/* ]]> */ 
        });
        $("#studentGrid").jqGrid('navGrid', "#pager", {edit:false,add:false,del:false,search:true},{ },{ },{ },
        { 
            sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
            closeOnEscape: true, 
            multipleSearch: true, 

请参阅下面的查询：

public static TypedQuery<tt.edu.sbcs.model.Student> findAllStudentsOrderByColumn(String column, String orderType, int limitStart, int limitAmount) {
    EntityManager em = Programme.entityManager();
    TypedQuery<Student> q = em.createQuery("SELECT o FROM Student AS o ORDER BY"+" "+column+" "+orderType, Student.class);
    q.setFirstResult(limitStart);//used to skip the first "N"  elements form the result set, it indexes results form zero 
    q.setMaxResults(limitAmount);
    return q;
}

我在上述操作中设置的限额。该值为 10。

首先，我发现在 1 分钟内加载 5000 行中的 10 行是非常慢。我认为在你的情况下，服务器代码而不是 jqGrid 是瓶颈。

首先非常怀疑你的代码行是

List<Student> countStudents = Student.findAllStudents();

你只需要得到号码的学生，但似乎你得到了所有学生的所有财产然后使用countStudents.size()在接下来的两行中。最大应该做的事情是这样的

SELECT COUNT(*) FROM dbo.Students

相反，这意味着你这样做SELECT * FROM dbo.Students.

可能是你的数据库或者函数的实现有严重的问题findAllStudentsOrderByColumn如果你的代码需要 1 分钟。也许您有一些代表实体模型或数据库模型的类。如果性能如此糟糕，您必须非常仔细地检查进行数据库访问的代码，或者考虑使用一些更直接的数据库访问方式，您可以在其中直接指定数据库查询。我不是 Java 或 Spring 开发人员，但我可以明确地说，如果 5000 中的 10 行请求得到更多，1 second比它已经太慢了。

看起来您需要从一个表中返回一些列，包括id。所以你可以通过以下方式获取数据SELECT like

SELECT TOP(10) id, firstName, lastName, dateOfBirth, gender, maritalStatus
FROM dbo.Students
ORDER BY id

获取第一页数据和类似以下内容

WITH GetAll (id, firstName, lastName, dateOfBirth, gender, maritalStatus) AS (
    SELECT id, firstName, lastName, dateOfBirth, gender, maritalStatus
    FROM dbo.Students
    ORDER BY id
), GetTop (id, firstName, lastName, dateOfBirth, gender, maritalStatus) AS (
    SELECT TOP(20) * FROM GetAll -- skip 2 pages per 10 rows
), GetNext (id, firstName, lastName, dateOfBirth, gender, maritalStatus) AS (
    SELECT TOP(10) a.* FROM GetAll AS a
        LEFT OUTER JOIN GetTop AS t ON t.id = a.id
    WHERE t.id IS NULL
)
SELECT * FROM GetNext

对于所有下一页。我用了公用表表达式 (CTE)语法，但如果您的数据库不支持，您可以使用子查询。

因为您允许按每一列排序，所以您应该在表中的每一列上创建索引以提高排序性能。 （我认为Students表每秒不会有很多变化，因此索引不会降低表的性能）。

您应该考虑的另一件事是将序列化更改为 JSON。的用法String.format("\"%s\", someString)很危险。有一些字符必须使用转义\特点。我是说" and \。您应该这样做以确保代码安全。常见的做法是使用您的语言中现有的一些标准类进行序列化（请参阅here or here例如）。

下一个技巧是使用jsonReader: {cell: ""}并返回表单中该行的数据

["%s", "%s", "%s", "%s", "%s", "%s"]

代替

{"id":"%s", "cell":["%s", "%s", "%s", "%s", "%s", "%s"]}

你不会发送id值两次并且不会发送字符串"id"“cell”和其他一些不需要的字符（'{'，'：'，...）。

在客户端你应该always use gridview: truejqGrid 选项。对于 10 行数据，您不会看到严重的差异，因为 jqGrid 会非常快，但是对于更多行，差异将非常明显。

最后的建议：你应该使用formatter: 'date'并将日期发送到ISO 8601格式：像2012-03-20.