Question

开发ACL管理器，ACL GUI的权限是基于数据库中的控制器动态创建的。因此，如果他们是3个控制器，我得到3组4个复选框（读，写，删除，执行）。它们具有不同的id，基于复选框的值（read = r，write = w ...）和与控制器id相同的data-id。

<ul class="list-group">
home                    
<li class="list-group-item">
    Read
    <div class="material-switch pull-right">
        <input id="check_permisssion_read1" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="1">
        <label for="check_permisssion_read1" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Write
    <div class="material-switch pull-right">
        <input id="check_permisssion_write1" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="1">
        <label for="check_permisssion_write1" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
        <input id="check_permisssion_delete1" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="1">
        <label for="check_permisssion_delete1" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
        <input id="check_permisssion_execute1" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="1">
        <label for="check_permisssion_execute1" class="label-success"></label>
    </div>
</li>
acl                    
<li class="list-group-item">
    Read
    <div class="material-switch pull-right">
        <input id="check_permisssion_read2" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="2">
        <label for="check_permisssion_read2" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Write
    <div class="material-switch pull-right">
        <input id="check_permisssion_write2" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="2">
        <label for="check_permisssion_write2" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
        <input id="check_permisssion_delete2" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="2">
        <label for="check_permisssion_delete2" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
        <input id="check_permisssion_execute2" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="2">
        <label for="check_permisssion_execute2" class="label-success"></label>
    </div>
</li>
acl_funcion1                    
<li class="list-group-item">
    Read
    <div class="material-switch pull-right">
        <input id="check_permisssion_read3" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="3">
        <label for="check_permisssion_read3" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Write
    <div class="material-switch pull-right">
        <input id="check_permisssion_write3" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="3">
        <label for="check_permisssion_write3" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
        <input id="check_permisssion_delete3" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="3">
        <label for="check_permisssion_delete3" class="label-success"></label>
    </div>
</li>
<li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
        <input id="check_permisssion_execute3" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="3">
        <label for="check_permisssion_execute3" class="label-success"></label>
    </div>
</li>

因此，当我点击“保存”按钮时，我需要选中复选框，但按数据ID分组，我该如何获取？

我只循环所有复选框并检查是否已选中，如果是，则返回data-id + value（1r，1w ...），例如。

var checkboxes = $('.acl_permission');
        checkboxes.each(function(idx, el){
            if ($(this).is(':checked')) {
                console.log($(this).data('id') + $(this).val())
            }
        });

但是像这样，我得到：

1r
1w
2r
2w
3w

我想得到类似的东西：

[{data-id: 1, permissions: 'rw'}, {data-id: 2, permissions: 'rw'}, {data-id: 3, permissions: 'w'}]基于data-id（控制器ID）和在该data-id（r，w，d，e）上检查的权限。

谢谢！

Answer 1

您的步骤：

将数据组属性添加到您的复选框
创建字典var permissions = {groupId：permissionString}

在你的循环中：如果权限包含带有groupId的键，则将权限键添加到permissionString，否则使用permissionString添加新的groupId

var checkboxes = $('.acl_permission');
var permissionDictionary = {};
checkboxes.each(function(idx, el){
    if ($(this).is(':checked')) {

        var groupId = $(this).attr('data-id')

        if !permissionDictionary[groupId] { 
            permissionDictionary[groupId] = "" 
        } 

        permissionDictionary[groupId] = permissionDictionary[groupId] + $(this).val() 
    }
});

Answer 2

试试这个。在每个函数内部推送对象。并添加data_id而不是data-id。

如果您需要每次点击.try以及onchange这样的事件

来更新数组

$('.acl_permission').click(function(){
    var res = [];
    var checkboxes = $('.acl_permission');
    checkboxes.each(function(idx, el) {
      if ($(this).is(':checked')) {
        var some = res.map(a => a.data_id)
        if (some.includes($(this).data('id'))) {
          res.forEach(a =>
           { if (a.data_id == $(this).data('id')) {
              a.permissions = a.permissions + $(this).val()
            }})
        } else {
          res.push({
            data_id: $(this).data('id'),
            permissions: $(this).val()
          })
        }
      }
    });
    console.log(res)
})

已更新

var res = [];
var checkboxes = $('.acl_permission');
checkboxes.each(function(idx, el) {
  if ($(this).is(':checked')) {
    var some = res.map(a => a.data_id) //validate the data_id exist
    if (some.includes($(this).data('id'))) {
      res.forEach(a =>
       { if (a.data_id == $(this).data('id')) {  
          a.permissions = a.permissions + $(this).val()//append to permission on exsit data_id permissions
        }})
    } else {
      res.push({  //its new data_id push with array
        data_id: $(this).data('id'),
        permissions: $(this).val()
      })
    }
  }
});
console.log(res)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group">
  home
  <li class="list-group-item">
    Read
    <div class="material-switch pull-right">
      <input id="check_permisssion_read1" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="1" checked>
      <label for="check_permisssion_read1" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Write
    <div class="material-switch pull-right">
      <input id="check_permisssion_write1" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="1">
      <label for="check_permisssion_write1" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
      <input id="check_permisssion_delete1" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="1" checked>
      <label for="check_permisssion_delete1" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
      <input id="check_permisssion_execute1" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="1">
      <label for="check_permisssion_execute1" class="label-success"></label>
    </div>
  </li>
  acl
  <li class="list-group-item">
    Read
    <div class="material-switch pull-right">
      <input id="check_permisssion_read2" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="2">
      <label for="check_permisssion_read2" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Write
    <div class="material-switch pull-right">
      <input id="check_permisssion_write2" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="2">
      <label for="check_permisssion_write2" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
      <input id="check_permisssion_delete2" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="2">
      <label for="check_permisssion_delete2" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
      <input id="check_permisssion_execute2" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="2">
      <label for="check_permisssion_execute2" class="label-success"></label>
    </div>
  </li>
  acl_funcion1
  <li class="list-group-item">
    Read
    <div class="material-switch pull-right">
      <input id="check_permisssion_read3" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="3">
      <label for="check_permisssion_read3" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Write
    <div class="material-switch pull-right">
      <input id="check_permisssion_write3" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="3">
      <label for="check_permisssion_write3" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
      <input id="check_permisssion_delete3" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="3">
      <label for="check_permisssion_delete3" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
      <input id="check_permisssion_execute3" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="3">
      <label for="check_permisssion_execute3" class="label-success"></label>
    </div>
  </li>

Answer 3

我认为你可以尝试做这样的事情

＆＃13;

function showResult() {

let result = {};

$("div[id^='group-']").each((index, group) => {
  $(group).find("input").each((index, permission) => {
    if (!result[group.id]) {
      result[group.id] = {};
    }
    result[group.id][permission.id] = permission.checked;
  });
})

console.log(result);

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="group-g1">
<input type="checkbox" id="r" /> read
<input type="checkbox" id="w" /> write
</div>

<div id="group-g2">
<input type="checkbox" id="r" /> read
<input type="checkbox" id="w" /> write
</div>

<input type="button" onClick="showResult()" value="Click Me">

＆＃13;

Answer 4

创建一个临时对象，其键是data_id，值是权限。然后使用Object.keys()来map()来自该对象的最终结果

＆＃13;

var  tmp ={};
$('.acl_permission:checked').each(function(){
   var data_id = $(this).data('id');   
   if(!tmp[data_id]) {
      tmp[data_id] =''
   }
   tmp[data_id]+= this.value
});

var res = Object.keys(tmp).map((key)=> ({data_id: key, permissions: tmp[key]}));

console.log(res)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group">
  home
  <li class="list-group-item">
    Read
    <div class="material-switch pull-right">
      <input id="check_permisssion_read1" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="1"  checked>
      <label for="check_permisssion_read1" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Write
    <div class="material-switch pull-right">
      <input id="check_permisssion_write1" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="1" checked>
      <label for="check_permisssion_write1" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
      <input id="check_permisssion_delete1" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="1">
      <label for="check_permisssion_delete1" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
      <input id="check_permisssion_execute1" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="1" checked>
      <label for="check_permisssion_execute1" class="label-success"></label>
    </div>
  </li>
  acl
  <li class="list-group-item">
    Read
    <div class="material-switch pull-right">
      <input id="check_permisssion_read2" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="2">
      <label for="check_permisssion_read2" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Write
    <div class="material-switch pull-right">
      <input id="check_permisssion_write2" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="2" checked>
      <label for="check_permisssion_write2" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
      <input id="check_permisssion_delete2" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="2">
      <label for="check_permisssion_delete2" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
      <input id="check_permisssion_execute2" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="2" checked>
      <label for="check_permisssion_execute2" class="label-success"></label>
    </div>
  </li>
  acl_funcion1
  <li class="list-group-item">
    Read
    <div class="material-switch pull-right">
      <input id="check_permisssion_read3" class="acl_permission" type="checkbox" name="acl_permission[]" value="r" data-id="3">
      <label for="check_permisssion_read3" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Write
    <div class="material-switch pull-right">
      <input id="check_permisssion_write3" class="acl_permission" type="checkbox" name="acl_permission[]" value="w" data-id="3" checked>
      <label for="check_permisssion_write3" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Delete
    <div class="material-switch pull-right">
      <input id="check_permisssion_delete3" class="acl_permission" type="checkbox" name="acl_permission[]" value="d" data-id="3" checked>
      <label for="check_permisssion_delete3" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Execute
    <div class="material-switch pull-right">
      <input id="check_permisssion_execute3" class="acl_permission" type="checkbox" name="acl_permission[]" value="e" data-id="3">
      <label for="check_permisssion_execute3" class="label-success"></label>
    </div>
  </li>
</ul>

＆＃13;

获取按属性分组的动态复选框组

4 个答案: