一、query.jqGrid-3.6.4
css:
首先一定要保证在你的页面中导入了一个JQuery UI theme css 文件.
如:<link type="text/css" href="../scripts/jslib/jquery/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
同时在JQuery UI theme css 文件的同级目录中一定要有JQuery UI theme中所包含的images文件夹及里面的image文件,如上的目录,则在目录custome-theme下面有一个images文件夹,里面包含jquery-ui-1.7.2.custom.css所引用的所有图片.如果不导入这个images文件夹的话,则jqGrid-3.6.4的很多css不能完全表示出来,它的分页导航中用到的上一页、下一页等等导航图片不能正常显示。除了导入JQuery UI theme css 文件外，你还得导入ui.jqgrid.css文件，此文件的目录不一定得和jquery-ui-1.7.2.custom.css的一致。你可以将其放在其它的目录下，如下所示：
<link type="text/css" href="../styles/csslib/jqgrid/ui.jqgrid.css" rel="stylesheet" />
如果你用到了jqGrid的多选功能，最好再导入ui.multiselect.css文件。如下所示：
<link type="text/css" href="../styles/csslib/jqgrid/ui.multiselect.css" rel="stylesheet" />
js:
从下载的jqgrid文件夹中的js/i18n目录下复制一个你要求的相应的语言文件到你的web项目中。如我们的项目大部分是要求显示中文的，所以选择grid.locale-cn.js文件，同时在你的web项目中导入query.jqGid.min.js文件。
如下所示：<script type="text/javascript"
src="../scripts/jslib/jqgrid/grid.locale-cn.js"></script>
<script type="text/javascript"
src="../scripts/jslib/jqgrid/jquery.jqGrid.min.js"></script>
特别注意：
导入这两个js文件时要特别注意：grid.locale-cn.js必须放在jquery.jqGrid.min.js的前面。
如果你颠倒了它们的顺序的话你就会遇到错误。我就遇到了这个问题。
二、jsTree.v.0.9.9a2的一个问题
在jstree的官网上的文档中（http://www.jstree.com/documentation）的第一句如下所示：
“First of all, as jsTree is a jQuery component, you need to include jQuery itself. Currently jsTree uses version 1.3.2 (the latest as of 14.Sept.2009)”。
网上现在最新的jstree稳定版本是jsTree.v.0.9.9a2, 它的1.0版本还只是测试版本。由于这句话的缘故，我在使用jstree时，就用了jquery1.3.2版本，因为现在jquery的主流还应该是1.3，而不是jquery1.4。但最后问题就出来了，在我的项目中产生了两棵jstree，都调用了callback中的onselect函数，这样两个onselect回调函数中的jstree实例，都会是首先在浏览器中产生的那棵树。也就是说两棵树都会调用第一棵树实例的onselect回调函数。解决办法是：
将jquery1.3.2换成jquery1.4.1就OK了。在下载的jsTree.v.0.9.9a2中的lib目录下的jquery.js的版本就是1.4.1。
但如果我在项目中使用jquery1.4.1的话，则我很多js以及一些jquery插件都不能再运行，但它们在jquery1.3.2下是可以很好的运行的。
最终解决方案是: 不要使用
jsTree.v.0.9.9a2,因为它使用的是jquery1.4.1,而直接使用
jsTree.v.0.9.9(基于jquery1.3.2)就可以了.也就是你以前基于
jsTree.v.0.9.9a2写的js代码,在使用
jsTree.v.0.9.9时一样也能运行,因为它们其实就是同一个jstree版本,不像
jsTree.v.0.9.8与
jsTree.v.0.9.9的区别,后者不但修改了前者中已有的许多函数的命名,同时新增了很多新函数,但jsTree.v.0.9.9a2相对jsTree.v.0.9.9只是修正了一些bug而已,"fixed bug with creating root nodes",这是在jstree官网上changelog中的原话!所以完全可以使用jsTree.v.0.9.9替代了jsTree.v.0.9.9a2,同样能实现功能,且不需要修改js代码,很爽!
你可以使用我下面提供的这个htm测试一下，你将它放到\jsTree.v.0.9.9a2\demo目录下即可进行测试：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--<script type="text/javascript" src="../lib/jquery-1.3.2.js"></script>-->
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../jquery.tree.js"></script>
<script type="text/javascript">
$(function(){
$("#testTree1").tree({
data : {
type : "json",
opts : {
static : [
{ data : "A node", children : [ { data : "Only child" } ],
// this node will initially be open
state : "open"
},
{ data : "Some other node",
// this node will appear closed even though it has no children
state : "closed"
}
]
}
},callback : {
onload : function () {
alert("tree1 loaded!");
},
onchange : function () {
alert("tree1 changed!");
}
}
})
})
</script>
<script type="text/javascript">
$(function() {
$("#testTree2").tree({
data : {
type : "json",
opts : {
static : [
{ data : "A node", children : [ { data : "Only child" } ],
// this node will initially be open
state : "open"
},
{ data : "Some other node",
// this node will appear closed even though it has no children
state : "closed"
}
]
}
},callback : {
onload : function () {
alert("tree2 loaded!");
},
onchange : function () {
alert("tree2 changed!");
}
}
});
})
</script>
</head>
<body>
<div id="testTree1"></div>
<p>Tree test d......</p>
<p>Tree test d......</p>
<div id="testTree2"></div>
</body>
</html>
分享到：
相关推荐
jquery.jqGrid.js，jqGrid表格专用JS文件，缺失备用，即下即用。
Guriddo_jqGrid_JS_5_2_X_demo 是一个关于JQGrid JavaScript库的中文文档和示例集合，适用于版本5.2.x。JQGrid是一个强大的、开源的JavaScript表格插件，用于在网页上展示和操作数据，特别适合大数据量、多列和复杂...
【MVC4+JQGRID+SubGrid+JSTREE+JSON(DEMO)】这是一个基于C#的MVC4框架的示例项目，它利用了JQGRID的子网格（SubGrid）功能以及JSTREE插件，展示了如何在Web应用中实现数据的交互和展示。同时，该项目还包含了JSON...
jqGrid_JS_4.7.1 是一个基于JavaScript的开源数据网格组件，主要用于展示和管理大量数据。这个版本4.7.1是jqGrid的一个重要里程碑，提供了丰富的功能和优化，使得网页应用能够高效地处理表格数据。下面将详细介绍这...
Guriddo jqGrid JS 5.2.0 是一个强大的JavaScript库，专门用于创建功能丰富的数据网格。这个库基于jQuery，提供了大量的功能和灵活性，使得开发者能够轻松地在网页上展示、操作和管理大量的数据。jqGrid允许用户对...
| jquery jqGrid min js | jquery jqGrid src js | jquery 1 9 0 min js plugins | grid addons js | grid postext js | grid setcolumns js | jquery contextmenu js | jquery searchFilter js | jquery tablednd ...
8. **性能优化**：jqGrid在加载速度上做了优化，特别是在处理大量数据时，它可以通过分页和懒加载技术减少对服务器的压力，同时保证页面响应速度。 9. **json支持**：作为现代Web开发中常见的数据交换格式，jqGrid...
"js"目录存储了jqGrid的主要JavaScript库和相关脚本。这里可能包含jqGrid的主脚本文件（如grid.base.js，grid.common.js等），以及针对特定功能的模块（如grid.pivot.js，grid.treegrid.js等）。这些文件实现了...
这个压缩包包含了jqGrid运行所必需的JavaScript文件和CSS样式表，使得开发者能够轻松集成这一功能丰富的表格组件到自己的项目中。 首先，让我们详细了解jqGrid的核心特性： 1. **数据网格**：jqGrid提供了一种灵活...
Guriddo_jqGrid_JS_5.0.1 是一个基于JavaScript的开源网格控件，主要用于在Web应用中展示和操作数据。jqGrid是jQuery的一个插件，它提供了丰富的功能，包括数据分页、排序、搜索、过滤、编辑以及自定义列等，广泛...
jqGrid是一款功能强大的JavaScript数据网格插件，常用于在网页上展示和操作表格数据。它支持多种特性，包括排序、...这个实例将帮助你更好地理解和掌握jqGrid的树形视图功能，从而在实际项目中更有效地呈现层次数据。
Guriddo_jqGrid_JS_5.4.0-Trial.zip 是...总之，Guriddo_jqGrid_JS_5.4.0-Trial.zip是一个强大的工具，适合需要在网页上展示和管理大量结构化数据的项目。通过深入理解和熟练运用，你可以创建出高效、易用的表格应用。
在IT行业中，构建交互式和美观的Web应用是常见的需求，而`Jquery`、`BootStrap`、`ztree`和`jqgrid`这四个技术组件在这一领域扮演了重要角色。让我们深入探讨一下这些工具的核心功能和它们如何协同工作。 首先，`...
treeIcons: {leaf:'ui-icon-document-b'}, caption: "jqGrid Demos", autowidth: true, rowNum: 10000, ExpandColClick: true, jsonReader: { repeatitems: false, root: "response" }, onSelectRow: ...
在本项目中，"maven 项目cxf 使用jqgrid4.4.3 项目开发代码" 是一个基于Maven构建的Java应用，利用Apache CXF框架开发RESTful服务，并结合jqGrid 4.4.3这个前端JavaScript库进行数据展示和交互。以下是关于这些技术...
jqGrid tree 树 懒加载 示例. 虽然不是难题,但是没有接触过 jqgrid 的人,还是要花点时间的. 项目为 springboot 项目 说明1: 展开节点时, jqGrid 会自动向 url 发送请求, 请求会附带一系列参数, 其中 nodeid :当前...
jqGrid 中文语言js，grid.locale-cn.js
* 安装 jQuery 和 JQGrid 相关文件 * 下载最新的 jQuery 和 JQGrid 文件 * 添加 jQuery 和 JQGrid 引用到 HTML 文件中 * 配置 JQGrid 的参数，如 url、datatype、mtype、colNames、colModel 等 JQGrid 的参数 * ...
10. 文档和示例：jqGrid拥有详尽的文档和丰富的示例代码，帮助开发者快速上手并解决遇到的问题。 总的来说，jqGrid5.5版本是一个功能全面且高度可定制的数据网格解决方案，适合开发复杂的Web应用程序，特别是在处理...
jqGrid是一款功能强大的jQuery插件，专用于在Web页面上展示和操作表格数据。它以其高效、灵活和可定制性而受到开发者的广泛欢迎。在jqGrid 4.6和4.7这两个版本中，我们可以深入探讨一些核心知识点： 1. **数据网格...