把dgrid放在一个TabContainer内的ContentPane内部

我一直试图在一个TabContainer内的ContentPane（以编程方式创建）内部放置一个网格，但到目前为止我没有成功。正如你所看到的，我试图通过使用ContentPane的内容属性来设置网格，但它不起作用。这是我的代码，谢谢。把dgrid放在一个TabContainer内的ContentPane内部

<!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>

来源

2016-08-15 Naci

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

，但你应该使用dojo/store/Memory使用grid.set("store",yourDatastore);而不是dgrid.renderArray(store)创建数据存储，然后呈现在dgrid数据，因此具有记忆你”将能够进行过滤器，在商店中使用查询和搜索，并在dgrid中自动渲染结果。

require({ 
 
    packages: [ 
 
     { 
 
      name: 'dgrid', 
 
      location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16' 
 
     }, 
 
     { 
 
      name: 'xstyle', 
 
      location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1' 
 
     }, 
 
     { 
 
      name: 'put-selector', 
 
      location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5' 
 
     } 
 
    ] 
 
}, ["dojo/_base/declare", 
 
    "dijit/layout/TabContainer", 
 
    "dijit/layout/ContentPane", 
 
    "dgrid/OnDemandGrid", 
 
    "dgrid/extensions/DijitRegistry", 
 
    'dojo/store/Memory', 
 
    "dojo/domReady!"], function(declare, TabContainer, ContentPane, Grid, DijitRegistry,Memory) { 
 

 
      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'); 
 
      
 
      // create memory store 
 
      store = new Memory({data: data}); 
 

 
      // fill dgrid with datastore  
 
      grid.set("store",store); 
 
      grid.startup(); 
 

 

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

 
      tc.startup(); 
 
     });

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/> 
 
<div class="claro"> 
 
    <div style="width: 350px; height: 290px"> 
 
    <div id="tc1-prog"></div> 
 
    </div> 
 
</div>

如果你想

来源

2016-08-16 14:36:32

@Naci我已经添加了一些建议（Memory Store），请参阅我的答案，如果它帮助将其标记为已解决，谢谢您 –

dgrid不是dojo API的一部分。您需要添加对dgrid脚本的引用，以便能够创建dgrid网格。

来源

2016-08-15 19:42:31

我已经把dgrid道场文件夹内，并没有错误与引用 – Naci

关于dgrid配置，你加什么Fiddle太。复制到文件夹/ Web项目是不够的。 –

谢谢@bRIMOsBor！我不知道为什么我没有在控制台中看到任何错误，但是您的代码非常好 – Naci

把dgrid放在一个TabContainer内的ContentPane内部

回答

相关问题