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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
jquery拖动改变div大小
Jul 04 jQuery
AngularJS实现注册表单验证功能
Oct 16 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
心得体会怎么写
2013/12/30 职场文书
群众路线剖析材料
2014/02/02 职场文书
2014村务公开实施方案
2014/02/25 职场文书
家庭贫困证明
2014/09/23 职场文书
车辆委托书范本
2014/10/05 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
元旦主持词开场白
2015/05/29 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
卖车协议书范文
2016/03/23 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
在redisCluster中模糊获取key方式
2021/07/09 Redis