在HTML中设置复选框状态(选中/未选中)。

huangapple go评论47阅读模式
英文:

Setting checkbox state in HTML (checked/unchecked)

问题

以下是您要翻译的内容:

这是我的表格:

https://live.bootstrap-table.com/code/MajesticGray/15539

复选框列的渲染方式如下(假设用户ID为2):

<input data-index="0" name="project[users][]" type="checkbox" value="2" checked="checked">

现在,这没问题,但我希望在页面加载时只有一些复选框被选中,所以我查看了文档:
https://bootstrap-table.com/docs/api/column-options/#checkbox

它说:

如果提供了值,复选框会自动被选中。还可以通过使用格式化程序来选中/取消选中复选框(返回true表示选中,返回false表示取消选中)。

但我无法使其工作。
我尝试在<td>上使用 data-formatter="() => false;",但没有成功。

请您提供一个示例,谢谢!

英文:

this is my table:

https://live.bootstrap-table.com/code/MajesticGray/15539

The checkbox column is rendered this way (given the user id is 2):

&lt;input data-index=&quot;0&quot; name=&quot;project[users][]&quot; type=&quot;checkbox&quot; value=&quot;2&quot; checked=&quot;checked&quot;&gt;

Now, that's ok but I want only some checkboxes to be checked on page load, so I took a look at the docs:
https://bootstrap-table.com/docs/api/column-options/#checkbox

and it says that:

> If a value is given, the checkbox is automatically checked. Its also possible to check/uncheck the checkbox by using a formatter (return true to check, return false to uncheck).

But I can't get this working.
I tried data-formatter=&quot;() =&gt; false;&quot; on &lt;td&gt;, to no avail.

Could you provide an example, please?

答案1

得分: 0

数据格式化选项实际上只在列上起作用,据我所知,但确实可以用它来实现你想要的效果。

修改了你的示例,添加了一个名为checkFormatter的格式化器以及相应的函数。你可以根据需要修改这个函数,用于每一行的选中/取消选中逻辑。格式化器确实非常强大!

快速总结一下所做的更改:

首先,将格式化器添加到列中。

<th data-field="id" data-checkbox="true" data-formatter="checkFormatter"></th>

然后,创建一个与格式化器同名的函数。

function checkFormatter(value, row, index) {
  if (index === 1) {
    return {
      checked: false
    }
  }
  // 如果行不满足取消选中的条件,可以在注释掉的行中返回其他值
}

我传递了比实际需要更多的参数,只是为了展示可能的用法。此外,如果你的表生成代码不清楚,索引只设置为1(第二行),但完全可以像这样检查其他内容if(row.id == 2)(通过这个改变的另一个示例),这将使用表中id列的值。

这个官方示例展示了如何使用格式化器以这种方式选中/取消选中复选框。

英文:

The data-formatter option actually only works on columns as far as I know, but it can indeed be used to achieve what you're wanting.

I modified your example to add a formatter called checkFormatter and the corresponding function. You could modify this function as needed for your check/uncheck logic for every row. Formatters are really quite powerful!

A quick overview of the changes:

First, add the formatter to the column.

&lt;th data-field=&quot;id&quot; data-checkbox=&quot;true&quot; data-formatter=&quot;checkFormatter&quot;&gt;&lt;/th&gt;

Then, create a function with the same name as the formatter.

  function checkFormatter(value, row, index) {
    if (index === 1) {
      return {
        checked: false
      }
    }
    //return value
  }

I passed more parameters than needed, just to show what is possible. Also, you could return some other value in the commented out line if the row doesn't meet the condition for unchecking.

Not knowing the full table generation code, index is just set to 1 (the second row) but it's entirely possible to also check something like if(row.id == 2) (another example with this change) which would use the value of the id column in your table.

This official example shows how to use a formatter to check/uncheck a checkbox in this way.

huangapple
  • 本文由 发表于 2023年6月8日 16:28:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76429967.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定