Dartlang:使用不同数量的单选按钮创建表行

时间:2014-07-07 02:53:35

标签: radio-button dart dart-html

我是网络编程的新手,直到现在我只是创建只有一个单选按钮或复选框等行的表...但是现在我必须创建一个包含不同数量的单选按钮的行的表。我的表只有2列。第一列将包含行的指示符名称。第二列将包含单选按钮。那么我该如何创建一个包含多个单选按钮的单元格。有些行会有10个或更多的单选按钮,所以没人会想要一个接一个地附加10个单选按钮,对吗?

编辑:我是这样创建的:

 List anketScoreList = [{'id': 'university','text': 'University Score'}, 
                        {'id': 'gpa', 'text': 'GPA Score'}, 
                        {'id': 'language', 'text': 'Language Score'},
                        {'id': 'success', 'text': 'Success Score'}, 
                        {'id': 'fabric', 'text': 'Fabric Score'}, 
                        {'id': 'essay', 'text': 'Essay Score'}];
 //Radio values
 List score3 = ["1", "1.5", "2"];
 List score5 = ["1", "2", "3", "4", "5"];
 List score10 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];

 //creating table body
 anketScoreList.forEach((a) {
   index += 1;
   tbody.append(new Element.tr()
       ..append(new TableCellElement()..text = index.toString())
       ..append(new TableCellElement()..append(new LabelElement()
       ..text = a['text']
       ..setAttribute('for', a['id'])))
       ..append(createRadioButtons(a)));
 });

 Element createRadioButtons(metadata){
   List m;
   if(metadata['id'] == "university"){
       m = score3;
     } else if(metadata['id'] == "gpa" || metadata['id'] == "language" || 
               metadata['id'] == "essay"){
       m = score5;
     } else if(metadata['id'] == "success" || metadata['id'] == "fabric"){
       m = score10;
     }

 var td = new TableCellElement();
 m.forEach((score){
   td.append(new InputElement()
   ..type = "radio"
   ..id = metadata['id']
   ..value = score
   ..name = metadata['id']
   ..classes.add("radio")
   ..onSelect.listen((e){
  })
  );
});
return td;
}

那么有更简单的方法吗?特别是对于我创建的列表,假设会有其他值,如性别,类型等......? 另外我还有一个小问题。我试过onSelect,onClick我的收音机输入元素,但它没有用。我只是测试x = x + 10之类的东西,所以只是从我的onSelect.listen函数中删除了那些代码。

1 个答案:

答案 0 :(得分:1)

您可以做的是为分数创建地图:

Map scores = {
  'university': score3,
  'gpa':, score5,
  'language: score5,
  'essay: score5,
  'success': score10,
  'fabric': score10
};

您的createRadioButtons可以简化为

Element createRadioButtons(metadata){

  // or use a switch
  //
  // List m;
  // switch(metadata['id']) {
  //   case 'university': 
  //     m = score3;
  //     break;
  //   case 'gpa':
  //   case 'language':
  //   case 'essay':
  //     m = score5;
  //     break;
  //   case 'success':
  //   case 'fabric':
  //     m = score10;
  //     break;
  // }    

  var td = new TableCellElement();

  //m.forEach((score) {

  scores[metadata['id']].forEach((score){
    td.append(new InputElement()
        ..type = "radio"
        ..id = metadata['id']
        ..value = score
        ..name = metadata['id']
        ..classes.add("radio")
        ..onSelect.listen((e){

        })
    );
  });
  return td;
}

对于更改通知,您可以使用onClickonChange
http://www.dyn-web.com/tutorials/forms/radio/onclick-onchange.php