layui treeGrid通过js代码全选复选框

您可以使用以下代码来实现 layui treeGrid 全选复选框：

// 全选复选框
$('#checkAll').on('click', function() {
  var checked = $(this).prop('checked');
  $('.layui-table-body .layui-form-checkbox').each(function() {
    $(this).prop('checked', checked);
  });
});

// 监听复选框变化
$('.layui-table-body').on('click', '.layui-form-checkbox', function() {
  var checked = true;
  $('.layui-table-body .layui-form-checkbox').each(function() {
    if (!$(this).prop('checked')) {
      checked = false;
    }
  });
  $('#checkAll').prop('checked', checked);
});

其中，`#checkAll` 是全选复选框的 ID，`.layui-table-body` 是 layui treeGrid 的表格内容区域的 class。您可以根据实际情况修改这些选择器。

相关问题

layui treeGrid多级数据 通过js代码全选复选框

可以通过以下代码实现layui treeGrid多级数据的全选复选框：

var tree = layui.treeGrid;
var idList = []; // 用来存储所有节点的 id
var checkboxList = []; // 用来存储所有节点的复选框元素

tree.render({
  // 渲染代码
  done: function(res, curr, count) {
    // 遍历所有节点，获取 id 和复选框元素
    layui.each(res.data, function(index, item) {
      idList.push(item.id);
      checkboxList.push($('#treeGridCheckbox'+item.id));
    });
  }
});

// 全选复选框
$('#treeGridCheckboxAll').on('click', function() {
  var checked = $(this).prop('checked');
  layui.each(checkboxList, function(index, item) {
    $(item).prop('checked', checked);
  });
});

// 单个节点复选框
layui.each(idList, function(index, id) {
  $('#treeGridCheckbox'+id).on('click', function() {
    var checked = $(this).prop('checked');
    var parentNode = tree.getParentId(id); // 获取当前节点的父节点 id
    if (parentNode) {
      var siblings = tree.getSiblings(parentNode); // 获取当前节点的兄弟节点
      var checkedCount = 0;
      layui.each(siblings, function(index, sibling) {
        if ($('#treeGridCheckbox'+sibling.id).prop('checked')) {
          checkedCount++;
        }
      });
      if (checkedCount === siblings.length) {
        $('#treeGridCheckbox'+parentNode).prop('checked', true); // 如果所有兄弟节点都被选中，则勾选父节点
      } else {
        $('#treeGridCheckbox'+parentNode).prop('checked', false); // 否则取消勾选父节点
      }
    }
  });
});

以上代码实现了以下功能：

1. 遍历所有节点，获取节点的 id 和复选框元素，并存储在 `idList` 和 `checkboxList` 数组中。

2. 点击全选复选框时，将所有节点的复选框勾选状态设置为与全选复选框相同。

3. 点击单个节点的复选框时，如果该节点的所有兄弟节点都被选中，则勾选该节点的父节点；否则取消勾选该节点的父节点。

layui treeGrid多级数据通过js代码全选复选框

您好，针对您的问题，我提供如下思路：

1. 遍历所有的 treeGrid 行，找到每个行的复选框元素；
2. 给每个复选框元素绑定一个点击事件，用于更新当前复选框的选中状态；
3. 当点击某个复选框时，递归遍历该行的所有子孙节点，将所有复选框的选中状态设置为与当前复选框相同。

以下是参考代码，仅供参考：

// 获取 treeGrid 表格对象
var treeGrid = layui.treeGrid;

// 获取所有行数据
var allData = treeGrid.getData('tableId');

// 遍历所有行数据
for (var i = 0; i < allData.length; i++) {
  // 找到当前行的复选框元素
  var checkbox = treeGrid.getCheckboxDom('tableId', allData[i].id);

  // 给复选框元素绑定点击事件
  $(checkbox).click(function() {
    // 获取当前复选框的选中状态
    var checked = $(this).is(':checked');

    // 递归遍历当前行的所有子孙节点
    treeGrid.treeTraverse(allData[i], function(node) {
      // 找到当前节点的复选框元素
      var checkbox = treeGrid.getCheckboxDom('tableId', node.id);

      // 更新当前复选框的选中状态
      $(checkbox).prop('checked', checked);
    });
  });
}

当然，以上代码仅供参考，具体实现还需要根据您的实际需求进行修改。