jqGrid基本语法及使用

最新推荐文章于 2025-02-11 14:12:37 发布

面条请不要欺负汉堡

最新推荐文章于 2025-02-11 14:12:37 发布

阅读量1.8k

点赞数

分类专栏：框架/插件使用文章标签： jqGrid基本语法及使用

框架/插件使用专栏收录该内容

32 篇文章

订阅专栏

一.介绍

(1).介绍

首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。
特点如下:
   1.完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。
   2.自定义的工具列。
   3.预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。
   4.完整的分页功能。
   5.按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。
   6.预设的action formatter，可以快速而直觉地对每笔资料做运算。
   7.支持多种数据格式。比如json、xml、array等。

案例参考

(2).引用插件

<!-- jqGrid组件基础样式包-必要 -->
		<link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" />
		
		<!-- jqGrid主题包-非必要 --> 
		<!-- 在jqgrid/css/css这个目录下还有其他的主题包，可以尝试更换看效果 -->
		<link rel="stylesheet" href="jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />

		<!-- jquery插件包-必要 -->
		<!-- 这个是所有jquery插件的基础，首先第一个引入 -->
		<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
		
		<!-- jqGrid插件包-必要 -->
		<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script>
		
		<!-- jqGrid插件的多语言包-非必要 -->
		<!-- 在jqgrid/js/i18n下还有其他的多语言包，可以尝试更换看效果 -->
		<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>

二.属性

官网属性

url：提交处理数据的地址。
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：定义页码控制条PageBar
sortname：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到服务端。
viewrecords：设置是否在PagerBar显示所有记录的总数。
caption：Grid的标题。如果设置了，则将显示在Grid的Header层 ；如果未设置，则标题区域不显示 。
rowNum：用于设置Grid中一次显示的行数，默认值为20。
rowList：一个数组，用于设置Grid可以接受的rowNum值。例如[10,20,30]。
prmNames：这是一个数组，用于设置jqGrid将要向服务端传递的参数名称。我们一般不用去改变什么。
colModel：最重要的数组之一，用于设定各列的参数。（稍后详述）
jsonReader：这又是一个数组，用来设定如何解析从Server端发回来的json数据。（稍后详述）

(1).colModel的重要选项

name：为Grid中的每个列设置唯一的名称，这是一个必需选项，其中保留字包括subgrid、cb、rn。
index：设置排序时所使用的索引名称，这个index名称会作为sidx参数传递到服务端。
label：表格显示的列名。
width：设置列的宽度，目前只能接受以px为单位的数值，默认为150。
sortable：设置该列是否可以排序，默认为true。
search：设置该列是否可以被列为搜索条件，默认为true。
resizable：设置列是否可以变更尺寸，默认为true。
hidden：设置此列初始化时是否为隐藏状态，默认为false。
formatter：预设类型或用来格式化该列的自定义函数名。常用预设格式有：integer、date、currency、number等

（具体参见文档）。

(2).jsonReader选项
jsonReader是Jqgrid的一个重要选项，用于设置如何解析从服务端发回来的json数据。其默认值为：

jsonReader : {
	root : "rows", // 实际模型的人口
	page : "page", // 当前页码
	total : total, // 当前共多少页
	records : "records", // 总共多少行数据
	repeatitems : true,
	cell : "cell",
	id : "id",
	userdata : "userdata", // 数据
	subgrid : {
		root : "rows",
		repeatitems : true,
		cell : "cell"
	}
}

我们可以这样理解，prmNames设置了如何将Grid所需要的参数传给服务端，而jsonReader设置了如何去解析从服务端传回来的json数据。如果没有设置jsonReader的话，Jqgrid将会根据默认的设置来解析json数据，并显示在表格里。一般情况下，我们修改jsonReader的root为服务端传递过来的数组就可以满足要求了。比如：

jsonReader : {
root : "dataList", // 服务端保存数据的集合
records : "record", // 可以不要,因为我的服务端是record,不是默认的,才加上的
repeatitems : false
// 其它的全部默认就行
}

三.操作表的基本语法

官网的方法

(1).getGridParam
这个方法用来获得jqGrid的选项值。它具有一个可选参数name，name即代表着jqGrid的选项名，如果不传入name参数，则会返回 Jqgrid整个选项options。例如：

var id = $("#gridTable").jqGrid("getGridParam", "selrow");      //获得选中行的ID
var sort = $("#gridTable").jqGrid("getGridParam", "sortname");  //获得排序的字段
var page = $("#gridTable").jqGrid("getGridParam", "page");      //获得当前的页数
var row = $("#gridTable").jqGrid("getGridParam", "rowNum");     //获得当前页的行数
var count = $("#gridTable").jqGrid("getGridParam", "records");  //获得总记录数
var rows = $("#gridTable").jqGrid("getGridParam", "selarrrow"); //可以多选时，返回选中行的ID

(2).getRowData
这个方法用来获得某行的数据。它具有一个rowid参数，Jqgrid会根据这个rowid返回对应行的数据，返回的是name:value类型的数组。如果rowid未能被找到，则返回一个空数组；如果未设置rowid参数，则以数组的形式返回Grid的所有行数据。例如：

var getRowdata = function() {
    var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
    var rowData = $("#gridTable").jqGrid("getRowData", selectedId);

(3).addRowData
   这个方法用于向Grid中插入新的一行。执行成功返回true，否则返回false。它具有4个参数：
       rowid：新行的id号；
       data：新行的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；
       position：插入的位置（first：表格顶端；last：表格底端；before：srcrowid之前；after：srcrowid之后）；
       srcrowid：新行将插入到srcrowid指定行的前面或后面。
这个方法可以一次性插入多行，data参数必须是[{name1:value1,name2: value2…}, {name1:value1,name2: value2…}]这样的数组形式。例如:

//1种
    var rows = [  
                {"code":"CN","name":"中国","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"JP","name":"日本","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"RU","name":"俄罗斯联邦","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"WO","name":"世界知识产权组织","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AE","name":"阿拉伯联合酋长国","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AG","name":"安提瓜和巴布达","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AL","name":"阿尔巴尼亚","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AN","name":"荷属安的列斯群岛","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AP","name":"非洲地区工业产权组织（ARIPO）","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AS","name":"美属萨摩亚","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                  
                ];  
    for(var i=0;i<rows.length;i++){  
        $("#addlist").jqGrid('addRowData',i+1,rows[i]);  
    }  
      //2种
   //要添加的jqgrid中的行数据
    var dataRow = {
        "code" : "3a",
        "name" : "上海",
        "operation" : "<input name='checkPersonName'   placeholder='请输入检查人员' type='text' >",
    };
    //使用addRowData方法把dataRow添加到表格中
    $("#addlist").jqGrid("addRowData", 1, dataRow);

(4).setRowData
   这个方法用于为某行数据设置数据值。执行成功返回true，否则返回false。它具有3个参数：
   rowid：更新数据的行id；
   data：更新的数据对象，形式为{name1:value1,name2: value2…}，其中name为colModel中定义的列名称name；这个数据对象，不必设置完全，需要更新哪列，就设置哪列的name:value对；
   cssprop：如果cssprop为String类型，则会使用jQuery的addClass为行增加相应名称的CSS类；如果为object类型，则会使用html的css属性，为行添加样式。如果只想增加css样式而不更新数据，可以将data参数设为false。
例如：

var updateStudent = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
var dataRow = {
lastName : "Li",
firstName : "Si",
email : "<a href="mailto:li_si@126.com">li_si@126.com</a>"
};
var cssprop = {
color : "#FF0000"
};
$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);
};

(5). delRowData
这个方法用于删除某行数据。执行成功返回true，否则返回false。具有一个参数rowid，代表要删除的行id。例如：

ar deleteStudent = function() {
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");
$("#gridTable").jqGrid('delRowData', selectedId);
};

(6).trigger(“reloadGrid”)
根据当前设置，重新载入Grid表格，即意味着向服务端重新发送一个新的请求。此方法只能用于已经构建好的Grid。此外，此方法不会使对colModel所做出的改变生效。应该使用gridUnload来重新载入对colModel的新设置。例如:

$("#gridTable").jqGrid("setGridParam", {
datatype : "json",
search : true,
mtype : "post"
}).trigger("reloadGrid");

(7). 其他方法
除了以上介绍的的方法外，jqGrid还有其他有用的方法，例如：addJSONData、clearGridData、hideCol、resetSelection、setCaption、setGridHeight、setLabel、showCol等以及增强模块提供的方法，例如：filterGrid、GridDestroy、GridUnload、setColProp等。这些方法的具体用法，或浅显易懂，或不是非常常用。都可以参考官方文档，得到具体指示。

四.简单案例

1.初始化数据

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" />
	<link rel="stylesheet" href="jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
	<title>http://blog.mn886.net/jqGrid</title>
</head>
<body>
<!--新增表单区域开始-->
<form method="post" id="addBatchForm">
    <div >          
        <table id="addlist"></table>
        <div id="addpager"></div>    
    </div>
</form>	
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script>
	$(function(){
	  pageInit();
	});
	function pageInit(){
	$("#addlist").jqGrid({  
        width:930,  
        dataType:'local',         
        colNames:["国家/地区/组织代码","国家/地区/组织名称","操作"],  
        colModel:[  
                    {name:"code",index:"code",align:'center'},  
                    {name:"name",index:"name",align:'center'},  
                    {name:"operation",index:"operation",align:'center'},  
                ],  
        viewrecords:true,  
        rowNum:15,  
        //autoHeight:true,  
        rowList:[15,20,25,30],  
        jsonReader:{  
            root: "rows",   
            page: "page",   
            total: "total",   
            records: "records",   
            repeatitems: false   
  
        },  
        pager:"#addpager",           
    });  
//    
//1种
    var rows = [  
                {"code":"CN","name":"中国","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"JP","name":"日本","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"RU","name":"俄罗斯联邦","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"WO","name":"世界知识产权组织","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AE","name":"阿拉伯联合酋长国","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AG","name":"安提瓜和巴布达","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AL","name":"阿尔巴尼亚","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AN","name":"荷属安的列斯群岛","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AP","name":"非洲地区工业产权组织（ARIPO）","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                {"code":"AS","name":"美属萨摩亚","operation":"<span style='color:blue;cursor:pointer;'>应用</span>"},  
                  
                ];  
    for(var i=0;i<rows.length;i++){  
        $("#addlist").jqGrid('addRowData',i+1,rows[i]);  
    }  
}  

</script>
</body>
</html>