0

我正在尝试处理一个我无法完全命名的问题（因此在谷歌上搜索时遇到了麻烦）。

它处理一组类似“开关”的复选框。

以下是具体情况：

  • 我正在使用带有类似于该演示的复选框设置的图像映射器插件。
  • 复选框是从状态名称生成的，单击它们会调用 mapster 来打开/关闭状态。
  • 我正在使用一组额外的复选框，称为“美国东北部”、“美国东南部”等。
  • 单击“东北”必须打开该地区的所有州。再次单击应将其关闭。很简单。

并发症：

  • 区域之间存在重叠状态。
  • 单击美国东北部，然后关闭其中一个州，然后单击东南部等，现在使我的简单直接逻辑感到困惑。

可能的解决方案：

  • 我需要这些第三级复选框充当“开关”，跟踪复选框和映射区域的状态。
  • 当手动单击其中一个复选框时，Northeast 必须足够智能以关闭自身。
  • 点击东南，千万不要因为重叠状态……等而混淆了NE的数据状态。

我正在寻找一种以前处理过此类问题的设计模式。如果有人知道一个没有名字的解决方案模式，那么该知识也是最受欢迎的。

谢谢阅读！

4

2 回答 2

1

这就是集合论的用武之地。

您可以使用三态复选框来表示零件选择。看这里。 html中的三态复选框

这里有一个 jQuery 三态复选框插件

于 2013-04-14T21:56:13.813 回答
1

我相信你只需要依赖 checkboxen 的 javascript onclick 事件。

有2种情况：

  • 该复选框未被选中（即它已打开）。它必须根据它查找所有boxen，如果它们被选中，则调用它们的click方法。
  • 复选框正在被选中。它必须查找它所依赖的所有boxen，如果它们未被选中，则调用它们的click方法。

依赖图可以描述为一个矩阵，列和行索引表示框号，矩阵单元是行框依赖、依赖还是与列框无关。

您可能希望使用单独的数组来保持框名称和索引之间的映射。

当然，您必须确保依赖关系图中没有循环，否则您最终会导致事件触发器递归地调用自己。

更新：

我尝试了自己的解决方案，看看效果如何。

html文档：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
 <table>
  <thead>
    <colgroup>
    <col width='80'>
    <col width='20'>
    </colgroup>
    <colgroup>
    <col width='80'>
    <col width='20'>
    </colgroup>
    <colgroup>
    <col width='80'>
    <col width='20'>
    </colgroup>
    <tr>
    <th colspan="2">Level 1</th>
    <th colspan="2">Level 2</th>
    <th colspan="2">Level 3</th>
    </tr>
  <tbody>
    <tr>
      <td colspan='4'></td>
      <td rowspan='0'><label for='top' >top</label></td>
      <td rowspan='0'><input type='checkbox' id='top' value=''/></td>
    </tr>
    <tr>
      <td colspan='2'></td>
      <td rowspan='3'><label for='grp1' >grp1</label></td>
      <td rowspan='3'><input type='checkbox' id='grp1' value=''/></td>
    </tr>
    <tr>
      <td><label for='id1' >id1</label></td>
      <td><input type='checkbox' id='id1' value='abc'/></td>
    </tr>
    <tr>
      <td><label for='id2' >id2</label></td>
      <td><input type='checkbox' id='id2' value='def'/></td>
    </tr>
    <tr>
      <td><label for='id3' >id3</label></td>
      <td><input type='checkbox' id='id3' value='ghi'/></td>
    </tr>
    <tr>
      <td colspan='2'></td>
      <td rowspan='3'><label for='grp2' >grp2</label></td>
      <td rowspan='3'><input type='checkbox' id='grp2' value=''/></td>
    </tr>
    <tr>
      <td><label for='id4' >id4</label></td>
      <td><input type='checkbox' id='id4' value='klm'/></td>
    </tr>
    <tr>
      <td><label for='id5' >id5</label></td>
      <td><input type='checkbox' id='id5' value='nop'/></td>
    </tr>
    <tr>
      <td><label for='id6' >id6</label></td>
      <td><input type='checkbox' id='id6' value='qrs'/></td>
    </tr>
  </tbody>
</table>
<hr>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/multicheck.js" type="text/javascript"></script>
</body>
</html>

和 javascript 文件：

var data = {
    depends: {
        id1 : ['grp1'],
        id2 : ['grp1'],
        id3 : ['grp1', 'grp2'],
        id4 : ['grp2'],
        id5 : ['grp2', 'grp1'],
        id6 : ['grp2'],
        grp1 : ['top'],
        grp2 : ['top']
    },
    owns : {
        grp1 : ['id1','id2','id3', 'id5'],
        grp2 : ['id4','id5','id6', 'id3'],
        top  : ['grp1','grp2']
    }    
};

function check(elt){
    var target = elt.target;
    if (!target.checked) {
        // unchecking -> uncheck depends
        for (e in data.depends[target.id]) {
            $("input#"+data.depends[target.id][e]).each(
                function(){
                    if (this.checked)
                        this.click();
                });
        }
    }
    else {
        // checking -> check owns
        for (e in data.owns[target.id]) {
            $("input#"+data.owns[target.id][e]).each(
                function (){
                    if (!this.checked)
                        this.click();
                });
        }
    }
    return true;
}

(function(){
     $(document).ready(function(){
         $("input[type='checkbox']").bind('click',check);
     });
})();

数据对象包含所有依赖信息：depends列出所有“直接依赖”关系，并owns列出反向关系。

虽然它表示依赖图，但我直接使用 boxen 的 id 作为索引，并将其拆分为两个。

例子：

  • 每当tops 检查时，所有其他 boxen 也会在级联中进行检查（grp1首先检查它拥有的所有 id，然后grp2同样检查）。
  • 无论何时id5未选中grp1，top和grp2在此级联顺序中未选中。

_Remark：我不是 jquery 精通，所以可能有更简洁的方法来获得相同的结果。_

于 2013-04-14T21:47:30.120 回答