Question

我有以下要求：

根据层次结构显示下拉列表（父子关系）。
每个节点都应该是可检查的（每个选项都有一个复选框）
如果我们选择所有子节点，则应检查父节点自动或反之亦然。

例如：在下拉列表中我想要这样的东西：

<html>
<head>

    <title>Index</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>
<body ng-app="EFView">

 @{ var a = ViewBag.data;}
   <div ng-init="init(@Html.Raw(a)">
       <table>
           <tr ng-repeat="x in a">
               <td >
                   {{x.ID}}
               </td>
               <td>
                   {{x.Name}}
               </td>
               <td>
                   {{x.Address}}
               </td>
           </tr>
       </table>
   </div>



</body>
</html>

请建议任何解决方案，或者是否有可用的插件。层次结构未来可能会超过4-5级。

提前致谢。

Answer 1

我制作了虚拟代码。希望它会对你有所帮助。

Html -

<div class="parent">
  <input type="checkbox">1
  <div>
    <input type="checkbox">1.1
    <input type="checkbox">1.2
    <div>
      <input type="checkbox">1.2.1
      <div>
        <input type="checkbox">1.2.1.1
        <input type="checkbox">1.2.1.2
        <input type="checkbox">1.2.1.3
      </div>
      <input type="checkbox">1.2.2
    </div>
  </div>
  <input type="checkbox">2
  <div>
    <input type="checkbox">2.1
    <input type="checkbox">2.2
  </div>
</div>

Jquery -

$('input').change(function(){
    var status = false;
  $(this).next().find('input').prop('checked', this.checked); 
    status = ($(this).parent().find('> input').not(':checked').length === 0);
  $(this).parent().prev().prop('checked', status);
  if(status){
        $(this).parent().prev().trigger("change");
  }
  else{
    $(this).parents().prev().prop('checked', false);
  }
});

您可以参考演示 - https://jsfiddle.net/dhananjaymane11/w0trj615/1/

Answer 2

你可以尝试这个插件 Bootstrap Treeview

我将它用于像你这样的类似案件。

多选分层下拉列表

2 个答案: