ajax获取json里的list,ajax获取json数据然后将其装载到jqgrid实现

1. 通过ajax同步获取json数据

2. 本地装载jqgrid数据

$("#grid").jqGrid({

datatype: "local",

data : mydata,Hei; font-size:14px"> colNames: ["ID","用户名","上次登录时间","状态","操作"],Hei; font-size:14px"> colModel: [

{ name: "ID",index: "ID",hidden: true,align: "center" },Hei; font-size:14px"> { name: "username",index: "username",width: 180,align:"center"},Hei; font-size:14px"> { name: "loginTime",index: "loginTime",width: 300,align:"center" },Hei; font-size:14px"> { name: "state",index: "state",Hei; font-size:14px"> { name: "cz",index: "cz",width: 360,align:"center" }

],Hei; font-size:14px"> onSelectRow: function (i,selected) {

},Hei; font-size:14px"> gridComplete: function(){

var ids = jQuery("#grid").jqGrid('getDataIDs');

for(var i in ids){

var cl = ids[i];

a = "";

// se = "";

jQuery("#grid").jqGrid('setRowData',ids[i],{cz:a});

}

},Hei; font-size:14px"> height: 300,Hei; font-size:14px"> // altRows:true,Hei; font-size:14px"> // pgbuttons: true,Hei; font-size:14px"> // pginput:true,Hei; font-size:14px"> //autowidth:true,Hei; font-size:14px"> // pager: "#pager",Hei; font-size:14px"> // rowNum: 10,Hei; font-size:14px"> // multiselect: true,Hei; font-size:14px"> // prmNames: { rows: "pageSize",page: "page" },Hei; font-size:14px"> // rowList: [10,20,30],Hei; font-size:14px"> // viewrecoders: true,Hei; font-size:14px"> caption: "系统用户信息"

});

3. action部分代码

List xtusers = (List)loginInfoDao.findByHql(" from Xtuser xtuser",null,0);

//将List转化为JSON

JSONArray json=JSONArray.fromObject(xtusers);

//设置编码,防止乱码

response.setCharacterEncoding("utf-8");

PrintWriter out;

try {

out = response.getWriter();

out.write(json.toString());

} catch (IOException ex) {

ex.printStackTrace();

}

附：本地装载数据后实现分页效果(这里无需显示总条数，适合于我。)

height: 'auto',Hei; font-size:14px"> pager: "#pager",Hei; font-size:14px"> rowNum: 10,Hei; font-size:14px"> prmNames: { rows: "pageSize",Hei; font-size:14px"> rowList: [10,Hei; font-size:14px"> 勿忘显示分页的div：

注意：从后台返回的json数据中如果有id，则将会覆盖jqgrid每行数据的id：

建议，自定义类中不要出现id属性.

转载本文请联系原作者获取授权，同时请注明本文来自程冬科学网博客。 链接地址：

http://blog.sciencenet.cn/blog-448935-804589.html

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。