jqgrid下载，引入

2019独角兽企业重金招聘Python工程师标准>>>

官网

最新版本5.2 收费

JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。

文件解压结构

我们需要的使用的是css目录和js 目录 src目录是源码目录 plugins是额外插件目录

引入文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css">
</head>
<body><script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
</body>
</html>

注意js引入顺序。

第一个demo 加载本地数据

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css">
</head>
<body><style>html,body {margin: 0;padding: 0;font-size: 75%;}</style><table id="list4"></table>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">$(document).ready(function() {$("#list4").jqGrid({datatype: "local",height: 250,colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],colModel: [{name: 'id',index: 'id',width: 60,sorttype: "int"}, {name: 'invdate',index: 'invdate',width: 90,sorttype: "date"}, {name: 'name',index: 'name',width: 100}, {name: 'amount',index: 'amount',width: 80,align: "right",sorttype: "float"}, {name: 'tax',index: 'tax',width: 80,align: "right",sorttype: "float"},{name: 'total',index: 'total',width: 80,align: "right",sorttype: "float"}, {name: 'note',index: 'note',width: 150,sortable: false}],multiselect: true,caption: "Manipulating Array Data"});var mydata = [{id: "1",invdate: "2007-10-01",name: "test",note: "note",amount: "200.00",tax: "10.00",total: "210.00"}, {id: "2",invdate: "2007-10-02",name: "test2",note: "note2",amount: "300.00",tax: "20.00",total: "320.00"}, {id: "3",invdate: "2007-09-01",name: "test3",note: "note3",amount: "400.00",tax: "30.00",total: "430.00"}, {id: "4",invdate: "2007-10-04",name: "test",note: "note",amount: "200.00",tax: "10.00",total: "210.00"}, {id: "5",invdate: "2007-10-05",name: "test2",note: "note2",amount: "300.00",tax: "20.00",total: "320.00"}, {id: "6",invdate: "2007-09-06",name: "test3",note: "note3",amount: "400.00",tax: "30.00",total: "430.00"}, {id: "7",invdate: "2007-10-04",name: "test",note: "note",amount: "200.00",tax: "10.00",total: "210.00"}, {id: "8",invdate: "2007-10-03",name: "test2",note: "note2",amount: "300.00",tax: "20.00",total: "320.00"}, {id: "9",invdate: "2007-09-01",name: "test3",note: "note3",amount: "400.00",tax: "30.00",total: "430.00"}];for (var i = 0; i <= mydata.length; i++) jQuery("#list4").jqGrid('addRowData', i + 1, mydata[i]);});</script></body>
</html>

转载于:https://my.oschina.net/2016jyh/blog/835613

jqgrid下载，引入相关推荐

echarts（一）下载引入，调色盘，[标题、图例组件、坐标轴]
一个简单的例子 1. 下载并引入 (1)npm install echarts --save (2)import echarts from 'echarts' //main.js引入echarts 或 ...
jqGrid系列:下载jqGrid
step 1:下载jqGrid 下载地址:http://www.trirand.com/blog/?page_id=6 当前版本为: 3.8.2 进入页面,选择要下载的组件. 呵呵,我的做法是全部选择 ...
JQGRID 数据表格
JQGRID 数据表格引言概念:数据表格渲染数据第一个JQGRID程序环境搭建1.下载jqgrid的相关文件 zip解压缩2.把对应的jqgrid相关的js文件 css文件引入项目中3.在网 ...
jqGrid (数据表格)
jqGrid (数据表格) 1.使用jqgrid数据表格 1). 环境搭建官方下载: http://www.trirand.com/blog/ 中文网下载: http://blog.mn886.ne ...
JQGRID简单介绍
编写第一个JQGRID程序 1.https://blog.mn886.net/jqGrid/firstdemo/blog.mn886.net.zip 下载blog.mn886.net.zip 2.解压 ...
java上传加密_Java上传下载文件并实现加密解密
使用 Jersey 服务器实现上传,使用 HTTP 请求实现下载引入依赖在 pom.xml 中添加 Jersey 相关依赖 com.sun.jersey jersey-client 1.18.1 ...
简单几步让你实现本地jar包引入到maven当中
2021/8/14{2021/8/14}2021/8/14 本文目录 1.为什么要了解该操作流程 2.操作流程 1.为什么要了解该操作流程众所周知,有的jar包不能通过maven从远程仓库直接下载引 ...
strus2中配置jqgrid入门
这几天刚好在struts的项目中要用到jqgrid,感觉还是有很多细节要注意,所以写下来,供大家参考,方便大家入门. (一)首先介绍一下需要导入的包,如下所示: 需要导入两个css文件,一个是jque ...
vue项目echarts通过cdn或npm引入
1. vue版本号: 2.6.11 2. vue-cli版本号: 4.5.11 3. 通过CDN的方式引入 3 3.1 .线上链接 1.首先先在public文件夹下的html页面中引入 <scr ...

jqgrid下载，引入

jqgrid下载，引入相关推荐

最新文章

热门文章