dojo - 如何在 dojo 中创建自定义表格小部件？

Question

最近我开始使用 Dojo 来编写应用程序接口，并且是 Dojo 的新手，我的第一个任务是创建一个自定义表格小部件，其中包含显示来自数据库的文件列表和文件图标的行。该小部件将类似于数据网格，但我们希望使用类似于列表的表格，因为数据网格有时对网络来说可能很重。谢谢您的帮助，我们将不胜感激。

Answer 1

好的，假设您使用数据存储区实例化您的自定义小部件，网格也是如此。您的商店，取决于哪种类型（例如：itemfilereadstore）具有其项目列表，以下将处理它们，同时在您的小部件中创建行

<script>
    dojo.declare("myTable", [dijit._Templated], {
     // define which template to instantiate on your domNode (in this case, table becomes the domNode of your widget)
     templateString: '<table><thead dojo-attach-point="headNode"></thead><tbody dojo-attach-point="bodyNode"></tbody></table>',

     constructor: function(args) {
       args = args || {};
       if(!args.store) console.warn("No store supplied");
       this.store = args.store
       // Note; there are a number of methods to achieve this hook,
       // depending on which type of datastore is in use
       this.store.fetch({ onComplete: dojo.hitch(this, "_onload") });
     },
     // function to be called whenever the store has fetched an item set
     _onload: function(items) {
       var _t = this, store = _t.store, head = _t.headNode, body = _t.bodyNode;
       var headIsFilled = false;
       // 'haxed' reset of current setup, simply resetting innerhtml
       _t.rowIdentifiers = [];
       _t.rows = [];
       head.innerHTML = "<tr></tr>";
       head = head.firstChild;
       body.innerHTML = "";
       dojo.forEach(items, function(item) {
           // generic way of simply showing all of contents available in store
           // prefereably, set this structure in an argument while constructing and
           // fill head with, say _t.layout
           if(!headIsFilled) {
              // loops the first item, making sure not to take in any internal references, should check for item
              for(var i in item) if(item.hasOwnProperty(i) && i != "_S" && i != "_RI") {
                 dojo.place("<th>"+i+"</th>");
                 _t.rowIdentifiers.push(i);
              }
              headIsFilled = true; // only once
           }
           var tr = dojo.create("tr", null, body);
           var row = { el : tr }
           var cell;
           dojo.forEach(_t.rowIdentifiers, function(key) {
             cell = dojo.create("td", {innerHTML : store.getValue(item, key)},  tr);
             row[key] = cell.innerHTML; // the toString value of item
           });
           _t.rows.push(row);
       });
     }
    });
</script>

代码尚未经过评估，但应该可以大致了解如何启动小部件。

注意代码中的几件事；templateString是基本的 html 布局应该是什么，并且有许多“魔术”约定，在这个例子中，只有附加点用于让 _Templated mixin 在小部件中对其 domNodes 进行引用

请参阅以下入门教程和一般参考：

http://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget/

http://dojotoolkit.org/documentation/tutorials/1.6/templated/