如何在 jsGrid 中正确显示布尔值为复选框（checkbox）-js教程-PHP中文网

本文详解在 jsGrid 中将布尔字段渲染为可读、可交互复选框的两种专业方案：原生 type: "checkbox" 的正确用法，以及自定义 itemTemplate 的灵活实现，并指出常见误区与最佳实践。

本文详解在 jsgrid 中将布尔字段渲染为可读、可交互复选框的两种专业方案：原生 `type: "checkbox"` 的正确用法，以及自定义 `itemtemplate` 的灵活实现，并指出常见误区与最佳实践。

jsGrid 原生支持 type: "checkbox" 字段类型，但其行为常被误解——它并非自动绑定数据布尔值并渲染 UI 复选框，而是提供一个仅用于编辑的“开关式”输入控件，且默认不渲染可视化状态（如勾选/未勾选）。若直接配置 type: "checkbox" 却未配合 itemTemplate 或 filterTemplate，单元格将为空白或显示 0（因内部误判上下文），这正是提问者遇到 "item === true" 不生效的根本原因。

✅ 正确做法是：显式定义 itemTemplate 以控制单元格内容渲染，同时保留 type: "checkbox" 以启用编辑功能。以下是推荐的完整配置示例：

fields: [
  { 
    name: "SerialNo", 
    type: "text", 
    title: "@Html.DisplayNameFor(m => entity.SerialNo)" 
  },
  { 
    name: "Model", 
    type: "text", 
    title: "@Html.DisplayNameFor(m => entity.Model)" 
  },
  // ✅ 正确配置布尔字段：使用 itemTemplate 渲染带状态的 checkbox
  { 
    name: "Cva", 
    type: "checkbox",
    width: 50,
    title: "@Html.DisplayNameFor(m => entity.Cva)",
    itemTemplate: function(value, item) {
      return `<input type="checkbox" : disabled>`;
    }
  },
  { 
    name: "ServiceLetters", 
    type: "checkbox",
    width: 50,
    title: "@Html.DisplayNameFor(m => entity.ServiceLetters)",
    itemTemplate: function(value, item) {
      // 添加自定义样式类（如绿色边框）
      const cls = value ? "vl-green checked" : "vl-green";
      return `<input type="checkbox" : class="${cls}" disabled>`;
    }
  }
]

⚠️ 关键说明：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

itemTemplate 函数接收两个参数：value（当前行该字段的原始布尔值）和 item（整行数据对象），应始终基于 value 判断状态，而非 item[fieldName]；
添加 disabled 属性可防止用户误点（仅展示）；若需支持编辑，请移除 disabled 并确保 editing: true（默认开启）且后端能正确处理布尔更新；
css 配置项作用于整个元素，不适用于动态样式切换；如需根据值设置样式，请在 itemTemplate 内联写入 class 或 style；
避免使用 type: "text" + 手动插入 HTML 的“hack 方式”（如问题答案所述），它破坏了 jsGrid 的数据绑定机制，导致排序、筛选、编辑等功能失效，且难以维护。

? 进阶提示：若需支持编辑，可增强 itemTemplate 并搭配 editTemplate 和 valueChanged 事件：

{ 
  name: "Cva",
  type: "checkbox",
  editing: true,
  itemTemplate: function(value) {
    return `<input type="checkbox" : disabled>`;
  },
  editTemplate: function(value) {
    const $input = $("<input>").attr({ type: "checkbox" });
    if (value) $input.prop("checked", true);
    return $input;
  },
  editValue: function() {
    return this.filter("input").is(":checked");
  }
}

总结：jsGrid 的 checkbox 类型需配合 itemTemplate 才能正确可视化布尔值；依赖 css 回调或 type: "text" 临时注入 HTML 均属反模式。坚持声明式模板 + 原生类型组合，才能兼顾可读性、可编辑性与框架兼容性。