Jqgrid之强大的表格插件应用


Posted in Javascript onDecember 02, 2015

jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好的应用在一些后台管理系统来管理大量数据的场合。

Jqgrid之强大的表格插件应用

jqGrid特性:

基于jquery UI主题,开发者可以根据客户要求更换不同的主题。
兼容目前所有流行的web浏览器。
Ajax分页,可以控制每页显示的记录数。
支持XML,JSON,数组形式的数据源。
提供丰富的选项配置及方法事件接口。
支持表格排序,支持拖动列、隐藏列。
支持滚动加载数据。
支持实时编辑保存数据内容。
支持子表格及树形表格。
支持多语言。
最关键目前是免费的。

如何使用jqGrid

1、首先,您需要到jqGrid官网下载最新版本的程序包,您可以从这里下载:http://www.trirand.com/blog/
2、在WEB目录下分别新建css和js两个文件夹,放置相关的css和js文件,创建一个index.html页面文件,用你喜欢的文本编辑器打开,录入一下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ 
xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Grid</title> 
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" /> 
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" /> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
</head> 
<body> 
... 
</body> 
</html>

3、在body中加入以下代码:

<table id="list"></table> 
<div id="pager"></div>

#list用来加载数据列表,#page用来显示分页条的。

4、调用jqGrid插件,在页面中加入如下js代码

$("#list").jqGrid({ 
  caption: '手机产品列表', 
  url:'server.php', 
  datatype: "json", 
    colNames:['编号','名称','主屏尺寸','操作系统','电池容量', '价格(¥)','操作'], 
    colModel:[ 
      {name:'sn',index:'sn', width:80,align:'center'}, 
      {name:'title',index:'title', width:180}, 
      {name:'size',index:'size', width:120}, 
    {name:'os',index:'os', width:120}, 
      {name:'charge',index:'charge', width:100,align:'center'}, 
    {name:'price',index:'price', width:80,align:'center'}, 
      {name:'opt',index:'opt', width:80, sortable:false, align:'center'}     
    ], 
    rowNum:10, 
    rowList:[10,20,30], 
    pager: '#pager', 
    sortname: 'id', 
  autowidth: true, 
  height:280, 
  viewrecords: true, 
  multiselect: true, 
  multiselectWidth: 25, 
  sortable:true, 
  sortorder: "asc" 
 });

这个时候我们预览index.html发现表格外形已经呈现,就差数据填充了。如果此时你还看不到任何效果,请检查你的文件路径是否正确。

5、加载数据。

我们采用php读取mysql数据,返回json格式的数据给jqGrid来显示数据。我们准备一张数据表用来记录手机产品信息,结构如下:

CREATE TABLE IF NOT EXISTS `products` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `sn` varchar(10) NOT NULL, 
 `title` varchar(60) NOT NULL, 
 `size` varchar(30) NOT NULL, 
 `os` varchar(50) NOT NULL, 
 `charge` varchar(50) DEFAULT NULL, 
 `screen` varchar(50) DEFAULT NULL, 
 `design` varchar(50) DEFAULT NULL, 
 `price` int(10) NOT NULL, 
 `addtime` datetime NOT NULL 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

接着,在server.php中读取数据,并输出json数据:

//连接数据库 
include_once ('connect.php'); 
$page = $_GET['page']; 
$limit = $_GET['rows']; 
$sidx = $_GET['sidx']; 
$sord = $_GET['sord']; 
if (!$sidx) 
  $sidx = 1; 
$result = mysql_query("SELECT COUNT(*) AS count FROM products where deleted=0"); 
$row = mysql_fetch_array($result, MYSQL_ASSOC); 
$count = $row['count']; 
if ($count > 0) { 
  $total_pages = ceil($count / $limit); 
} else { 
  $total_pages = 0; 
} 
if ($page > $total_pages) 
  $page = $total_pages; 
$start = $limit * $page - $limit; 
$SQL = "SELECT * FROM products WHERE deleted=0 ORDER BY $sidx $sord LIMIT $start , $limit"; 
$result = mysql_query($SQL) or die("Couldn t execute query." . mysql_error()); 
$responce->page = $page; 
$responce->total = $total_pages; 
$responce->records = $count; 
$i = 0; 
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 
  $responce->rows[$i]['id'] = $row[id]; 
  $opt = "<a href='edit.php'>修改</a>"; 
  $responce->rows[$i]['cell'] = array ( 
    $row[sn], 
    $row[title], 
    $row[size], 
    $row[os], 
    $row[charge], 
    $row[price], 
    $opt 
  ); 
  $i++; 
} 
echo json_encode($responce);

至此,如果你往数据表中录入数据后,就可以在页面上显示数据表了,然后你可以排序、分页操作了。接下来我会将jqGrid的选项说明整理成文,分享给大家,然后从项目实际应用出发,举例讲解增加删除、查看、查找数据等业务的应用。

Javascript 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
js中的this关键字详解
Sep 25 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
整理Javascript事件响应学习笔记
Dec 02 #Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 #Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 #Javascript
原生JavaScript实现异步多文件上传
Dec 02 #Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 #Javascript
日常收藏的jquery技巧
Dec 02 #Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python显示生日是星期几的方法
2015/05/27 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
keras 多任务多loss实例
2020/06/22 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
毕业自荐书
2013/12/09 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
电钳工人个人求职信
2014/05/10 职场文书
安全生产标语大全
2014/10/06 职场文书
领导班子整改方案
2014/10/25 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
走近毛泽东观后感
2015/06/04 职场文书
新郎新娘致辞
2015/07/31 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书