jquery jqgrid 学习记录一

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为：http://www.trirand.com。

一、jqGrid特性：

• 基于jquery UI主题，开发者可以根据客户要求更换不同的主题。
• 兼容目前所有流行的web浏览器。
• Ajax分页，可以控制每页显示的记录数。
• 支持XML，JSON，数组形式的数据源。
• 提供丰富的选项配置及方法事件接口。
• 支持表格排序，支持拖动列、隐藏列。
• 支持滚动加载数据。
• 支持实时编辑保存数据内容。
• 支持子表格及树形表格。
• 支持多语言。
• 最关键目前是免费的。

二、入门学习

         head中加入引用

• css文件引入：

<link type="text/css" rel="stylesheet" href="jqGrid/themes/cupertino/jquery-ui-1.9.0.custom.min.css">
<link type="text/css" rel="stylesheet" href="jqGrid/themes/ui.jqgrid.css">

• js文件引入：

<script type="text/javascript" src="jquery-1.8.2.min.js" />
<script type="text/javascript" src="jqGrid/js/jquery-ui-1.9.0.custom.min.js"/>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-cn.js"/>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"/> 

       body中的代码

<!-- jqGrid table list4 -->
<table id="list"></table>
<!-- jqGrid 分页 div gridPager -->
<div id="gridPager"></div>

     其中，list为列表jqGrid，gridPager为列表的分页div

    JS代码如下：

$(document).ready(function(){
    $("#list").jqGrid({
        url:"AjaxService.aspx",
        datatype:"json", //数据来源，本地数据
        mtype:"Get",//提交方式
        height:420,//高度，表格高度。可为数值、百分比或'auto'
        width:1000,//这个宽度不能为百分比
        autowidth:true,//自动宽
        colNames:["期数","日期", "红号","蓝号"],
        colModel:[
            { name: "Issue", index: "Issue", width: 100 },
            { name: "OpenDate", index: "OpenDate", width: 100 },
            { name: "DataRed", index: "DataRed", width: 100, sortable: false },
            { name: "DataBlue", index: "DataRed", width: 100, 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')
    });
});