当前位置： 首页 > article >正文

Jqgrid教程（简单上手）

article 2025/9/14 3:19:27

这里不用我多说Jqgrid怎么好，通过下图给大家演示一下：


下面说一说如何轻松使用它：

1.首先需要下载jqgrid的相关包：http://www.trirand.com/blog/?page_id=6（根据需要自行下载）

2.然后需要下载jqgrid皮肤文件：可以用jquery-ui，jqgrid本身支持jquery-ui，下载地址：http://jqueryui.com/themeroller/（选择一个喜欢的皮肤下载）。

3.在页面中引入相关文件，一般css两个分别是：

ui.jqgrid.css

jquery-ui.css

，js四个：

jquery-1.7.2.min.js 

jquery.jqGrid.min.js    

 jquery-ui.js    

 grid.locale-cn.js

如果觉得jquery-ui 的主题都不适合你，可以下别的主题也行，只是替换两个文件

jquery-ui.css  

jquery-ui.js   

比如这里可以应用bootstrap的主题：

 ui.jqgrid-bootstrap.css

bootstrap.min.js

所以的准备工作做好以后就可以进行编写我们的jqgrid了：

下面是我的一个demo案例：



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JCompare</title>
<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css"	href="jqgrid/jquery.ui/jquery-ui.css">
<script type="text/javascript" src="jqgrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
</head>
<body><table id="list"></table>
</body>
</html><script type="text/javascript">
$("#list").jqGrid({        url:'server.php?q=2',//请求数据的地址datatype: "json",colNames:['Id','姓名', '年龄'],//jqgrid主要通过下面的索引信息与后台传过来的值对应colModel:[{name:'id',index:'id', width:55},{name:'name',index:'invdate', width:90},{name:'age',index:'name', width:100}],caption:"我是jqgrid的标题",
});
</script>

上面是一个最基本的jqgrid数据显示，接下来是在这个基础上增加一些附加功能：

1.分页功能信息显示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JCompare</title>
<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css"	href="jqgrid/jquery.ui/jquery-ui.css">
<script type="text/javascript" src="jqgrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
</head>
<body><table id="list"></table>
<span style="background-color: rgb(204, 204, 204);">	<div id="pager"></div></span>
</body>
</html><script type="text/javascript">
$("#list").jqGrid({        url:'server.php?q=2',//请求数据的地址datatype: "json",colNames:['Id','姓名', '年龄'],//jqgrid主要通过下面的索引信息与后台传过来的值对应colModel:[{name:'id',index:'id', width:55},{name:'name',index:'invdate', width:90},{name:'age',index:'name', width:100}],caption:"我是jqgrid的标题",
<span style="background-color: rgb(204, 204, 204);">    rowNum : 10,rowList : [ 10, 20, 30 ],pager : '#pager',sortname : 'id',recordpos : 'right',height:300,viewrecords : true</span>
});</script>


2.显示系统默认的添加，修改，删除，查询，更新按钮。 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JCompare</title>
<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css"<span style="white-space:pre">	</span>href="jqgrid/jquery.ui/jquery-ui.css">
<script type="text/javascript" src="jqgrid/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
</head>
<body>
<span style="white-space:pre">	</span><table id="list"></table>
<span style="white-space:pre">	</span><div id="pager"></div>
</body><script type="text/javascript">
$("#list").jqGrid({        <span style="white-space:pre">	</span>url:'server.php?q=2',//请求数据的地址
<span style="white-space:pre">	</span>datatype: "json",<span style="white-space:pre">	</span>colNames:['Id','姓名', '年龄'],
<span style="white-space:pre">	</span>//jqgrid主要通过下面的索引信息与后台传过来的值对应<span style="white-space:pre">	</span>colModel:[<span style="white-space:pre">		</span>{name:'id',index:'id', width:200},<span style="white-space:pre">		</span>{name:'name',index:'invdate', width:200},<span style="white-space:pre">		</span>{name:'age',index:'name', width:300}<span style="white-space:pre">	</span>],<span style="white-space:pre">	</span>caption:"我是jqgrid的标题",rowNum : 10,rowList : [ 10, 20, 30 ],pager : '#pager',sortname : 'id',recordpos : 'right',height:300,viewrecords : true
});
$("#list").jqGrid('navGrid', '#pager', {add : true,del : true,edit : true,position : 'left',});
</script>
</html>


3.可以为添加修改删除指定我们自定义的事件： 

<script type="text/javascript">var openDialog4Adding = function() {  alert("add Demo");};  
var openDialog4Updating = function(rowid) { // (6) 接受选中行的id为参数  alert("update Demo");
};  
var openDialog4Deleting = function(rowid) { // (8) 接受选中行的id为参数  alert("delete Demo");
};  $("#list").jqGrid({        url:'server.php?q=2',//请求数据的地址datatype: "json",colNames:['Id','姓名', '年龄'],//jqgrid主要通过下面的索引信息与后台传过来的值对应colModel:[{name:'id',index:'id', width:200},{name:'name',index:'invdate', width:200},{name:'age',index:'name', width:300}],caption:"我是jqgrid的标题",rowNum : 10,rowList : [ 10, 20, 30 ],pager : '#pager',sortname : 'id',recordpos : 'right',height:300,viewrecords : true
});
$("#list").jqGrid('navGrid', '#pager', {add : true,del : true,edit : true,position : 'left',addfunc : openDialog4Adding,    // (1) 点击添加按钮，则调用openDialog4Adding方法  editfunc : openDialog4Updating, // (2) 点击编辑按钮，则调用openDialog4Updating方法  delfunc : openDialog4Deleting,  // (3) 点击删除按钮，则调用openDialog4Deleting方法  alerttext : "请选择需要操作的数据行!"  // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息  });</script>

4.自定义按钮+点击弹出框

需要在html中加入下面代码：

     <div><button class="right-button02" οnclick="openDialog4Adding()">添加</button> <button class="right-button02" οnclick="openDialog4Updating()">修改</button> <button class="right-button02" οnclick="openDialog4Deleting()">删除</button></div><div id="consoleDlg"><div id="formContainer"><form id="consoleForm"><input type="hidden" id="selectId" /><table class="formTable"><tr><th>姓名：</th><td><input type="text" class="textField" id="ename"name="ename" /></td></tr><tr><th id="thusergender">性  别：</th><td><input type="text" class="textField" id="esex"name="esex" /></td></tr><tr><th>出生日期：</th><td><input type="text" class="textField" id="birthday"name="birthday" /></td></tr><tr><th>部门：</th><td><input type="text" class="textField" id="department"name="department" /></td></tr><tr><th>备注：</th><td><input type="text" class="textField" id="eremark"name="eremark" /></td></tr></table></form></div></div>
然后再写js代码： 

// 配置对话框  $("#consoleDlg").dialog({  autoOpen: false,      modal: true,    // 设置对话框为模态（modal）对话框  resizable: true,      width: 480,  buttons: {  // 为对话框添加按钮  "取消": function() {$("#consoleDlg").dialog("close")},  "添加": addEmployee,  "保存": updateEmployee,  "删除": deleteEmployee  }  });  var openDialog4Adding = function() {  var consoleDlg = $("#consoleDlg");  var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  consoleDlg.find("input").removeAttr("disabled").val("");  dialogButtonPanel.find("button:not(:contains('取消'))").hide();  dialogButtonPanel.find("button:contains('添加')").show();  consoleDlg.dialog("option", "title", "添加员工信息 ").dialog("open");  };  var openDialog4Updating = function() {  var consoleDlg = $("#consoleDlg");  var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  consoleDlg.find("input").removeAttr("disabled");  dialogButtonPanel.find("button:not(:contains('取消'))").hide();  dialogButtonPanel.find("button:contains('保存')").show();  consoleDlg.dialog("option", "title", "修改员工信息");  loadSelectedRowData();  }  var openDialog4Deleting = function() {  var consoleDlg = $("#consoleDlg");  var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane");  consoleDlg.find("input").attr("disabled", true);  dialogButtonPanel.find("button:not(:contains('取消'))").hide();  dialogButtonPanel.find("button:contains('删除')").show();  consoleDlg.dialog("option", "title", "删除员工");  loadSelectedRowData();  }  var loadSelectedRowData = function() {var selectedRowId = $("#gridTable").jqGrid("getGridParam", "selrow");if (!selectedRowId) {hiAlert("请先选择需要编辑的行!");return false;} else {var params = {"employee.eid" : selectedRowId};// 从Server读取对应ID的JSON数据$.ajax( {url : "employee_find.action",data : params,dataType : "json",cache : false,error : function(textStatus, errorThrown) {hiAlert("系统ajax交互错误: " + textStatus);},success : function(data, textStatus) {// 如果读取结果成功，则将信息载入到对话框中					var rowData = data.person;  var consoleDlg = $("#consoleDlg");  consoleDlg.find("#selectId").val(rowData.id);  consoleDlg.find("#ename").val(rowData.ename);  consoleDlg.find("#esex").val(rowData.esex);  consoleDlg.find("#birthday").val(rowData.birthday);  consoleDlg.find("#department").val(rowData.department);  consoleDlg.find("#eremark").val(rowData.eremark);  // 根据新载入的数据将表格中的对应数据行一并更新一下var  dataRow = {  id : data.employee.eid,   // 从Server端得到系统分配的id  ename :ename,  esex : esex,birthday: birthday,department: department,eremark:eremark };$("#gridTable").jqGrid("setRowData", data.employee.eid, dataRow);// 打开对话框consoleDlg.dialog("open");}});}}; 	      	  //数据更新 function updateEmployee() { var consoleDlg = $("#consoleDlg");      var eid = $.trim(consoleDlg.find("#selectId").val());  var eanme = $.trim(consoleDlg.find("#eanme").val());  var esex = $.trim(consoleDlg.find("#esex").val());  var birthday = $.trim(consoleDlg.find("#birthday").val()); var department = $.trim(consoleDlg.find("#department").val()); var eremark = $.trim(consoleDlg.find("#eremark").val());    var params = {  "employee.eid" : eid,"employee.ename" : ename,  "employee.esex" : esex,"employee.birthday" : birthday,  "employee.department" : department,"employee.eremark" : eremark   };  var actionUrl = "employee_update.action";  $.ajax( {  url : actionUrl,  data : params,  dataType : "json",  cache : false,  error : function(textStatus, errorThrown) {  alert("系统ajax交互错误: " + textStatus);  },  success : function(data, textStatus) {  if (data.ajaxResult == "success") {  var dataRow = {  id : data.employee.eid,   // 从Server端得到系统分配的id  ename :ename,  esex : esex,birthday: birthday,department: department,eremark:eremark };  alert("联系人信息更新成功!");  consoleDlg.dialog("close");  $("#gridTable").jqGrid("setRowData", data.employee.eid, dataRow);  } else {  alert("修改操作失败!");  }  }  });  };var addEmployee = function() {  var consoleDlg = $("#consoleDlg");  var eanme = $.trim(consoleDlg.find("#eanme").val());  var esex = $.trim(consoleDlg.find("#esex").val());  var birthday = $.trim(consoleDlg.find("#birthday").val()); var department = $.trim(consoleDlg.find("#department").val()); var eremark = $.trim(consoleDlg.find("#eremark").val());  var params = {  "employee.ename" : ename,  "employee.esex" : esex,"employee.birthday" : birthday,  "employee.department" : department,"employee.eremark" : eremark   };  var actionUrl = "employee_add.action";$.ajax( {  url : actionUrl,  data : params,  dataType : "json",  cache : false,  error : function(textStatus, errorThrown) {  alert("系统ajax交互错误: " + textStatus);  },  success : function(data, textStatus) {  if(data.ajaxResult == "success") {  var dataRow = {  id : data.employee.eid,   // 从Server端得到系统分配的id  ename :ename,  esex : esex,birthday: birthday,department: department,eremark:eremark };  var srcrowid = $("#gridTable").jqGrid("getGridParam", "selrow");  if(srcrowid) {  $("#gridTable").jqGrid("addRowData", data.employee.eid, dataRow, "before", srcrowid);} else {  $("#gridTable").jqGrid("addRowData", data.employee.eid, dataRow, "first");  }  consoleDlg.dialog("close");  alert("联系人添加操作成功!");  } else {  alert("添加操作失败!");  }  }  });  
};  //数据删除var deleteEmployee = function() {  var consoleDlg = $("#consoleDlg");  var pId = $.trim(consoleDlg.find("#selectId").val());  var params = {  "employee.eid" : pId  };  var actionUrl = "employee_delete.action";  $.ajax({  url : actionUrl,  data : params,  dataType : "json",  cache : false,  error : function(textStatus, errorThrown) {  alert("系统ajax交互错误: " + textStatus);  },  success : function(data, textStatus) {  if (data.ajaxResult == "success") {  $("#gridTable").jqGrid("delRowData", pId);  consoleDlg.dialog("close");  alert("联系人删除成功!");  } else {  alert("删除操作失败!");  }  }  });  };
以上是我对jqgrid的基本用法的一个总结，关于对jqgrid与后台进行交互，如：Java中Struts2+Jqgrid的灵活使用会在稍后介绍。如有不足之处，还望多多指正











http://www.lryc.cn/news/2414542.html

相关文章：

  • C# 正则表达式完全指南：基础、进阶与实战示例
  • C语言 | 指针详解
  • Linux命令之pkill命令
  • 必收藏：最全SQL讲解！
  • WSUS服务的部署
  • CTex下载地址和方法
  • Tomcat启动成功但是无法访问http://localhost:8080/
  • gcc编译器及C语言基础
  • ISE工程建立(含IP核建立)和chipscope实验
  • ARM学习-ARM指令集详解
  • 数据结构typedef、L和*L、Elemtype *elem和Elemtype elem[maxsize]
  • Quartus-II13.1三种方式实现D触发器及时序仿真
  • Python详细介绍及使用(基础篇)
  • openfire学习之安装
  • Linux下 itoa，atoi 函数的实现
  • 三维重建（7）--运动恢复结构SfM系统解析
  • 无线渗透----扫描附近WiFi（windows系统）
  • location.href用法总结（转）
  • vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序
  • 深度学习之目标检测（九）--YOLOv3 SPP理论介绍
  • JenKins 自动化打包上传到服务器的fir 工具
  • CSS基础：插入CSS样式的3种方法
  • 7.1 函数的基本概念和定义
  • linux 环境变量设置（临时 + 永久）
  • BootStrapTable 分页
  • Class.forName()用法详解
  • HTB靶场 Perfection
  • 什么是JNDI
  • After Effect切换中英文教程
  • 十大排序算法：快速排序算法