前端UI组件【免费下载链接】ceJspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.项目地址https://gitcode.com/gh_mirrors/ce/ce点击查看免费下载导读本文以官方示例文档《Readonly columns and cells》为骨架系统讲解 Jspreadsheetv2 时代以 jExcel / jQuery 插件形式发布中只读列readonly column与只读单元格readonly cell的完整实现路径既包括初始化阶段在columns配置里声明readOnly: true的列级方案也包括运行期通过updateSettings的cells回调对任意单元格动态加锁的单元格级方案。读完本文你将掌握两种只读粒度的配置写法、底层readonly类的生效机制以及如何用当前仓库源码解释“只读单元格为什么既不能编辑也不能被覆盖”。只读能力在 Jspreadsheet 中的三种粒度在 Jspreadsheet 中“只读”并非单一开关而是从列到单元格再到整表的三个层级粒度配置位置作用范围整表只读初始化参数editable: false禁用整张表的编辑能力列级只读columns[i].readOnly: true该列所有单元格不可编辑单元格级只读updateSettings的cells回调 readonlyCSS 类任意单个单元格动态加锁三者可组合使用。列级只读与单元格级只读在底层最终都归结为给对应td元素添加readonly类这是贯穿整个只读机制的统一信号。官方快速参考文档将editable描述为 “Allow table edition: bool”可在 docs/jspreadsheet/v2/docs/quick-reference.md 初始化参数表中查到。完整示例一张带只读列的汽车数据表原文档给出了一段可直接运行的完整 HTML 示例。它演示了两件事初始化时声明只读列以及运行期通过updateSettings动态标记特定单元格为只读。html script srchttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js/script script srchttps://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.js/script link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css typetext/css / div idmy/div script let data [ [Mazda, 2001, 2000, 2006-01-01], [Peugeot, 2010, 5000, 2005-01-01], [Honda Fit, 2009, 3000, 2004-01-01], [Honda CRV, 2010, 6000, 2003-01-01], ]; $(#my).jexcel({ data:data, colHeaders: [Description,Year,Price, Buy], colWidths: [ 200, 300, 100, 100 ], columns: [ { type: text, readOnly:true }, { type: text, }, { type: text, }, { type: checkbox }, ] }); //Set readonly a specific column $(#my).jexcel(updateSettings, { cells: function (cell, col, row) { // If the column is number 4 or 5 if (row 2 col 2) { $(cell).addClass(readonly); } } }); /script /html示例中的关键点数据表共 4 列表头分别为Description、Year、Price、Buy列宽依次为200 / 300 / 100 / 100像素第 1 列Description通过{ type: text, readOnly: true }在初始化时被整体锁定用户只能查看车型名称无法修改第 4 列Buy是checkbox类型用于勾选购买意向初始化完成后又调用$(#my).jexcel(updateSettings, ...)传入cells回调把坐标(row 2 col 2)的单元格即第 3 行、第 3 列交点的价格单元格追加标记为只读。官方在该示例基础上还提供了 jsFiddle 在线演示方便直接交互体验只读效果此处不展开外部链接完整代码以上方 HTML 为准。初始化阶段在 columns 配置中声明只读列columns数组是列配置的入口每项对应一列。当某列的配置对象中包含readOnly: true时该列在首次渲染阶段就会被锁定。当前仓库源码 src/utils/internal.js 中单元格创建逻辑在渲染每个td后做了如下判断// Readonly if (obj.options.columns obj.options.columns[i] obj.options.columns[i].readOnly true) { td.className readonly; }也就是说readOnly: true的列其所有单元格的td都会被直接赋上readonly类。后续无论是用户点击编辑还是程序写入都会因为这个类的存在而被拦截详见后文“底层行为”一节。checkbox / radio 列的特例对于勾选类列单纯加类还不够因为原生 checkbox 依然可被点击。源码在同一文件中做了额外处理src/utils/internal.js} else if (obj.options.columns obj.options.columns[i] (obj.options.columns[i].type checkbox || obj.options.columns[i].type radio)) { const element document.createElement(input); element.type obj.options.columns[i].type; element.checked value 1 || value true || value true ? true : false; ... if (obj.options.columns[i].readOnly true || obj.options.editable false) { element.setAttribute(disabled, disabled); } }可见checkbox/radio 列的只读是通过disabled属性从输入控件层面禁用的同时样式表还叠加了pointer-events: none与半透明效果见 src/jspreadsheet.css。这一行代码还顺带揭示当全局editable: false时勾选列同样会被禁用两个开关在此处汇合。运行阶段通过 updateSettings 动态标记只读单元格列级只读在初始化时确定但实际业务中常常需要“某几行某几列不可编辑”这种不规则需求。此时应使用updateSettings传入cells回调$(#my).jexcel(updateSettings, { cells: function (cell, col, row) { // 坐标从 0 开始计数 if (row 2 col 2) { $(cell).addClass(readonly); } } });回调参数依次为cell当前单元格 DOM、col列号从 0 起、row行号从 0 起回调在单元格创建/刷新时执行你只需对命中坐标的cell添加readonly类即可原文档注释 “If the column is number 4 or 5” 是示意性描述实际代码判断的是row 2 col 2即把第 3 行第 3 列的单元格设为只读通过$(cell).addClass(readonly)添加类与初始化时td.className readonly的效果完全一致二者都作用于同一 CSS 类。这种“配置期 运行期”的双通道设计让只读规则既可以静态预置也可以根据业务数据动态计算。编程式只读控制setReadOnly 与 isReadOnly在只读类之外当前仓库还暴露了面向编程调用的只读 API。从源码结构看src/utils/cells.js 中定义了setReadOnly与isReadOnly两个导出函数export const setReadOnly function (cell, state) { // 支持 A1 形式的坐标字符串或直接传入单元格 DOM 节点 if (typeof cell string) { const coords getCoordsFromCellName(cell); record obj.records[coords[1]][coords[0]]; } else { const x parseInt(cell.getAttribute(data-x)); const y parseInt(cell.getAttribute(data-y)); record obj.records[y][x]; } if (state) { record.element.classList.add(readonly); } else { record.element.classList.remove(readonly); } }; export const isReadOnly function (x, y) { // 同样兼容 A1 字符串坐标 return obj.records[y][x].element.classList.contains(readonly); };从中可以推断setReadOnly(cell, true | false)可在运行期对指定单元格加锁或解锁cell既可以是A1样式的坐标字符串也可以是带data-x/data-y属性的 DOM 节点isReadOnly(x, y)用于查询某坐标单元格当前是否处于只读状态判断依据就是classList.contains(readonly)底层存储上只读状态没有单独的数据字段而是完全以 DOM 类作为唯一事实来源source of truth这与updateSettings的cells回调方案保持了一致的设计。需要说明的是updateSettings/$(#my).jexcel()调用形态属于 v2jExcel 2.1.0的 jQuery 插件 API而setReadOnly/isReadOnly这些导出函数位于当前仓库Jspreadsheet CE的源码中两者版本不同但只读机制一脉相承——均为readonly类驱动。全局只读editable 参数如果整张表都只需要展示不提供任何编辑入口可以直接在初始化参数中设置editable: false。官方快速参考docs/jspreadsheet/v2/docs/quick-reference.md中给出的参数说明为 “Allow table edition: bool”。从当前仓库源码看editable: false与列级readOnly在多个代码路径上共享相同的拦截逻辑例如上面提到的 checkbox 禁用分支obj.options.columns[i].readOnly true || obj.options.editable false。二者的区别在于作用域editable是全局开关readOnly是列级开关单元格级则依赖readonly类。实际项目中可按“全局 → 列 → 单元格”的优先级层层叠加实现精细的权限控制。只读单元格的底层行为编辑、写入与选择为什么加了readonly类之后单元格就“锁死”了当前仓库源码给出了三层拦截证据1. 编辑入口被跳过。用户双击/单击单元格触发编辑器时src/utils/editor.js 首先检查类// Readonly if (cell.classList.contains(readonly) true) { // Do nothing } else { // ... 创建输入框、下拉框等编辑器 }只读单元格直接跳过编辑器创建流程相当于从交互源头阻止了编辑。2. 程序写入被忽略除非 force。通过 API 更新单元格内容时src/utils/internal.js 的updateCell同样检查if (obj.records[y][x].element.classList.contains(readonly) true !force) { // Do nothing record { x, y, col: x, row: y }; } else { // ... 正常执行 onbeforechange / 值更新 }只读单元格在非强制模式下不会执行任何值更新直接返回空记录。这解释了为什么只读单元格的“锁”是数据层面的而非仅停留在 UI 视觉上。3. 选区扩展会跳过只读单元格。在 src/utils/selection.js 的选区逻辑中扩展选择时会对目标单元格做!classList.contains(readonly)过滤避免把只读单元格纳入可编辑选区。这三层拦截分别对应“用户编辑”“程序写入”“区域选择”三个入口构成完整的只读闭环。只读视觉样式与自定义只读并非“隐形”状态默认样式会给出明确的视觉反馈。当前仓库样式表 src/jspreadsheet.css 定义了.jss_worksheet tbody tr td.readonly { color: rgba(0, 0, 0, 0.3); }即只读单元格的文字以 30% 透明度呈现形成“灰色、不可操作”的直观视觉。同时对于只读的 checkbox/radio 输入控件样式层进一步声明src/jspreadsheet.css.jss_worksheet tbody tr td.readonly input[typecheckbox], .jss_worksheet tbody tr td.readonly input[typeradio] { pointer-events: none; opacity: 0.5; }禁用鼠标事件并降透明度配合前面提到的disabled属性让勾选控件在只读状态下完全不可交互。由于只读状态本质上就是一个 CSS 类你可以自由覆盖这些默认样式例如改用不同的背景色、加边框或图标来强化业务上的“不可编辑”语义而不需要改动任何 JS 逻辑。小结Jspreadsheet 的只读能力覆盖了从整表到单单元格的全部粒度列级只读初始化时在columns中声明readOnly: true渲染期由 src/utils/internal.js 统一给td加readonly类单元格级只读初始化后调用updateSettings传入cells回调对命中坐标的单元格动态添加readonly类整表只读editable: false全局关闭编辑编程式控制当前仓库通过setReadOnly/isReadOnly提供运行时加解锁与状态查询见 src/utils/cells.js三层拦截编辑器打开src/utils/editor.js、数据写入src/utils/internal.js、选区扩展src/utils/selection.js均会识别readonly类并放弃操作视觉反馈默认以 30% 透明度灰显文字勾选控件附加pointer-events: none与半透明处理src/jspreadsheet.css、src/jspreadsheet.css。掌握了列、单元格、整表三种粒度的配置方法及其底层拦截原理你就能在 Jspreadsheet 项目中按需构建任何复杂的只读权限方案。赞分享前端UI组件【免费下载链接】ceJspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.项目地址https://gitcode.com/gh_mirrors/ce/ce点击查看免费下载相关推荐Jspreadsheet 只读单元格与只读列完整指南数据保护与 readOnly 配置详解Jspreadsheet 只读单元格与只读列完整指南数据保护与 readOnly 配置详解 导读 本篇指南聚焦 Jspreadsheet当前仓库为 Jspr前端UI组件Handsontable 只读单元格Read-only cells完全指南readOnly、editor:false 与整表锁定Handsontable 只读单元格Read only cells完全指南readOnly、editor:false 与整表锁定 让指定的单元格、整列、整前端UI组件rsuite Cascader 禁用与只读状态全解析disabled、disabledItemValues、readOnly 与 plaintext 实战指南rsuite Cascader 禁用与只读状态全解析disabled、disabledItemValues、readOnly 与 plaintext 实战指南前端UI组件上一篇如何理解 codebase-memory-mcp 代码知识图谱的 dump 校验CBM_DUMP_VERIFY_MIN_RATIO 的 degraded 降级机制完整指南下一篇如何使用Chromefy将任何计算机转变为Chrome OS设备创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Jspreadsheet（jExcel v2）只读列与只读单元格实战：readOnly 配置与动态控制全解析
前端UI组件【免费下载链接】ceJspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.项目地址https://gitcode.com/gh_mirrors/ce/ce点击查看免费下载导读本文以官方示例文档《Readonly columns and cells》为骨架系统讲解 Jspreadsheetv2 时代以 jExcel / jQuery 插件形式发布中只读列readonly column与只读单元格readonly cell的完整实现路径既包括初始化阶段在columns配置里声明readOnly: true的列级方案也包括运行期通过updateSettings的cells回调对任意单元格动态加锁的单元格级方案。读完本文你将掌握两种只读粒度的配置写法、底层readonly类的生效机制以及如何用当前仓库源码解释“只读单元格为什么既不能编辑也不能被覆盖”。只读能力在 Jspreadsheet 中的三种粒度在 Jspreadsheet 中“只读”并非单一开关而是从列到单元格再到整表的三个层级粒度配置位置作用范围整表只读初始化参数editable: false禁用整张表的编辑能力列级只读columns[i].readOnly: true该列所有单元格不可编辑单元格级只读updateSettings的cells回调 readonlyCSS 类任意单个单元格动态加锁三者可组合使用。列级只读与单元格级只读在底层最终都归结为给对应td元素添加readonly类这是贯穿整个只读机制的统一信号。官方快速参考文档将editable描述为 “Allow table edition: bool”可在 docs/jspreadsheet/v2/docs/quick-reference.md 初始化参数表中查到。完整示例一张带只读列的汽车数据表原文档给出了一段可直接运行的完整 HTML 示例。它演示了两件事初始化时声明只读列以及运行期通过updateSettings动态标记特定单元格为只读。html script srchttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js/script script srchttps://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.js/script link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css typetext/css / div idmy/div script let data [ [Mazda, 2001, 2000, 2006-01-01], [Peugeot, 2010, 5000, 2005-01-01], [Honda Fit, 2009, 3000, 2004-01-01], [Honda CRV, 2010, 6000, 2003-01-01], ]; $(#my).jexcel({ data:data, colHeaders: [Description,Year,Price, Buy], colWidths: [ 200, 300, 100, 100 ], columns: [ { type: text, readOnly:true }, { type: text, }, { type: text, }, { type: checkbox }, ] }); //Set readonly a specific column $(#my).jexcel(updateSettings, { cells: function (cell, col, row) { // If the column is number 4 or 5 if (row 2 col 2) { $(cell).addClass(readonly); } } }); /script /html示例中的关键点数据表共 4 列表头分别为Description、Year、Price、Buy列宽依次为200 / 300 / 100 / 100像素第 1 列Description通过{ type: text, readOnly: true }在初始化时被整体锁定用户只能查看车型名称无法修改第 4 列Buy是checkbox类型用于勾选购买意向初始化完成后又调用$(#my).jexcel(updateSettings, ...)传入cells回调把坐标(row 2 col 2)的单元格即第 3 行、第 3 列交点的价格单元格追加标记为只读。官方在该示例基础上还提供了 jsFiddle 在线演示方便直接交互体验只读效果此处不展开外部链接完整代码以上方 HTML 为准。初始化阶段在 columns 配置中声明只读列columns数组是列配置的入口每项对应一列。当某列的配置对象中包含readOnly: true时该列在首次渲染阶段就会被锁定。当前仓库源码 src/utils/internal.js 中单元格创建逻辑在渲染每个td后做了如下判断// Readonly if (obj.options.columns obj.options.columns[i] obj.options.columns[i].readOnly true) { td.className readonly; }也就是说readOnly: true的列其所有单元格的td都会被直接赋上readonly类。后续无论是用户点击编辑还是程序写入都会因为这个类的存在而被拦截详见后文“底层行为”一节。checkbox / radio 列的特例对于勾选类列单纯加类还不够因为原生 checkbox 依然可被点击。源码在同一文件中做了额外处理src/utils/internal.js} else if (obj.options.columns obj.options.columns[i] (obj.options.columns[i].type checkbox || obj.options.columns[i].type radio)) { const element document.createElement(input); element.type obj.options.columns[i].type; element.checked value 1 || value true || value true ? true : false; ... if (obj.options.columns[i].readOnly true || obj.options.editable false) { element.setAttribute(disabled, disabled); } }可见checkbox/radio 列的只读是通过disabled属性从输入控件层面禁用的同时样式表还叠加了pointer-events: none与半透明效果见 src/jspreadsheet.css。这一行代码还顺带揭示当全局editable: false时勾选列同样会被禁用两个开关在此处汇合。运行阶段通过 updateSettings 动态标记只读单元格列级只读在初始化时确定但实际业务中常常需要“某几行某几列不可编辑”这种不规则需求。此时应使用updateSettings传入cells回调$(#my).jexcel(updateSettings, { cells: function (cell, col, row) { // 坐标从 0 开始计数 if (row 2 col 2) { $(cell).addClass(readonly); } } });回调参数依次为cell当前单元格 DOM、col列号从 0 起、row行号从 0 起回调在单元格创建/刷新时执行你只需对命中坐标的cell添加readonly类即可原文档注释 “If the column is number 4 or 5” 是示意性描述实际代码判断的是row 2 col 2即把第 3 行第 3 列的单元格设为只读通过$(cell).addClass(readonly)添加类与初始化时td.className readonly的效果完全一致二者都作用于同一 CSS 类。这种“配置期 运行期”的双通道设计让只读规则既可以静态预置也可以根据业务数据动态计算。编程式只读控制setReadOnly 与 isReadOnly在只读类之外当前仓库还暴露了面向编程调用的只读 API。从源码结构看src/utils/cells.js 中定义了setReadOnly与isReadOnly两个导出函数export const setReadOnly function (cell, state) { // 支持 A1 形式的坐标字符串或直接传入单元格 DOM 节点 if (typeof cell string) { const coords getCoordsFromCellName(cell); record obj.records[coords[1]][coords[0]]; } else { const x parseInt(cell.getAttribute(data-x)); const y parseInt(cell.getAttribute(data-y)); record obj.records[y][x]; } if (state) { record.element.classList.add(readonly); } else { record.element.classList.remove(readonly); } }; export const isReadOnly function (x, y) { // 同样兼容 A1 字符串坐标 return obj.records[y][x].element.classList.contains(readonly); };从中可以推断setReadOnly(cell, true | false)可在运行期对指定单元格加锁或解锁cell既可以是A1样式的坐标字符串也可以是带data-x/data-y属性的 DOM 节点isReadOnly(x, y)用于查询某坐标单元格当前是否处于只读状态判断依据就是classList.contains(readonly)底层存储上只读状态没有单独的数据字段而是完全以 DOM 类作为唯一事实来源source of truth这与updateSettings的cells回调方案保持了一致的设计。需要说明的是updateSettings/$(#my).jexcel()调用形态属于 v2jExcel 2.1.0的 jQuery 插件 API而setReadOnly/isReadOnly这些导出函数位于当前仓库Jspreadsheet CE的源码中两者版本不同但只读机制一脉相承——均为readonly类驱动。全局只读editable 参数如果整张表都只需要展示不提供任何编辑入口可以直接在初始化参数中设置editable: false。官方快速参考docs/jspreadsheet/v2/docs/quick-reference.md中给出的参数说明为 “Allow table edition: bool”。从当前仓库源码看editable: false与列级readOnly在多个代码路径上共享相同的拦截逻辑例如上面提到的 checkbox 禁用分支obj.options.columns[i].readOnly true || obj.options.editable false。二者的区别在于作用域editable是全局开关readOnly是列级开关单元格级则依赖readonly类。实际项目中可按“全局 → 列 → 单元格”的优先级层层叠加实现精细的权限控制。只读单元格的底层行为编辑、写入与选择为什么加了readonly类之后单元格就“锁死”了当前仓库源码给出了三层拦截证据1. 编辑入口被跳过。用户双击/单击单元格触发编辑器时src/utils/editor.js 首先检查类// Readonly if (cell.classList.contains(readonly) true) { // Do nothing } else { // ... 创建输入框、下拉框等编辑器 }只读单元格直接跳过编辑器创建流程相当于从交互源头阻止了编辑。2. 程序写入被忽略除非 force。通过 API 更新单元格内容时src/utils/internal.js 的updateCell同样检查if (obj.records[y][x].element.classList.contains(readonly) true !force) { // Do nothing record { x, y, col: x, row: y }; } else { // ... 正常执行 onbeforechange / 值更新 }只读单元格在非强制模式下不会执行任何值更新直接返回空记录。这解释了为什么只读单元格的“锁”是数据层面的而非仅停留在 UI 视觉上。3. 选区扩展会跳过只读单元格。在 src/utils/selection.js 的选区逻辑中扩展选择时会对目标单元格做!classList.contains(readonly)过滤避免把只读单元格纳入可编辑选区。这三层拦截分别对应“用户编辑”“程序写入”“区域选择”三个入口构成完整的只读闭环。只读视觉样式与自定义只读并非“隐形”状态默认样式会给出明确的视觉反馈。当前仓库样式表 src/jspreadsheet.css 定义了.jss_worksheet tbody tr td.readonly { color: rgba(0, 0, 0, 0.3); }即只读单元格的文字以 30% 透明度呈现形成“灰色、不可操作”的直观视觉。同时对于只读的 checkbox/radio 输入控件样式层进一步声明src/jspreadsheet.css.jss_worksheet tbody tr td.readonly input[typecheckbox], .jss_worksheet tbody tr td.readonly input[typeradio] { pointer-events: none; opacity: 0.5; }禁用鼠标事件并降透明度配合前面提到的disabled属性让勾选控件在只读状态下完全不可交互。由于只读状态本质上就是一个 CSS 类你可以自由覆盖这些默认样式例如改用不同的背景色、加边框或图标来强化业务上的“不可编辑”语义而不需要改动任何 JS 逻辑。小结Jspreadsheet 的只读能力覆盖了从整表到单单元格的全部粒度列级只读初始化时在columns中声明readOnly: true渲染期由 src/utils/internal.js 统一给td加readonly类单元格级只读初始化后调用updateSettings传入cells回调对命中坐标的单元格动态添加readonly类整表只读editable: false全局关闭编辑编程式控制当前仓库通过setReadOnly/isReadOnly提供运行时加解锁与状态查询见 src/utils/cells.js三层拦截编辑器打开src/utils/editor.js、数据写入src/utils/internal.js、选区扩展src/utils/selection.js均会识别readonly类并放弃操作视觉反馈默认以 30% 透明度灰显文字勾选控件附加pointer-events: none与半透明处理src/jspreadsheet.css、src/jspreadsheet.css。掌握了列、单元格、整表三种粒度的配置方法及其底层拦截原理你就能在 Jspreadsheet 项目中按需构建任何复杂的只读权限方案。赞分享前端UI组件【免费下载链接】ceJspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.项目地址https://gitcode.com/gh_mirrors/ce/ce点击查看免费下载相关推荐Jspreadsheet 只读单元格与只读列完整指南数据保护与 readOnly 配置详解Jspreadsheet 只读单元格与只读列完整指南数据保护与 readOnly 配置详解 导读 本篇指南聚焦 Jspreadsheet当前仓库为 Jspr前端UI组件Handsontable 只读单元格Read-only cells完全指南readOnly、editor:false 与整表锁定Handsontable 只读单元格Read only cells完全指南readOnly、editor:false 与整表锁定 让指定的单元格、整列、整前端UI组件rsuite Cascader 禁用与只读状态全解析disabled、disabledItemValues、readOnly 与 plaintext 实战指南rsuite Cascader 禁用与只读状态全解析disabled、disabledItemValues、readOnly 与 plaintext 实战指南前端UI组件上一篇如何理解 codebase-memory-mcp 代码知识图谱的 dump 校验CBM_DUMP_VERIFY_MIN_RATIO 的 degraded 降级机制完整指南下一篇如何使用Chromefy将任何计算机转变为Chrome OS设备创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考