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 相关文章推荐
使用正则替换变量
May 05 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
整理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
高亮度显示php源代码
2006/10/09 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
python strip()函数 介绍
2013/05/24 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
Python重新加载模块的实现方法
2018/10/16 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
详解Python 解压缩文件
2019/04/09 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python基于opencv检测程序运行效率
2019/12/28 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
学生出入校管理制度
2014/01/16 职场文书
优良学风班总结材料
2014/02/08 职场文书
研究生导师推荐信
2014/09/06 职场文书