js获取点击对象并设值

最新推荐文章于 2024-02-19 15:43:50 发布
最新推荐文章于 2024-02-19 15:43:50 发布
阅读量713 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html+css+js 文章标签： js获取对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/maxu12345/article/details/47009803 
var e = window.event;
var elementDoc = e.srcElement || e.target;

上面这两句话获取到了html的点击对象。

设置值的话只要

elementDoc.value="XXXX";
这样就好了。但是就算引用了jquery，也不能.val("XXXX")；


js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
10-22
这是实现获取鼠标点击对象的基础。 2. 闭包的概念：闭包允许我们保存某个函数内的局部变量，即使该函数执行完毕后，这些变量也不会被销毁，它们可以被函数外部的另一个函数所访问。在这个案例中，闭包被用来保存...
JS实现从对象获取对象中单个键值的方法示例
10-16
在JavaScript编程中，从对象获取特定键值是常见的操作，特别是在处理数据和对象交互时。以下是如何使用JavaScript来实现这一功能的详细说明。 首先，我们要理解JavaScript中的对象。对象是键值对（key-value pairs...
JS获取点击标签对象
Baron技术博客
05-25 8199
JS获取点击标签对象： Document 123 function demo(obj,b) { alert(obj.id); alert(b) }
vue.js之获取当前点击对象(其实是套着vue的原生javascript吧，笑)
weixin_30342827的博客
08-31 312
转载请注明出处：http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴，直接$(dom)获取当前点击的dom元素，根据这个，几乎可以获取这个dom元素的所有属性。不过，当我们使用vue的时候呢？ 也许刚开始会有一点迷茫。唉？对啊，我用vue该怎么做到(屠龙宝刀)点击...
javascript获取鼠标点击元素对象
aoxi0033的博客
03-08 742
IE： var obj=document.elementFromPoint(event.clientX,event.clientY); 获取对象文本 var a=obj.innerText FF里面要在事件里面添加对象才可以读取坐标。 HTML： onclick="gj(event)" JS： function gj(event){ var b=objobj...
在js中如何获取到你点击的元素的html、对象、属性值、以及自定义的属性值
热门推荐
xyq286654901的博客
05-25 5万+
前言：记录自己在工作中遇到的小问题，积少成多！因为是新手，有什么写的不好的地方还希望大家能够指出来。有什么更好的解决方法也希望大家能提出来，一起交流分享！（小弟在这里先谢谢大家） 直接上代码： 1、jsp页面代码 首先定义两个按钮,添加一些常规属性type、id、value 其次再定义给每个按钮一个自定义的属性custom 与方法一配套的input 与方法二配套的i
vue.js click点击事件获取当前元素对象的操作
12-28
Vue.js可以传递$event对象 <body id=app> (>点击当前行文本 <li>li2 <li>li3 [removed] new Vue({ ... message: 'Hello Vue.js!... //获取点击对象 var el = event.currentTarget; al
Js与Jq获取浏览器和对象值的方法
10-22
首先，我们来了解如何使用JavaScript获取浏览器的高度和宽度。在纯JavaScript中，可以通过DOM的属性来获取相关值。例如，`document.documentElement.clientWidth` 用于获取浏览器窗口的可视区域宽度；`document....
js - 事件对象
weixin_57135131的博客
11-10 1435
js 事件对象。
JavaScript 事件对象
qq_52265298的博客
02-19 1440
事件对象（Event Object）是在触发事件时被创建的对象，它包含了与事件相关的信息和属性。在 Web 开发中，事件对象通常用于处理用户与页面交互的各种事件，比如鼠标点击、键盘按下、表单提交等。事件对象提供了访问事件的详细信息的途径，开发人员可以通过事件对象来获取触发事件的元素、事件类型、鼠标位置、键盘按键信息等。通过访问事件对象的属性和方法，开发人员可以编写响应特定事件的 JavaScript 代码，实现页面交互和动态效果。
js获取元素的方法
zybijiso666的博客
08-01 5083
getElementsByClassName()方法返回一个包含了所有指定类名的子元素的类数组对象，作为nodeList对象。documentElement是整个节点树的根节点，即html标签 HTML文档返回对象为HTML元素。getElementsByTagName()方法返回一个动态的包含所有指定标签名的元素的。(documentElement是一个会返回文档对象的根元素的只读属性)documentElement属性以一个元素对象返回一个文档的文档元素。如果HTML元素缺失，返回值为null。
js中onclick()获取当前点击对象的属性值
weixin_39218464的博客
05-20 1万+
HTML <a type='button' class="layui-badge margin-left-5 layui-bg-danger" target="view_window" onclick="audit_no(this)" value="{$value['id']}"> 审核订单 </a> js代码 //修改订单状态，生成审核记录 function audit_no(obj) { var a = $(obj).attr("valu
js 获得当前 点击 的元素对象
fghfghhgjgj的博客
11-05 2434
js 获得当前 点击 的元素对象： <body> /*传入参数this即可获取当前点击的对象*/ <span id="demo" onclick="capture(this)">点我</span> </body> <script> function capture(data) { console.log(data.id); alert(data.innerText
JS点击事件 获取当前对象
07-15 8491
function Ju(event){              alert(event.id)//这边就会弹出s               };
JavaScript如何获取当前点击对象节点
NightAndKnight的博客
03-28 2万+
获取当前点击对象          /*传入参数this即可获取当前点击的对象*/     点我     function capture(data) {         console.log(data.id);         alert(data.id);     }
javascript 获取鼠标所点击的对象
Code-lover's Learning Notes
08-08 5563
event.srcElement就是指向触发事件的元素，他是什么就有什么的属性 srcElement 是事件初始目标的html元素对象引用,因为事件通过元素容器层次冒泡,可以在任一层进行处理,所以由一个属性指向产生初始事件的元素是很有帮助的.有了元素的引用,就可以读/写改元素的属性,并调用他的任何方法. 例：显示鼠标所点击的对象名称(tagName) function b
js获取当前操作对象
weixin_42187676的博客
10-03 1822
Ext JS Grid 获取列对象 设置只读
最新发布
07-19
<think>我们正在讨论Ext JS中Grid的列对象操作。根据用户的问题，他想要获取Grid的列对象并设置为只读。 在Ext JS中，Grid的列配置通常包含在列模型（ColumnModel）中。我们可以通过Grid的列模型来获取列对象，然后修改列的配置属性以实现只读。 注意：在Ext JS中，列的只读通常是通过禁用该列的编辑器（如果使用了可编辑的Grid）或者通过设置列的readOnly配置项（如果该列支持）来实现的。但是，标准的Ext JS Grid列本身并没有一个直接的readOnly配置项。对于可编辑的Grid，我们通常是在列的编辑器（editor）上设置readOnly属性。而对于非编辑状态，我们可能需要通过其他方式（如CSS或事件拦截）来防止编辑。 然而，用户的问题中提到了“列对象”和“只读”，所以我们可以考虑两种情况： 1. 如果Grid是可编辑的（使用CellEditing或RowEditing插件），则可以通过设置编辑器的readOnly属性来使某一列只读。 2. 如果希望整个列都不可编辑，包括不显示编辑器，那么可能需要设置列的editor配置为null，或者通过其他方式禁止编辑。 但是，用户要求的是获取列对象并设置为只读。因此，我们需要先获取列对象，然后修改其配置。 然而，需要注意的是，在Ext JS中，列模型（ColumnModel）中的列配置在Grid初始化后通常是固定的，直接修改列配置可能不会立即生效，需要重新刷新视图或重新配置Grid。 但是，Ext JS提供了动态修改列配置的方法。我们可以通过列模型的方法来修改列的配置。 参考引用[1]中提到了Ext.NET（一个Ext JS的.NET封装）中的列类型，但用户的问题是关于Ext JS的，所以我们主要关注Ext JS本身。 另外，引用[2]和[3]提供了一些关于Grid单元格样式的设置和获取行数据的方法，但与我们当前的问题关系不大。 因此，我们尝试给出在Ext JS中实现的方法： 步骤1：获取Grid的列模型（ColumnModel）。在Ext JS 3.x中，我们可以通过grid.getColumnModel()方法获取。在Ext JS 4及更高版本中，列模型是作为Grid的headerCt（一个Container）的一部分，但我们可以通过grid.columns或grid.columnManager来获取列。 这里我们以Ext JS 3.x为例（因为引用中提到了3.x），但也会简要说明Ext JS 4+。 **Ext JS 3.x:** 假设我们有一个GridPanel实例`grid`，我们可以通过以下方式获取列模型： ```javascript var colModel = grid.getColumnModel(); ``` 步骤2：获取特定的列对象。列模型是一个列配置对象的集合。我们可以通过列的索引（index）或id（如果配置了id）来获取列配置对象。 ```javascript // 通过索引获取列配置对象 var columnIndex = 0; // 假设我们要操作第一列 var columnConfig = colModel.getColumnAt(columnIndex); ``` 步骤3：修改列的配置以实现只读。在可编辑的Grid中，我们通常关注的是列的编辑器（editor）配置。我们可以将编辑器设置为禁用（readOnly）或者直接移除编辑器（这样就不能编辑了）。 ```javascript // 如果列配置中有editor，我们可以将其设置为只读 if (columnConfig.editor) { // 如果editor是一个配置对象，我们需要先获取编辑器实例？但注意，在Ext JS 3.x中，编辑器在编辑时才会创建。 // 因此，我们可能需要修改配置，以便在下次创建编辑器时应用readOnly，或者我们可以在编辑器创建后设置。 // 但是，直接修改配置可能不会影响已经创建的编辑器，所以我们需要考虑在编辑前设置。 // 方法1：修改配置，这样新创建的编辑器就会是只读的 columnConfig.editor = Ext.apply(columnConfig.editor || {}, { readOnly: true }); // 但是，如果编辑器已经创建过，我们可能需要更新现有的编辑器实例？这通常比较困难，因为编辑器是按需创建的。 // 方法2：我们也可以禁用该列的编辑功能，通过将editor设置为null // columnConfig.editor = null; // 这样该列将不可编辑 } ``` 但是，上面的方法修改了列配置，但不会立即生效。我们需要通知Grid更新列模型。在Ext JS 3.x中，我们可以调用grid.reconfigure()方法（需要传入相同的Store和新的列模型）来重新配置Grid，但这会重新渲染整个Grid，可能不是用户想要的。 另一种方法是，如果我们使用CellEditing或RowEditing插件，我们可以在开始编辑事件（'beforeedit'）中阻止编辑： ```javascript grid.on('beforeedit', function(editor, e) { // 如果编辑的是我们想要只读的列，则返回false取消编辑 if (e.column == columnIndex) { // 或者通过其他方式判断 return false; } }); ``` **Ext JS 4及更高版本：** 在Ext JS 4+中，我们通常通过列配置的editor属性来设置编辑器，而且我们可以动态修改列的配置。但是，同样的问题，修改配置后需要更新视图。 在Ext JS 4+中，我们可以通过以下方式获取列： ```javascript var column = grid.down('gridcolumn[dataIndex="myDataIndex"]'); // 通过dataIndex查找 // 或者 var column = grid.headerCt.getGridColumns()[index]; // 通过索引 // 然后，我们可以修改列的editor配置 column.setEditor({ // 如果之前没有editor，则设置一个禁用的editor；如果已有，则修改其readOnly属性 xtype: 'textfield', readOnly: true }); // 或者完全移除editor column.editor = null; // 这样可能不够，因为编辑插件可能已经保存了编辑器实例 // 更好的方法可能是通过编辑插件来控制 var cellEditing = grid.findPlugin('cellediting'); if (cellEditing) { cellEditing.addListener('beforeedit', function(editor, context) { if (context.column === column) { return false; // 阻止编辑 } }); } ``` 考虑到用户的问题，我们可能更倾向于使用事件拦截的方式，因为它不需要重新渲染Grid，并且可以动态控制。 因此，我们可以总结如下： 在Ext JS中，要将Grid的某一列设置为只读，可以通过以下方式之一： 1. 在列配置中，设置editor为null（这样该列将不可编辑），然后可能需要重新配置Grid（使用reconfigure方法）以使更改生效（不推荐，因为会重新渲染）。 2. 通过编辑插件的beforeedit事件，在编辑开始前根据列索引或列对象判断，如果是目标列则取消编辑。 由于用户要求获取列对象并设置，我们可以结合事件拦截的方式，因为直接设置列对象的editor属性可能不会立即生效（尤其是在Ext JS 3.x中，编辑器实例是按需创建的）。 因此，我们给出一个使用事件拦截的示例： **Ext JS 3.x 示例：** ```javascript // 假设grid是GridPanel实例 var grid = ...; // 获取列模型 var colModel = grid.getColumnModel(); // 假设我们要设置第一列为只读 var columnIndex = 0; // 监听beforeedit事件 grid.on('beforeedit', function(editor, rowIndex, colIndex, value) { // 如果编辑的是我们想要只读的列 if (colIndex === columnIndex) { return false; // 取消编辑 } return true; }); ``` **Ext JS 4+ 示例：** ```javascript // 假设grid是GridPanel实例 var grid = ...; // 获取列对象，例如通过dataIndex var column = grid.down('gridcolumn[dataIndex="myDataIndex"]'); // 获取编辑插件 var cellEditing = grid.findPlugin('cellediting'); if (cellEditing) { cellEditing.on('beforeedit', function(editor, context) { // 如果编辑的是目标列 if (context.column === column) { return false; // 取消编辑 } }); } ``` 这样，我们就实现了将Grid的列设置为只读的效果。 注意：如果用户希望的是在非编辑状态下也禁止某种操作（比如通过点击按钮或其他方式修改数据），那么可能需要更全面的控制，比如在数据存储（Store）层面进行验证，或者禁止用户输入。 以上方法仅阻止了通过Grid内置编辑插件的编辑，如果用户通过其他方式修改数据（例如，通过其他表单），则不在控制范围内。 因此，我们根据用户的问题，提供了在Ext JS中获取Grid列对象并设置为只读的方法。</think>在 Ext JS 中获取 Grid 列对象并设置为只读，可以通过以下步骤实现： ### 解决方案 1. **获取列对象** 使用 `grid.getColumnManager().getColumns()` 获取所有列对象，或通过 `dataIndex` 查找特定列： ```javascript // 获取所有列对象 const columns = grid.getColumnManager().getColumns(); // 通过 dataIndex 查找特定列 (推荐) const targetColumn = grid.down(`gridcolumn[dataIndex="your_data_index"]`); ``` 2. **设置列只读** - **方案1：禁用编辑器**（适用于可编辑 Grid） 若列已配置编辑器，直接设置编辑器的 `readOnly` 属性： ```javascript // 设置编辑器只读 if (targetColumn.editor) { targetColumn.editor.setReadOnly(true); } ``` - **方案2：拦截编辑事件**（通用方法） 通过 Grid 的编辑插件监听 `beforeedit` 事件，阻止目标列编辑： ```javascript const cellEditing = grid.findPlugin('cellediting'); cellEditing.on('beforeedit', (editor, context) => { if (context.column === targetColumn) { return false; // 阻止编辑 } }); ``` - **方案3：动态移除编辑器** 直接清除列的编辑器配置： ```javascript targetColumn.editor = null; // 禁用编辑功能 grid.reconfigure(columns); // 重新配置列 ``` ### 完整示例代码 ```javascript // 获取 Grid 组件 const grid = Ext.ComponentQuery.query('yourgridxtype')[0]; // 通过 dataIndex 查找列 (例如 "price" 列) const priceColumn = grid.down('gridcolumn[dataIndex="price"]'); // 方法1：设置编辑器只读 if (priceColumn.editor) { priceColumn.editor.setReadOnly(true); } // 方法2：通过编辑插件拦截事件 (更可靠) const cellEditing = grid.findPlugin('cellediting'); cellEditing.addListener('beforeedit', (editor, context) => { if (context.column.dataIndex === 'price') { return false; // 阻止编辑 } return true; }); ``` ### 关键说明 1. **列对象获取** - `grid.getColumnManager()` 适用于 Ext JS 6+，低版本使用 `grid.headerCt.getGridColumns()`[^1]。 - 通过 `dataIndex` 查找是最精准的方式，避免依赖列索引。 2. **只读实现原理** - 核心是控制编辑行为：通过禁用编辑器或拦截编辑事件实现[^2]。 - 修改列配置后需调用 `reconfigure()` 刷新视图（仅方案3需要）。 3. **注意事项** - 若 Grid 使用 `RowEditing` 插件，将 `cellediting` 替换为 `rowediting`。 - 只读设置不会影响数据提交逻辑，需在数据验证层额外处理[^3]。 --- ### 相关问题 1. **如何动态恢复 Ext JS Grid 列的编辑功能？** > 反向操作：设置 `editor.setReadOnly(false)` 或移除 `beforeedit` 的事件监听。 2. **Ext JS 中如何批量设置多列为只读？** > 遍历列数组，对目标列统一应用上述只读逻辑。 3. **只读列在数据提交时如何避免被修改？** > 在 Model 验证或 `beforeupdate` 事件中检查字段是否允许修改[^3]。 4. **Ext JS 7 中是否有更简洁的只读列实现方式？** > 新版可通过 `column.setConfig({ editor: null })` 直接禁用编辑，无需 `reconfigure()`。 [^1]: Ext.NET 列类型文档说明。 [^2]: 单元格编辑事件拦截与样式控制方法。 [^3]: Grid 数据提交时的字段过滤与验证机制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值