DOJO如何向TableContainer添加标题

Question

以编程方式开发TableContainer。 TableContainer的所有子信息和属性都是从JSON文件中获取的。在客户端javascript代码中，我们处理此信息以准备TableContainer。

计划使用TableContainer标签作为该容器的标头，但失败了，因为容器标签位于第一列的中心，如屏幕截图-1所示

我希望标题显示在屏幕截图-2

中

仅供参考，我在根表容器中放置了许多表容器，其中每个表容器应该有一个标题

以下是json：

 "element":[
        {
            "type":"container",
            "propertylist":{
                "property":[
                    {
                        "name":"label",
                        "value":"Common Parameters"
                    },
                    {
                        "name":"id",
                        "value":"commonParams"
                    }
                ]
            },
            "element":[
                {
                    "type":"textfield",                     
                    "propertylist":{
                        "property":[
                            {
                                "name":"label",
                                "value":"Profile Name"
                            },
                            {
                                "name":"id",
                                "value":"profileName"
                            }
                        ]
                    }
                },
                {
                    "type":"textfield",                     
                    "propertylist":{
                        "property":[
                            {
                                "name":"label",
                                "value":"Description"
                            },
                            {
                                "name":"id",
                                "value":"description"
                            }
                        ]
                    }
                },
                {
                    "type":"checkbox",                      
                    "propertylist":{
                        "property":[
                            {
                                "name":"label",
                                "value":"Dual-ended"
                            },
                            {
                                "name":"checked",
                                "value":false
                            },
                            {
                                "name":"id",
                                "value":"dualEnded"
                            }
                        ]
                    }
                },
                {
                    "type":"checkbox",                      
                    "propertylist":{
                        "property":[
                            {
                                "name":"label",
                                "value":"DST is OAM-aware"
                            },
                            {
                                "name":"checked",
                                "value":false
                            },
                            {
                                "name":"id",
                                "value":"dstIsOAMAware"
                            }

                        ]
                    }
                },
                {
                    "type":"combobox",                      
                    "propertylist":{
                        "property":[
                            {
                                "name":"label",
                                "value":"Traffic Type"
                            },
                            {
                                "name":"store",
                                "value":"{{name='Y.1731 OAM', id:1},{name='Simulated Customer',id:2}}"
                            },
                            {
                                "name":"value",
                                "value":"1"
                            },
                            {
                                "name":"id",
                                "value":"trafficType"
                            }
                        ]
                    }
                },
                {
                    "type":"combobox",                      
                    "propertylist":{
                        "property":[
                            {
                                "name":"label",
                                "value":"MEG Level"
                            },
                            {
                                "name":"store",
                                "value":"{{id:0},{id:1},{id:2},{id:3},{id:4},{id:5}{id:6},{id:7}}"
                            },
                            {
                                "name":"value",
                                "value":"8"
                            },
                            {
                                "name":"id",
                                "value":"megLevel"
                            }
                        ]
                    }
                },
                {
                    "type":"combobox",
                    "actionlist":{
                        "action":[
                            {
                                "name":"onclick",
                                "value":"handleUserDefinedFramesize"
                            }
                        ]
                    },
                    "propertylist":{
                        "property":[
                            {
                                "name":"label",
                                "value":"Frame Size"
                            },
                            {
                                "name":"values",
                                "value":"{{id:1,name:'64 bytes'},{id:1,name:'128 bytes'},{id:1,name:'256 bytes'},{id:1,name:'512 bytes'},{id:1,name:'1024 bytes'},{id:1,name:'1280 bytes'},{id:1,name:'1518 bytes'},{id:1,name:'MTU'},{id:1,name:'User-defined'}}"
                            },
                            {
                                "name":"value",
                                "value":"4"
                            },
                            {
                                "name":"id",
                                "value":"frameSize"
                            }
                        ]
                    }
                },
                {
                    "type":"textfield",
                    "propertylist":{
                        "property":[
                            {
                                "name":"label",
                                "value":"User-defined Frame Size"
                            },
                            {
                                "name":"units",
                                "value":"bytes"
                            },
                            {
                                "name":"disabled",
                                "value":"true"
                            },
                            {
                                "name":"value",
                                "value":"2000"
                            },
                            {
                                "name":"id",
                                "value":"userDefinedFS"
                            }
                        ]
                    }
                },
                {
                    "type":"textfield",
                    "propertylist":{
                        "property":[
                            {
                                "name":"label",
                                "value":"Dwell Time"
                            },
                            {
                                "name":"units",
                                "value":"msecs"
                            },
                            {
                                "name":"value",
                                "value":"500"
                            },
                            {
                                "name":"id",
                                "value":"dwellTime"
                            }
                        ]
                    }
                }
            ]
        }

处理json的代码：

 function process(metaData){
                //alert(JSON.stringify(metaData));
                switch(metaData.type){
                  case "container":
                      var tableContainer = new dojox.layout.TableContainer({
                                      cols: 1,                                
                                      "labelWidth": "150"
                                    });
                      if(metaData.propertylist){
                         metaData.propertylist.property.forEach(function(prop) {
                            //var row = domConstruct.toDom('<div class="greyHeader" style="width:40% !important;">' + prop.value + '</div>');
                            //tabContainer.addChild(row);
                            tableContainer.set(prop.name, prop.value);

                         });
                      }
                    return tableContainer;
                    break;
                  case "textfield":
                      var textBox = new dijit.form.TextBox();
                      metaData.propertylist.property.forEach(function(prop) {
                          textBox.set(prop.name, prop.value);
                      });
                      return textBox;
                    break;
                  case "checkbox":
                      var checkBox = new dijit.form.CheckBox();
                      metaData.propertylist.property.forEach(function(prop) {
                          checkBox.set(prop.name, prop.value);
                      });
                      return checkBox;                        
                    break;
                  case "combobox":
                      // store is a mandatory param that is required otherwise this.domNode is null
                      var filteringSelect = new dijit.form.FilteringSelect({store:new Memory({data:[]})});
                      console.log(JSON.stringify(metaData.propertylist.property));
                      metaData.propertylist.property.forEach(function(prop) {
                          if(prop.name == 'store'){
                              filteringSelect.store = new Memory({data: prop.value});
                          }else{
                              filteringSelect.set(prop.name, prop.value);
                          }
                      });
                      return filteringSelect;
                    break;
                  case "button":
                      var button = new Button();
                      metaData.propertylist.property.forEach(function(prop) {
                          button.set(prop.name, prop.value);
                      });
                      return button;
                      break;
                  case "contentpane":
                      var contentPane = new ContentPane();
                      if(metaData.propertylist){
                          metaData.propertylist.property.forEach(function(prop) {
                              contentPane.set(prop.name, prop.value);
                          });
                      }
                      return contentPane;
                      break;
                }                       
            }

请告诉我，我如何使用表格容器的标签作为标题

很想知道如何将html文本添加到表容器中。

Answer 1

我找到了解决此问题的方法

编写一个自定义小部件，它将label作为构造函数参数，并重写buildRendering函数以返回以下内容     this.domNode = domConstruct.toDom（＆＃39;＆＃39; +＆＃39;＆＃39; +＆＃39;＆＃39;）;

然后它显示为标签