注意点:
0,需要引用ui-lightness/jquery-ui.custom.css,ui.jqgrid.css以及jquery-1.9.0.min.js,jqgrid.local-en.js,jquery.jqgrid.min.js
1,除最后一个参数外,每个参数值后都必须带逗号,否则不显示结果集
2,大小写敏感,否则无效甚至不显示结果集
3,
grid是和跟浏览器的model有关系的,如果显示不出来,提示Grid can not be used this ('quirks') model,
那就尝试一下F12,IE中在右上角的Document model中找找IE7,IE8,IE9都行,只要不是quirks应该都行。
如果F12点击没用,就到浏览器的设置中勾选上F12 developer tool。
3,如何一切没问题,结果集出不来,就试试把注释给删了
准备工作:
下载0条所提到的文件,引用到页面。
使用:
var mydata=[
{name:"silone",sex:"male",age:"20"},
{name:"silone",sex:"male",age:"20"},
{name:"silone",sex:"male",age:"20"},
{name:"silone",sex:"male",age:"20"},
{name:"silone",sex:"male",age:"20"},
{name:"silone",sex:"male",age:"20"},
{name:"silone",sex:"male",age:"20"},
];
$("#list").jqGrid({ //#list只是通过jquery的id选择器去获取一个元素。
这个元素一定要是一个table
url:"parameters.loadData.action", //异步请求路径,获得的数据直接赋值给data,与有没有data这个属性无关
mtype:"post", //异步请求的方式,默认为get
data:mydata, //数据,数据的类型由datatype来决定,用了url就可以不用这个参数了
datatype:"local", //数据类型,有
local数组,json对象和xml对象等
height:"auto", //表的高度,可以是一个数字,如果是数字就不需要带引号了。
width:"auto", //表的宽度
colNames:["Opera","Name","Sex","Age"], //所有的列名,必须和colModel中数量对应
colModel:[ //
这是每个列的单元格模板,模板包括和数据对象的哪个字段对应和单元格的基本特征
{name:"opera",index:"opera",editable:true}, //name表示数据对象的字段,和colNames没有不可分割的关系。
{name:"name",index:"name",align:"center",width:"auto",height:"auto"},//index目前不懂
{name:"sex",index:"sex"},//align表示布局,默认为left,值可以取left,center,right
{name:"age",index:"age"},
],
shrinkToFit:false,//
增加水平滚动条,shrink为收缩的
意思,fit为适合的意思。取消表的收缩。
pager:"#pager", //
这是一个分页工具栏,工具栏必须依附于某个组件,要么给定一个组件的id,例如pager,#pager,
//要么给定一个 素,$("pager"),但必须是由juery语法去获取的,
// 使用document.getElementById("pager")不行。
viewrecords:true, //
分页工具栏上是否展示当前的页码,一页多少行,一共多少条数据
rowNum:7, //
默认一页显示多少行的数据
rowList:[7,14],//
在分页工具栏上提供多个选择,用于更改一页显示数据的行数。
sortname:"name",//
默认排序的列
//事件,具体事件查看事件字典
gridComplete:function(){ //
当数据初始化完毕后调用该方法
var ids = $("#list").jqGrid("getDataIDs");//
getDataIDs是一个死的字符串,表示一共方法名,
//
该方法获取每一行数据的id,返回数组
for(var i=0;i
$("#list").jqGrid("setRowData",ids[i],{opera:"Delete"});
//
setRowData方法是设置一行中的某一个或多个列值,给定rowid,再给定一个数组,格式为列名:值,
//
这个列名一定要在colModel和colName中存在,否则无效。
}
},
caption:"All User"
//表的标题
}
jqGrid的数据获取?
1,通过本地直接定义json对象或者定义数组对象,直接把引用赋值给data属性。
2,通过url请求,后台通过Writer写出json或者其它能够解析的数据,前台data接收,但不需要手动编写这个data属性指向。
jqGrid添加修改链接?
如上gridComplete事件
jqGrid的分页?