ajax jqgrid,JavaScript系列：ajax异步加载jqgrid

ajax简介

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 1

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页(不使用 Ajax)如果需要更新内容，必须重载整个网页页面。

jqgrid简介

jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。

jqgrid的重要选项

url ：jqGrid控件通过这个参数得到需要显示的数据，具体的返回值可以使XML也可以是Json。

datatype ：这个参数用于设定将要得到的数据类型。类型包括：json 、xml、xmlstring、local、javascript、function。

mtype : 定义使用哪种方法发起请求，GET或者POST。

height ：Grid的高度，可以接受数字、%值、auto，默认值为150。

width ：Grid的宽度，如果未设置，则宽度应为所有列宽的之和；如果设置了宽度，则每列的宽度将会根据shrinkToFit选项的设置，进行设置。

shrinkToFit ：此选项用于根据width计算每列宽度的算法。默认值为true。如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；如果shrinkToFit为false且设置了width值，则每列的宽度不会成比例缩放，而是保持原有设置，而Grid将会有水平滚动条。

autowidth ：默认值为false。如果设为true，则Grid的宽度会根据父容器的宽度自动重算。重算仅发生在Grid初始化的阶段；如果当父容器尺寸变化了，同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidth方法来完成。

pager ：定义页码控制条Page Bar，在上面的例子中是用一个div(

sortname ：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到Server端。

viewrecords ：设置是否在Pager Bar显示所有记录的总数。

caption ：设置Grid表格的标题，如果未设置，则标题区域不显示。

rowNum ：用于设置Grid中一次显示的行数，默认值为20。正是这个选项将参数rows(prmNames中设置的)通过url选项设置的链接传递到Server。注意如果Server返回的数据行数超过了rowNum的设定，则Grid也只显示rowNum设定的行数。

rowList ：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。

colNames ：字符串数组，用于指定各列的题头文本，与列的顺序是对应的。

colModel ：最重要的数组之一，用于设定各列的参数。

prmNames ：这是一个数组，用于设置jqGrid将要向Server传递的参数名称。

jsonReader ：这又是一个数组，用来设定如何解析从Server端发回来的json数据。

主要API接口getGridParam、setGridParam

getGridParam方法：

getGridParam("url")： 获取当前的AJAX的URL

getGridParam("sortname")：排序的字段

getGridParam("sortorder")：排序的顺序

getGridParam("selrow")：得到选中行的ID

getGridParam("page")：当前的页数

getGridParam("rowNum")：当前有多少行

getGridParam("datatype")：得到当前的datatype

getGridParam("records")：得到总记录数

getGridParam("selarrrow")：可以多选时，返回选中行的ID

setGridParam方法：

setGridParam({url:newvalue})：可以设置一个grid的ajax url，可配合trigger("reloadGrid")使用

setGridParam({sortname:newvalue})：设置排序的字段

setGridParam({sortorder:newvalue})：设置排序的顺序asc or desc

setGridParam({page:newvalue})：设置翻到第几页

setGridParam({rowNum:newvalue})：设置当前每页显示的行数

setGridParam({datatype:newvalue})：设置新的datatype(xml,json)

关于jqgrid的API还有很多，暂时不一一介绍了，本文主要介绍jqgrid1最基本的表格初始化阶段，，注：本文也包括了简单的用户登录和注册功能！

代码实例

jsp界面

系统>用户管理

用户管理

基本信息

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！