我正在尝试使用flexigrid插件进行jquery，问题是我也想使用插件fancybox，这个插件使用jQuery 1.4.3，但是flexigrid似乎不适用于那个版本的jquery。 / p>
当我回滚到flexigrid附带的旧jquery版本时，网格确实有效，但fancybox没有。
这是我正在使用的代码：
$("#grid1").flexigrid
(
{
url: 'php/get.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
{display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
{display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : doAction},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : doAction},
{separator: true},
{name: 'Activate', bclass: 'activate', onpress : doAction},
{separator: true},
{name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: 'XXX',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);
</script>
php回复看起来像这样：
{
page: 1,
total: 3,
rows: [
{id:'28',cell:['28','test','test','test','1']},
{id:'27',cell:['27','test','test','test','1']},
{id:'26',cell:['26','etrer','ter','trt','0']}]
}
我使用的是firebug，它没有显示任何js错误。
有没有办法在jquery 1.4.3中使用flexigid？
答案 0 :(得分：1)
尝试使用双引号渲染JSON，而不是单引号。
答案 1 :(得分：0)
两个插件似乎都适用于v1.3.2
答案 2 :(得分：0)
我想我有两个插件都在使用jQuery 1.6.1。显然它取决于flexigrid和fancybox jQuery插件以及我称为flexigrid.json的示例JSON文件。如果您下载这些插件并确保src和href链接到JavaScript和CSS的正确位置，并创建一个名为flexigrid.json的文件，其中包含以下内容：
{
"page": 1,
"total": 3,
"rows": [
{"id":28,"cell":[28,"test","test","test",1]},
{"id":27,"cell":[27,"test","test","test",1]},
{"id":26,"cell":[26,"etrer","ter","trt",0]}]
}
注意：您示例中的JSON无效（正如@Josh指出的那样）。您可以通过an online parser来查看错误。
以下是包含两个插件的示例页面：
<!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>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="flexigrid/js/flexigrid.pack.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="flexigrid/css/flexigrid.pack.css"/>
<script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css"/>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript">
$(function(){
function doAction() {}
$("#grid1").flexigrid({
url: 'flexigrid.json',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
{display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
{display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : doAction},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : doAction},
{separator: true},
{name: 'Activate', bclass: 'activate', onpress : doAction},
{separator: true},
{name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
{separator: true}
],
searchitems : [
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: 'XXX',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
});
$("a#example1").fancybox({
'titleShow' : false
});
$("a#example2").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});
$("a#example3").fancybox({
'titleShow' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<table id="grid1"><tr><td></td></tr></table>
<p>Different animations - 'fade', 'elastic' and 'none'<br />
<a id="example1" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">
<img alt="example1" src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg" />
</a>
<a id="example2" href="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg">
<img alt="example2" src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011_m.jpg" />
</a>
<a id="example3" href="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">
<img alt="example3" src="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a_m.jpg" />
</a>
</p>
</body>
</html>
注意：由于Same origin policy安全限制，在Chrome 13中进行测试时，这不会在本地运行。您可以在控制台中看到错误 Access-Control-Allow-Origin 不允许使用原点null。您需要从适当的Web服务器提供示例页面和JSON。
希望这有帮助。
答案 3 :(得分：0)
我正在研究同样的问题。我发现以下链接有助于您开始使用。
核心问题 - 来自groups.google.com
“从jQuery 1.4开始，如果JSON文件包含语法错误，请求通常会无提示失败。由于这个原因，避免频繁手工编辑JSON数据.JSON是一种数据交换格式，其语法规则比那些更严格。 JavaScript的对象文字符号。例如，JSON中表示的所有字符串，无论是属性还是值，都必须用双引号括起来。有关JSON格式的详细信息，请参阅http://json.org/。
基本上你现在必须小心你的json，并确保其格式正确。我猜它与此有关。检查json.org网站并检查您的JSON以确保其正确。“