我有一个包含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
。
如果代码耗时1分钟,则可能是数据库或函数findAllStudentsOrderByColumn
的实现出现了严重问题。可能您有一些表示实体模型或数据库模型的类。如果性能太差,您必须非常仔细地检查执行数据库访问的代码,或者考虑使用对数据库的更直接的访问,在那里您可以直接指定数据库查询。我不是Java或Spring的开发人员,但我可以明确地说,如果5000中的10行的请求在1秒内得到更多,那么它已经太慢了。
看起来您需要从一个表中返回一些列,包括id
。所以你可以像一样用SELECT
获取数据
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)语法,但如果数据库不支持,则可以使用子查询
因为允许按每列排序,所以应该在表中的每列上创建INDEX以提高排序性能。(我认为每秒不会对Students表进行大量更改,因此索引不会降低表的性能)。
您应该考虑的另一件事是将序列化更改为JSON。String.format(""%s", someString)
的使用是危险的。有些字符必须使用字符进行转义。我指的是CCD_ 8和CCD_。您应该这样做以确保代码的安全。常见的做法是使用语言中现有的一些标准类进行序列化(例如,请参阅此处或此处)。
下一个技巧是使用jsonReader: {cell: ""}
并以形式返回该行的数据
["%s", "%s", "%s", "%s", "%s", "%s"]
而不是
{"id":"%s", "cell":["%s", "%s", "%s", "%s", "%s", "%s"]}
您不会发送两次id
值,也不会发送字符串"id"
"单元格"和其他一些不需要的字符("{",":",…)。
在客户端,您应该始终使用gridview: true
jqGrid选项。对于10行数据,您不会看到严重的差异,因为jqGrid会非常快,但对于更多的行,差异会非常明显。
最后一个建议:您应该使用formatter: 'date'
并以ISO 8601格式发送日期:如2012-03-20
。
好的,这里有一个基于JPA的部分答案(但我想将其调整为Hibernate应该几乎是微不足道的)。你应该能够做这样的事情,只获取必要的对象:
Query query = em.createQuery("select o from " + "Student"+ " as o order by o.id");
query.setFirstResult(start);
query.setMaxResults(end - start);
return query.getResultList();
对于计数,应该这样做:
Number count = (Number) em.createQuery("select count(id) from " + "Student").getSingleResult();
if (count == null) {
count = Integer.valueOf(0);
}
return count.intValue();
当我有更多信息时将进行编辑。