如何在jsgrid中将布尔值显示为对应状态的复选框？

AI 小北

2026-7-12

解决jsgrid布尔值字段以复选框正确显示的问题

核心问题排查与解决步骤

先确认字段基础配置是否正确
确保你的checkbox字段配置里，name（或field）属性准确对应数据中的布尔字段名，比如数据里的字段是isEnabled，配置就要写：
```
{
    name: "isEnabled",
    type: "checkbox",
    title: "是否启用",
    sorting: false
}
```
jsgrid的checkbox类型默认会自动绑定字段的布尔值，true勾选、false不勾选，不需要额外写css函数就能生效——如果配置正确但没生效，大概率是数据类型不匹配。
css函数中正确访问item数据
如果你确实需要用css函数自定义样式，直接通过item[你的字段名]就能拿到当前行的字段值，比如：
```
{
    name: "isEnabled",
    type: "checkbox",
    title: "是否启用",
    css: function(item) {
        // 直接访问item.isEnabled获取布尔值
        return item.isEnabled ? "checked-checkbox" : "unchecked-checkbox";
    }
}
```
之前你拿到0，可能是误写了item.value、字段名写错，或者后端返回的是数字0/1而非布尔值。

处理数据类型不匹配的情况
如果后端返回的是数字0/1、字符串"true"/"false"，需要先把数据转换成布尔值再传给jsgrid：

$("#jsGrid").jsGrid({
    // 其他配置...
    loadData: function(filter) {
        return $.ajax({
            type: "GET",
            url: "/your-data-url",
            data: filter,
            dataType: "json"
        }).done(function(data) {
            // 遍历数据转换字段类型
            data.forEach(function(item) {
                // 假设后端返回的是0/1
                item.isEnabled = Boolean(item.isEnabled);
                // 如果是字符串"true"/"false"
                // item.isEnabled = item.isEnabled === "true";
            });
        });
    }
});