Fatal编程技术网
  • dojo/
  • Dojo 将dgrid放入TabContainer中的ContentPane中

Dojo 将dgrid放入TabContainer中的ContentPane中

dojo

Dojo 将dgrid放入TabContainer中的ContentPane中,dojo,dgrid,Dojo,Dgrid,我一直试图在TabContainer中的ContentPane（通过编程创建）中放置网格，但到目前为止我没有成功。如您所见，我尝试使用ContentPane的content属性设置网格，但没有成功。这是我的密码，谢谢 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body class = "claro"> <link rel=

我一直试图在TabContainer中的ContentPane（通过编程创建）中放置网格，但到目前为止我没有成功。如您所见，我尝试使用ContentPane的content属性设置网格，但没有成功。这是我的密码，谢谢

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body class = "claro">
    <link rel="stylesheet"
    href="http://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css" />
    <!-- load Dojo -->
    <script>
        dojoConfig = {
            parseOnLoad : true
        }
    </script>
    <script src="/xampp/dojo/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, locale:'en'"></script>

    <div style="width: 350px; height: 290px">
        <div id="tc1-prog"></div>
    </div>

    <script>
        require(["dojo/_base/declare", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dgrid/OnDemandGrid", "dgrid/extensions/DijitRegistry", "dojo/domReady!"], function(declare, TabContainer, ContentPane, Grid, DijitRegistry) {

            var tc = new TabContainer({
                style : "height: 100%; width: 100%;"
            }, "tc1-prog");

            var cp1 = new ContentPane({
                title : "Food",
                content : "We offer amazing food"
            });
            tc.addChild(cp1);

            var cp2 = new ContentPane({
                title : "Drinks",
                content : "We are known for our drinks."
            });
            tc.addChild(cp2);

            var data = [{
                first : 'Bob',
                last : 'Barker',
                age : 89
            }, {
                first : 'Vanna',
                last : 'White',
                age : 55
            }, {
                first : 'Pat',
                last : 'Sajak',
                age : 65
            }];

            var grid = new Grid({
                columns : {
                    first : 'First Name',
                    last : 'Last Name',
                    age : 'Age'
                }
            }, 'grid');
            grid.renderArray(data);
            grid.startup();


            var cp3 = new ContentPane({
                title : "Grid",
                content : grid
            });
            tc.addChild(cp3);

            tc.startup();
        });
    </script>

</body>


dojoConfig={
parseOnLoad：true
}
需要（[“dojo/_base/declare”、“dijit/layout/TabContainer”、“dijit/layout/ContentPane”、“dgrid/OnDemandGrid”、“dgrid/extensions/DijitRegistry”、“dojo/domReady！”），函数（declare、TabContainer、ContentPane、Grid、DijitRegistry）{
var tc=新标签容器({
样式：“高度：100%；宽度：100%；”
}“tc1项目”；
var cp1=新内容窗格({
标题：“食物”，
内容：“我们提供令人惊奇的食物”
});
tc.addChild（cp1）；
var cp2=新内容窗格({
标题：“饮料”，
内容：“我们以饮料闻名。”
});
tc.addChild（cp2）；
风险值数据=[{
第一个：'鲍勃'，
最后一句：“巴克”，
年龄:89
}, {
第一个：“Vanna”，
最后一句：“白色”，
年龄:55
}, {
第一个：“帕特”，
最后一句：“Sajak”，
年龄:65
}];
var grid=新网格({
栏目：{
第一个：'名字'，
last:'姓'，
年龄：“年龄”
}
}“网格”）；
网格渲染（数据）；
grid.startup（）；
var cp3=新内容窗格({
标题：“网格”，
内容：网格
});
tc.addChild（cp3）；
tc.startup（）；
});

dgrid
不是
dojo
api的一部分。您需要添加对
dgrid
脚本的引用才能创建dgrid网格。

我刚刚在这里嵌入了解决方案，没有问题：

但是您应该使用
dojo/store/Memory
创建数据存储，然后使用
grid.set（“store”，yourDatastore）在dgrid上呈现数据
而不是
dgrid.renderArray（store）
，因此有了内存，您就可以进行筛选，在store上使用查询和搜索，还可以在dgrid中自动渲染结果

需要({
套餐：[
{
名称：“dgrid”，
位置：“//cdn.rawgit.com/SitePen/dgrid/v0.3.16”
},
{
名称：“xstyle”，
位置：“//cdn.rawgit.com/krizyp/xstyle/v0.2.1”
},
{
名称：“放置选择器”，
位置：“//cdn.rawgit.com/krizyp/put selector/v0.3.5”
}
]
}，[“dojo/_base/declare”，
“dijit/layout/TabContainer”，
“dijit/layout/ContentPane”，
“dgrid/OnDemandGrid”，
“dgrid/extensions/DijitRegistry”，
“dojo/store/Memory”，
“dojo/domReady！”]，函数（声明、TabContainer、ContentPane、网格、DijitRegistry、内存）{
var tc=新标签容器({
样式：“高度：100%；宽度：100%；”
}“tc1项目”；
var cp1=新内容窗格({
标题：“食物”，
内容：“我们提供令人惊奇的食物”
});
tc.addChild（cp1）；
var cp2=新内容窗格({
标题：“饮料”，
内容：“我们以饮料闻名。”
});
tc.addChild（cp2）；
风险值数据=[{
第一个：'鲍勃'，
最后一句：“巴克”，
年龄:89
}, {
第一个：“Vanna”，
最后一句：“白色”，
年龄:55
}, {
第一个：“帕特”，
最后一句：“Sajak”，
年龄:65
}];
var grid=新网格({
栏目：{
第一个：'名字'，
last:'姓'，
年龄：“年龄”
}
}“网格”）；
//创建内存存储
存储=新内存（{data:data}）；
//用数据存储填充dgrid
网格集（“存储”，存储）；
grid.startup（）；
var cp3=新内容窗格({
标题：“网格”，
内容：网格
});
tc.addChild（cp3）；
tc.startup（）；
});



我已经将dgrid放在dojo文件夹中，并且引用没有错误。dgrid的配置如何，您是否也添加了它。复制到文件夹/web项目是不够的。谢谢@bRIMOsBor！我不知道为什么我在控制台中没有看到任何错误，但是您的代码非常复杂nice@Naci我添加了一些建议（内存存储），请查看我的答案，如果它有助于将其标记为已解决，谢谢