Question

我有Analysis Paralysis，需要一些输入。我可以修改SQL查询，JavaScript和/或CFML控制器（所有代码已发布在下面）。

我要做的就是用选项和optgroups填充选择框。 optgroup是让我绊倒的原因。

sql很基本，看起来像这样：

SELECT
    g.groupID,
    g.groupLabel,
    u.unitLabel,
    u.unitID
  FROM
    group g
    LEFT JOIN unit u ON g.groupID = u.groupID

CFML循环如下（这也是我认为应该使用某些逻辑进行调整的地方，例如thisGroupLabel与preGroupLabel相匹配，留在循环中并继续添加unitLabel和unitID））更有效的方法？：

local.data.unitLabels = [];
    for(local.row in local.__unitLabels){
        local.unit = {};
        local.unit.groupLabel = local.row.groupLabel;
        local.unit.unitLabel = local.row.unitLabel;
        local.unit.unitID = local.row.unitID;
        //  loop over the array so that we can identify which one needs to be preselected
        for(local.dataValue in local.data.unitDetails){
            if (local.unit.unitID eq local.dataValue.unitID) {
                local.unit.selected = 'selected';
            } else {
                local.unit.selected = '';
            }
        }
    arrayAppend(local.data.unitLabels, local.unit);
}

JSON数据如下所示，但是我可以访问该查询，因此可以根据需要重新设置其格式：

{
    "data": {
        "selectDataOptions": [{
            "groupLabel": "COMPLETION",
            "selected": "",
            "unitID": 1,
            "unitLabel": "Completion"
        }, {
            "groupLabel": "DISTANCE",
            "selected": "",
            "unitID": 2,
            "unitLabel": "Meters"
        }, {
            "groupLabel": "DISTANCE",
            "selected": "",
            "unitID": 3,
            "unitLabel": "Miles"
        }, {
            "groupLabel": "DISTANCE",
            "selected": "",
            "unitID": 4,
            "unitLabel": "Yards"
        }, {
            "groupLabel": "TIME",
            "selected": "",
            "unitID": 5,
            "unitLabel": "Hours"
        }, {
            "groupLabel": "TIME",
            "selected": "",
            "unitID": 5,
            "unitLabel": "minutes"
        }, {
            "groupLabel": "TIME",
            "selected": "",
            "unitID": 5,
            "unitLabel": "Seconds"
        }]
    }
}

就目前而言，我的选择框大致如下：

<select>
    <optgroup>COMPLETION</optgroup>
    <option>Complettion</option>
    <optgroup>DISTANCE</OPTGROUP>
    <option>Meters</option>
    <optgroup>DISTANCE</optgroup>
    <option>Miles</option>
    <optgtroup>DISTANCE</optgroup>
    <option>Yards</option>
    <optgtroup>TIME</optgroup>
    <option>Hours</option>
    <optgtroup>TIME</optgroup>
    <option>Minutes</option>
</select>

请注意，重复了optgroup Distance和TIME。所需的输出如下所示：

<select>
    <optgroup>COMPLETION</optgroup>
    <option>Complettion</option>
    <optgroup>DISTANCE</OPTGROUP>
    <option>Meters</option>
    <option>Miles</option>
    <option>Yards</option>
    <optgroup>TIME</optgroup>
    <option>Hours</option>
    <option>Mintues</option>
</select>

Answer 1

问题是如何构造Select2可以理解的JSON字符串？我建议为每个GroupLabel创建一个嵌套的子级数组，如Grouped Data下的文档中所述。

CF11 +和Lucee 4.5+支持cfloop "group"，这将使事情变得容易得多。只是cfloop通过查询并按“ groupLabel”进行分组。（ NB：别忘了修改SQL查询和ORDER BY g.groupLabel，以便分组按预期进行。）

TryCF.com Example

代码：

data= [];
cfloop(query="qDemo", group="groupLabel") {

   children = [];
   cfloop() {
      arrayAppend(children, {"id": qDemo.unitID, "text": qDemo.unitLabel});
   }

   arrayAppend(data, {"text" : qDemo.GroupLabel, "children" : children });
}

writeDump(serializeJSON(data));

结果：

[
  {
    "text": "COMPLETION",
    "children": [
      {
        "text": "Completion",
        "id": 1
      }
    ]
  },
  {
    "text": "DISTANCE",
    "children": [
      {
        "text": "Meters",
        "id": 2
      },
      {
        "text": "Miles",
        "id": 3
      },
      {
        "text": "Yards",
        "id": 4
      }
    ]
  },
  {
    "text": "TIME",
    "children": [
      {
        "text": "Hours",
        "id": 5
      },
      {
        "text": "minutes",
        "id": 5
      },
      {
        "text": "Seconds",
        "id": 5
      }
    ]
  }
]

循环遍历JSON数据以使用optgroup部分填充选择框时出现分析瘫痪

1 个答案: