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 = "<a title='编辑' href='<%=projectName %>/Web/login/doLogout.action' ><img src='../common/images/edit.png' alt='编辑' style='height:22px;width:20px;' border='0'></a>"; // se = "<input style='height:22px;width:20px;' type='button' value='S' onclick="jQuery('#grid').saveRow('"+cl+"');" />"; 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<Xtuser> xtusers = (List<Xtuser>)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:<div id="pager" ></div> 。 注意:从后台返回的json数据中如果有id,则将会覆盖jqgrid每行数据的id: <TR id=3 class="ui-widget-content jqgrow ui-row-ltr" role=row tabIndex=-1></TR> 建议,自定义类中不要出现id属性. http://blog.sciencenet.cn/blog-448935-804589.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |