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 相关文章推荐
JS中的eval 为什么加括号
Apr 13 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
AngularJS Controller作用域
Jan 09 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
详解vuex状态管理模式
Nov 01 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
vue实现倒计时功能
Mar 24 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
基于PHP制作验证码
2016/10/12 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
JS实现的找零张数最小问题示例
2017/11/28 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python之用户输入的实例
2018/06/22 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
Python如何存储数据到json文件
2020/03/09 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
详解pandas映射与数据转换
2021/01/22 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
公证委托书模板
2014/04/03 职场文书
财务情况说明书范文
2014/05/06 职场文书
师德承诺书
2015/01/20 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Django使用redis配置缓存的方法
2021/06/01 Redis
详解Oracle块修改跟踪功能
2021/11/07 Oracle
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS