jqgrid学习(一)下载安装

最新推荐文章于 2021-02-16 23:20:22 发布

原创最新推荐文章于 2021-02-16 23:20:22 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #UI #CSS #PHP #HTML #ViewUI

UI 专栏收录该内容

122 篇文章

订阅专栏

本文介绍了jqGrid的安装步骤及基本用法，包括下载、配置文件、搭建环境及简单的示例代码。通过该教程，读者可以快速入门jqGrid并进行网格数据展示。

jqgrid学习(一)下载安装

GRID首页
http://www.trirand.com/blog/
demo地址
http://www.trirand.com/blog/jqgrid/jqgrid.html
文档地址
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
看了看，效果还不错，就参考文档去一步一步学习了

jQuery library version 1.3 or later (I own)

jqGrid plugin
http://www.trirand.com/blog/?page_id=6
默认勾中base，下载了文件jquery.jqGrid-3.6.2.zip
勾上所有，下载了文件jquery.jqGrid-3.6.2-all.zip

jQuery UI theme
http://jqueryui.com/themeroller/#themeGallery
选择UI lightness theme，下载了文件jquery-ui-1.7.2.custom.zip

1.使用安装模式
按照要求，拷贝了如下文件到项目中
components--
jqgrid--
css--
ui-lightness--
images--
jquery-ui-1.7.2.custom.css
ui.jqgrid.css
js--
i18n--
jquery.jqGrid.min.js
jquery--
jquery-1.3.2.min.js
最简单的小demo如下，目录放置在test/jqgrid-demo.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen"
href="../components/jqgrid/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="../components/jqgrid/css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="../components/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../components/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../components/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script>
var mystr =
"<?xml version='1.0' encoding='utf-8'?><invoices><rows><row><cell>data1</cell><cell>data2</cell><cell>data3</cell><cell>data4</cell><cell>data5</cell><cell>data6</cell></row></rows></invoices>";

jQuery(document).ready(function(){
jQuery("#list").jqGrid({
datatype: 'xmlstring',
datastr : mystr,
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55, sorttype:'int'},
{name:'invdate', index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'},
{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} ],
pager: '#pager',
rowNum:10,
viewrecords: true,
caption: 'My first grid'
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>

2.开发安装模式
拷贝jgGrid里面的src到components/jqgrid/js/src
修改里面的
grid.loader.js文件
var pathtojsfiles = "../components/jqgrid/js/src/"; // need to be ajusted

同时修改我们的jqgrid-demo.html里面的引入js为：

<script src="../components/jqgrid/js/src/grid.loader.js" type="text/javascript"></script>

OK，搞定了。