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

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



2. 本地装载jqgrid数据

var mydata = [{"ID":"1","username":"tim","loginTime":"13:10:23","state":"1","cz":"1"},

{"ID":"2","username":"lili","loginTime":"12:10:23","state":"1","cz":"1"}];

$("#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属性.

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

链接地址：http://blog.sciencenet.cn/blog-448935-804589.html