JQuery.jqGrid()入门

jQuery("#grid_id").jqGrid({                  //<table id="grid_id"></div>
    url: "UserServlet?method=getList",    	// 加载数据时访问的url     具体的返回可以是xml,json
    datarype:"json"                              //返回的数据类型，后台需要返回一个json字符串 json,xml,xmlstring,local,javascript,function
    mtype : 'GET'                                //请求的方式     GET，POST
    height: $(window).height(),              //设置表格高度  auto,%值
    autowidth:ture，                              //打开浏览器‘宽度自测’
 colName:['用户名','密码'],   // 表格表头 
    colModel:[
                {name : 'myac',index :'myac',width : 80,formatter:'actions',delOption:true},
                {label : '用户',name : 'user',index :'user',width : 80,},
                 ],
   pager : "#gridPager",                       //导航栏，分页组件<div id="gridPager"></div>
   rowNum : 10,                                //设置显示记录条数，默认20，若返回的记录条数大于rowNum,grid只会显示rowNum规定的条数
   rowList : [10,20,30],                     //用与设置grid能够接受的rowNum值
   viewrecords:true,                           //设置是否显示总条数
   sortname : "time",
   sortorder : 'asc',                             //排序的列，倒序、顺序             asc/desc
   multiselect: true,                           //开启多选
   rownumber : true,                          //左侧的行号
   loadonce:                                   //若设置成true，则只从服务器请求一次数据，datatype被修改为local，且以后所有的操作都是基于客户端的操作
   subGrid: ture                                //默认为false,展开子格
   subGridUrl
   subGridModel
   subGridRowExpanded：function(){}     //当点击“+”展开子表格时，将触发此选项定义的事件方法；
  subGridRowColapsed                          //当点击“-”收起子表格时，将触发此选项定义的事件方法；
   
  width:                                      //调整表格大小
  height                                      //调整表格大小
 
   pamNames :[]                                //用于设置jqgrid要向server传递的参数名称
   jsonReader:[]                               //用于解析server放回的json数据 

});
//jQuery(window).height()代表了当前可见区域的大小，

//而jQuery(document).height()则代表了整个文档的高度，可视具体情况使
 pamNames:默认值
prmNames : {
page:"page", // 表示请求页码的参数名称
rows:"rows", // 表示请求行数的参数名称
sort: "sidx", // 表示用于排序的列名的参数名称
order: "sord", // 表示采用的排序方式的参数名称
search:"_search", // 表示是否是搜索请求的参数名称
nd:"nd", // 表示已经发送请求的次数的参数名称
id:"id", // 表示当在编辑数据模块中发送数据时，使用的id的名称
oper:"oper", // operation参数名称
editoper:"edit", // 当在edit模式中提交数据时，操作的名称
addoper:"add", // 当在add模式中提交数据时，操作的名称
deloper:"del", // 当在delete模式中提交数据时，操作的名称
subgridid:"id", // 当点击以载入数据到子表时，传递的数据名称
npage: null,
totalrows:"totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal
}

列名：colNames
colNames : [ '操作', '用户帐号', '用户密码', '所属权限组', '员工id'],
列属性：colMode                      
label:标签，标记                    当colNames数组为空时，定义此列的标题。
name:对象的属性名                  其中保留字包括subgrid、cb、rn
index:索引                            //排序，和向server传递参数的名称
align                                   //日期格式，可用/，-和.。作为间隔符。y、Y、yyyy用于4位年，YY、yy用于2位的月，d、dd用于日期
key                                      //设置主键列
hidedlg                              //该值不会出现在模式对话框中，默认值为false
width:宽度                             //  px单位
hidden:false                     //该列是否隐藏，默认false
align:center                      //居中
editable:可编辑的
editoptios:
edittype                           定义行编辑和表单模式的编辑类型，可以是text、textarea、select、checkbox、 password、button、image和file。
editrules    
datefmt                          //日期格式，可用/，-和.。作为间隔符。y、Y、yyyy用于4位年，YY、yy用于2位的月，d、dd用于日期                  
sortable:true                   //该列是否可以排序 ，默认true
sorttype                        当datatype为local时，用于定义排序列类型。可取int/integer（整数）、float/number/currency（小数）、date（日期）、text（文本）
resizable: true,              //该列尺寸是否能更改，默认true
fromoptions                // 定义表单编辑的各种选项
formatter:'actions'           //用来预设类型或格式化该列的自定义函数名 ，常用预设格式：integer,date,currency、number
formatteroptions
formatter: function (cellvalue, options, rowObject) {
    if (cellvalue == '1') return "<img src='/Content/Images/checkokmark.gif'/>";
    if (cellvalue == '0') return "<img src='/Content/Images/checknomark.gif'/>";
}
delOption:true
删除（使用给出的actions）
editurl:"userServlet?method=delete",

jqGrid  API:
     jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);                         //加载本地数据  datatype:local
     jQuery("#gird_id").jqGrid('navGrid','#gridGager',{edit:false,add:false,del:false，position:'right'});  
   //设置的就是不显示编辑、添加、删除按钮(在分页组件里)
    jQuery("#grid_id").jqGrid('getGridParam','selrow');                  //返回选中行的id
   jQuery("#grid_id").jqGrid('getRowData',rowId);                       //获得选中行数据，rowId 行号
   jQuery("#grid_id").jqGrid('delRowData',rowId);                       //删除一行记录，servser不会删除
  jQuery("#grid_id").jqGrid('setRowData',rowId,datarow);            //更新一行数据，server不更新
  jQuery("#grid_id").jqGrid('addRowData',rowId,datarow);           //添加一行数据，server不添加
  jQuery("#grid_id").jqGrid('setSelection',"rowId");                      //选中某一行
 
  jQuery("#grid_id").jqGrid('editRow',rowId)                            //编行行
 jQuery("#rowed1").jqGrid('saveRow',rowId);                           //保存
 jQuery("#rowed1").jqGrid('restoreRow',rowId);                       //取消


  jQuery("#grid_id").jqGrid('getGridParam','selarrrow');              //返回多行被选中的id,
 jQuery("#grid_id").jqGrid('getDataIDs');                                //获得所有巨鹿的id
  jQuery("#grid_id").jqGrid('getGridParam','records')               //获得总记录条数

 

重新载入数据：

  jQuery(grid_selector).setGridParam({
        data : data[0].dataList
       }).trigger("reloadGrid");

清空数据：

$(grid_selector).clearGridData();