首页 > 其他 > 详细

jqGrid学习笔记(一)

时间:2014-02-25 13:33:25      阅读:384      评论:0      收藏:0      [点我收藏+]

 

3.2、body中的代码
<!-- jqGrid table list4 -->
<table id="list4"></table>
<!-- jqGrid 分页 div gridPager -->
<div id="gridPager"></div>

 

其中,list4为列表jqGrid,gridPager为列表的分页div
3.3、js中的代码
bubuko.com,布布扣
bubuko.com,布布扣
$(document).ready(function(){
    $("#list4").jqGrid({
        url:contextPath + "search.action",
        datatype:"json", //数据来源,本地数据
        mtype:"POST",//提交方式
        height:420,//高度,表格高度。可为数值、百分比或‘auto‘
        //width:1000,//这个宽度不能为百分比
        autowidth:true,//自动宽
        colNames:[‘添加日期‘, ‘手机号码‘, ‘银行卡号‘,‘备注‘,‘操作‘],
        colModel:[
            //{name:‘id‘,index:‘id‘, width:‘10%‘, align:‘center‘ },
            {name:‘createDate‘,index:‘createDate‘, width:‘20%‘,align:‘center‘},
            {name:‘phoneNo‘,index:‘phoneNo‘, width:‘15%‘,align:‘center‘},
            {name:‘cardNo‘,index:‘cardNo‘, width:‘20%‘, align:"center"},
            {name:‘remark‘,index:‘remark‘, width:‘35%‘, align:"left", sortable:false},
            {name:‘del‘,index:‘del‘, width:‘10%‘,align:"center", sortable:false}
        ],
        rownumbers:true,//添加左侧行号
        //altRows:true,//设置为交替行表格,默认为false
        //sortname:‘createDate‘,
        //sortorder:‘asc‘,
        viewrecords: true,//是否在浏览导航栏显示记录总数
        rowNum:15,//每页显示记录数
        rowList:[15,20,25],//用于改变显示行数的下拉列表框的元素数组。
        jsonReader:{
            id: "blackId",//设置返回参数中,表格ID的名字为blackId
            repeatitems : false
        },
        pager:$(‘#gridPager‘)
    });
});
bubuko.com,布布扣
bubuko.com,布布扣

 

至此,整个使用jqGrid的前端使用就基本完毕了,当加载此页面的时候,将初始化jqGrid表格,并通过url请求数据,返回datatype类型的数据。至于后台的数据,大家可以自己调用,并返回json格式的数据即可填充表格。 具体的参数可以查询jqGrid API。

jqGrid学习笔记(一)

原文:http://www.cnblogs.com/zhhq/p/3564878.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!