How to resolve the checkbox issue with the layui tree component?

In the layui tree component, the issue of checkboxes can be solved by using the following methods:

  1. Using the oncheck event of the tree to monitor the check operation, and then processing accordingly based on the check status. For example:
tree.on('check', function(obj) {
  // 获取勾选状态
  var isChecked = obj.checked;
  // 获取当前节点数据
  var data = obj.data;
  
  // 根据勾选状态进行处理
  if (isChecked) {
    // 处理勾选操作
    console.log('节点被勾选:', data);
  } else {
    // 处理取消勾选操作
    console.log('节点被取消勾选:', data);
  }
});
  1. If you need to specify the checked status of certain nodes when initializing, you can achieve this by setting the checked attribute in the data. For example:
var data = [
  {
    title: '节点1',
    id: '1',
    checked: true // 设置勾选状态为true
  },
  {
    title: '节点2',
    id: '2',
    checked: false // 设置勾选状态为false
  }
];

tree.render({
  elem: '#tree',
  data: data,
  showCheckbox: true // 显示复选框
});

By using the methods mentioned above, the issue of checking can be resolved in the tree component of layui.

bannerAds