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/

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

1 个答案: