城东小巷分享 http://blog.sciencenet.cn/u/chengdong166

博文

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

已有 17195 次阅读 2014-6-19 07:53 |个人分类:jQuery学习|系统分类:科研笔记| jquery, AJAX, json, Struts

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


2. 本地装载jqgrid数据

$("#grid").jqGrid({

datatype: "local",

        data : mydata,

        colNames: ["ID", "用户名", "上次登录时间", "状态", "操作"],

        colModel: [

                   { name: "ID", index: "ID",  hidden: true, align: "center" },

                   { name: "username", index: "username", width: 180, align:"center"},

                   { name: "loginTime", index: "loginTime", width: 300, align:"center" },

                   { name: "state", index: "state", width: 180, align:"center" },

                   { name: "cz", index: "cz", width: 360, align:"center" }

                ],  

        onSelectRow: function (i, selected) {

        },

        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});

        }

    },

        height: 300,

//         altRows:true,

       // pgbuttons: true,

       // pginput:true,

        //autowidth:true,

//         pager: "#pager",

//         rowNum: 10,

//         multiselect: true,

//         prmNames: { rows: "pageSize", page: "page" },  

//         rowList: [10, 20, 30],

//         viewrecoders: true,

        caption: "系统用户信息"

    });

3. action部分代码

List<Xtuser> xtusers = (List<Xtuser>)loginInfoDao.findByHql(" from Xtuser xtuser", null, 0, 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' ,

        pager: "#pager",

        rowNum: 10,

        prmNames: { rows: "pageSize", page: "page" },  

        rowList: [10, 20, 30],

勿忘显示分页的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属性.






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

上一篇:js直接调用action的一种解决方法
下一篇:Hibernate操作Mysql数据库乱码问题
收藏 IP: 116.207.203.*| 热度|

0

该博文允许注册用户评论 请点击登录 评论 (0 个评论)

数据加载中...

Archiver|手机版|科学网 ( 京ICP备07017567号-12 )

GMT+8, 2024-6-18 03:26

Powered by ScienceNet.cn

Copyright © 2007- 中国科学报社

返回顶部