文档章节

jqgrid下载,引入

 金于虎
发布于 2017/02/10 16:09
字数 556
阅读 16
收藏 1

官网

最新版本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>

© 著作权归作者所有

上一篇: jqgrid2
粉丝 1
博文 112
码字总数 46834
作品 0
曲靖
私信 提问
jfinal与jqgrid结合实例。

直接上代码: index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <link rel="stylesheet" ......

控制自己
2013/01/05
1K
8
jqGrid 3.8 Beta 发布,下载

jqGrid 刚刚宣布了 3.8 Beta 版本的发布,3.8版本的目的是要做出更好的 jqGrid JavaScript库。 最大的更新是单元格分组功能。现在,您可以按列,包括组页脚摘要或不累计组行。 3.8版本现在也...

红薯
2010/09/08
2.1K
0
解决jqGrid新增或编辑记录保存成功但提示错误的问题

在上一篇文章《》中,我们详细说明了一下如何创建一个可以使用增删改操作的jqGrid。 但是在实际的修改、新增保存中,会看到如下的错误提示:error Status:"OK".Error code: 900。实际上,修改...

yonge
2009/12/14
5.9K
1
关于dwz使用过程中的3个问题,新手勿拍

@张慧华 你好,想跟你请教个问题: 1.如何查看当前的dwz版本是多少?在哪看? 2.为什么我每次从leftside点击链接的时候,都要点两下?第一次是把链接加载到navTab,但是却没有内容显示,第二...

Snakecn21
2012/11/16
8.1K
13
jQuery表格插件jqgrid加载数据的问题

最近的项目使用jqgrid来显示数据, 遇到个问题, 需求:页面初始化时表格是空的,只要显示列明就好,这个通过不指定url实现了。 加载数据是跟用用户输入到DB查询,返回数据集。尝试手动将数据...

jay_
2012/01/20
3.8K
1

没有更多内容

加载失败,请刷新页面

加载更多

x002-语言元素

变量命令规则 硬性规则: 变量名由字母(广义的Unicode字符,不包括特殊字符)、数字和下划线构成,数字不能开头。 大小写敏感(大写的a和小写的A是两个不同的变量)。 不要跟关键字(有特殊...

伟大源于勇敢的开始
今天
4
0
nginx反向代理配置

nginx配置文件位置/usr/local/nginx/conf/nginx.conf 配置文件修改: # cd /usr/local/nginx/conf # vim nginx.conf server {listen 80;server_name localhost;#charset k......

行者终成事
今天
5
0
OSChina 周日乱弹 —— 这是假的,和我之前的不一样

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
8
0
Rust学习笔记一 数据类型

写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差。 自学了Java、Kotlin、Python、...

MusiCodeXY
今天
5
0
Java 脚本引擎入门

Java Script Engine Java 脚本引擎可以将脚本嵌入Java代码中,可以自定义和扩展Java应用程序,自JDK1.6被引入,基于Rhino引擎,JDK1.8后使用Nashorn引擎,支持ECMAScript 5,但后期还可能会换...

阿提说说
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部