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

posted @ 2015-02-05 18:54  思益  阅读(912)  评论(0编辑  收藏  举报