如何在jsGrid中获取隐藏列的值？附行选择复选框实现代码

嘿，我来帮你搞定这个问题！其实你已经手握最方便的数据源了——jsGrid里的每一行item对象本身就包含了所有列的数据，不管列是否设置为隐藏。结合你现有的复选框选择逻辑，给你几种直接能用的方案：

首先先确认你的隐藏列是通过visible: false正确配置的，比如列定义要像这样：

columns: [
  // 你的其他列...
  { name: "yourHiddenColumn", type: "text", visible: false }, // 这就是隐藏列
  // 你的复选框选择列...
]

1. 从已选中的selectedItems数组直接读取 #

你已经维护了selectedItems来存储选中的行数据，直接遍历这个数组就能拿到隐藏列的值，这是最省心的方式：

// 假设你的隐藏列名叫"userId"，遍历选中项获取值
selectedItems.forEach(selectedItem => {
  const hiddenColumnValue = selectedItem.userId;
  console.log("选中行的隐藏列值：", hiddenColumnValue);
  // 这里可以做你需要的业务处理
});

2. 在单个复选框的change事件中实时获取 #

如果需要在用户勾选/取消勾选单个复选框时，立刻拿到该行的隐藏列值，直接用你已经拿到的item参数就行：

itemTemplate : function(_, item) {
  return $("<input>").attr("type", "checkbox").attr("class", "singleCheckbox")
    .prop("checked", $.inArray(item, selectedItems) > -1)
    .on("change", function () {
      // 直接从item里取隐藏列的值，简单粗暴！
      const hiddenValue = item.yourHiddenColumn;
      console.log("当前操作行的隐藏列值：", hiddenValue);
      
      $(this).is(":checked") ? selectItem(item) : unselectItem(item);
    });
},

3. 通过DOM行元素获取（备选方案） #

如果因为某些场景你需要从DOM元素入手，也可以用jsGrid内置的getDataItem方法，从行元素还原出完整的item对象，再取隐藏列值：

// 比如给一个按钮绑定点击事件，批量获取选中行的隐藏列
$("#getHiddenValuesBtn").click(function() {
  $(".singleCheckbox:checked").each(function() {
    // 找到当前复选框所在的行
    const rowElement = $(this).closest(".jsgrid-row");
    // 用jsGrid的方法获取该行对应的item对象
    const rowItem = $("#jsGrid").jsGrid("getDataItem", rowElement);
    // 读取隐藏列值
    const hiddenVal = rowItem.yourHiddenColumn;
    console.log("选中行隐藏列值：", hiddenVal);
  });
});

总的来说，优先用前两种方法，直接操作item对象是jsGrid设计的初衷，比去DOM里扒数据靠谱多啦！

内容的提问来源于stack exchange，提问作者amdg