最近做项目遇到的有关jqGrid和jstree的问题
一、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>