Jquery 和 Dojo DataGrid 问题答案

【问题标题】：Jquery and Dojo DataGrid problemJquery 和 Dojo DataGrid 问题
【发布时间】：2011-08-20 02:49:25
【问题描述】：

当我想加载包含一些 dojo 代码的页面时遇到问题。加载的页面不显示任何信息。

加载页面的 index.html 看起来像这样：

<html>
 <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
//to fill
</script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
    </head>
    <body>
    <div id="mainFrame">
<script type="text/javascript" >
$('#mainFrame').load('/Page.html');
</script>
</div>
    </body>
    <html>

我的第二页包含显示 DataGrid 的代码：Pahe.html

<html>
    <head>
    <link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/claroGrid.css'/>
       <script type="text/javascript" >
       dojo.require("dojox.grid.DataGrid");
       dojo.require("dojo.data.ItemFileReadStore");
       function prepare() {
          var data0 =[{FristName:'jean',LastName:'edu',Course:'english'}];
          var store0 = new dojo.data.ItemFileReadStore({
          data: {
          items: data0
          }
          });
          var grid0  = new dojox.grid.DataGrid({
          store: store0,
          structure: [
          {field: 'FirstName', name: 'FirstName', width:'auto'},
          {field: 'LastName', name: 'LastName', width:'auto'},
          {field: 'Course', name: 'Course', width:'auto'}
          ],
          rowsPerPage: 20,
          clientSort : true,
          rowSelector : '10px'
          }, "grid0");
          grid0.startup();
       }
       dojo.addOnLoad(prepare);
    </script>
    </head>
    <body>
    <div id="grid0"/>
    </body>
    </html>

当我在浏览器中运行此代码时，我没有看到任何内容。但是，我使用 google chrome 前景工具看到浏览器加载了 dojo 的 dataGrid...

我认为这是 jquery 加载的问题，因为如果我在“Page.html”中添加代码以加载 dojo 的脚本，我可以看到一些东西...我客人说有问题jquery 和 dojo...

你能帮我解决这个问题吗？

提前致谢，

蝙蝠

【问题讨论】：

标签： jquery datagrid dojo load

【解决方案1】：

也许只是在这里大声思考，但您在相应“大型机”div 上方的文档中内联调用 $('#mainFrame')。那会奏效吗？我认为js调用需要在文档中的“大型机”div下方。

我会尝试将该调用从“head”中移出，并将其内嵌在 body 中的“mainframe” div 之后的某个位置。

【讨论】：

我更改了代码（在我的线程上编辑）。但我仍然有问题。

【解决方案2】：

我去寻找 JQuery 负载的 API 文档，但它打开了一个空白页面 :-)

我不确定它到底做了什么，尤其是对于 HEAD 元素，但如果它只是做一些像 innerHTML 赋值之类的事情，那将不适用于 Dojo 的代码加载器或正在进行的 CDN 跨域加载。您可能希望在页面加载时执行的 Dojo 代码。

【讨论】：

【解决方案3】：

2 条建议：

1- 您可能需要为 dojo 网格导入“基本”网格 CSS。

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/Grid.css">

2- 您可能还需要在数据网格上设置高度（以像素为单位...百分比不适用于数据网格）。

【讨论】：