jqgrid需要引用哪些文件

一、要使用jqGrid，首先页面上要引入如下css与js文件。

1、css

<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

2、js

<script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script>

<script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script>

<script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>

二、使用要点说明

1、获取单个id

获取行号，有这种方式：

var rowid = $("#grid-table").jqGrid("getGridParam", "selrow")

但是经过实际验证，这种方式不可行，当选中行，再点击同一行会出现获取不到行号的情况。

最后先在js最外部定义一个变量selId，然后使用如下代码在选中行时赋值：

onSelectRow: function (rowid, status) {

selId = rowid//给最外层的selId赋值

}

2、获取多个选中行的id

var ids=$('#gridTable').jqGrid('getGridParam','selarrrow')

其输出格式是逗号分隔的id，如：

1,2,3,4,5

3、获得所有行的ID数组

var ids = $("jqgridtableid").jqGrid('getDataIDs')

4、获取行数据

如果想获取选择的行的数据，只要传入rowId即可，如下：

var rowData = $('#gridTable').jqGrid('getRowData',rowId)

而这个rowData是一个对象，如果要获取选择的行的这个对象的属性值，如name的值，需如下：

var Name= rowData.name

5、获取单元格数据

var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum)

6、设定行选中

//设定选中行,可设定多行选中：

$("jqgridtableid").jqGrid('setSelection',id1)

$("jqgridtableid").jqGrid('setSelection',id2)

1.addJSONData和addRowData有点区别，后者是绑定在jquery对象的，前者是绑定在标签上的。

用addJSONData时举例：$("#table")[0].addJSONData(data)

用FF可以看到$("#table")[0]上绑定的事件的。

2.addJSONData接受的参数：

这是后台的.net代码

new JObject() {

new JProperty("total","1"),

new JProperty("page","1"),

new JProperty("records","3"),

new JProperty("rows",yourArrayData)

}

可以看到addJSONData接受的并不是一个数组，就是一个json对象，开始一直也困扰在这里。

前台返回的JSON：

{"total":"1","page":"1","records":"3","rows":[{"UserID":1,"UserName":"kp","Password":"123","Domain":null,"RoleID":null},{"UserID":2,"UserName":"kptest","Password":"Kp123","Domain":null,"RoleID":null},{"UserID":3,"UserName":"ricky","Password":"123","Domain":"XSUNT-SH\\dong.geng","RoleID":1}]}

3.还有一点需要注意的，jqgrid需要定义一个jsonReader其中的repeatitems如果不指定为false FF会返回obj is undefined

jsonReader: {

repeatitems: false,

rows: "rows",            

total: "total",

page: "page",

records: "records"

}

4.$("#table").addJSONData(data)的调用位置也值得注意，最后只有在loadComplete中才能加载出数据，gridComplete里不可以，方法外也不行。

第一步，创建web项目jqGrid，并将jqGrid相关的css和js文件拷贝到指定的路径文件下，如下图所示：

第二步，在web项目默认的页面引入jqGrid核心css文件和js文件，由于要用到jquery，需要引入其核心js，如下图所示：

第三步，创建jqGrid表格容器和表格分页，利用div标签和table标签实现，如下图所示：

第四步，在jquery初始化函数中编写生成jqGrid表格核心js，设置表格字段描述以及样式，如下图所示：

第五步，jqGrid表格js文件生成表格利用的是json文件，接着创建表格数据源，如下图所示：

第六步，由于性别字段是传过来是编号，相应的要改为描述，这里需要利用到jqGrid属性edittype、formatter等，如下图所示：

步骤阅读

第七步，设置表格样式，如边框大小、行高等，设置完毕后在浏览器上预览，如下图所示：

---