easyui treegrid 编辑一行时设置某filename值为只读

最新推荐文章于 2021-08-04 10:37:37 发布
最新推荐文章于 2021-08-04 10:37:37 发布
阅读量1.5k 收藏
点赞数
分类专栏： js 文章标签： easyui js treegrid 不可编辑
本文介绍如何在 TreeGrid 中实现特定列的编辑功能，特别是如何设置 id 列为不可编辑而仅允许编辑 text 列。通过配置 thdata-options 和使用 JavaScript 方法，可以轻松实现这一需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

treegrid添加一列时，id，text都可编辑；编辑时，只编辑text，保持id为不可编辑状态。


idField:'id'


<th data-options="field:'id',width:100,align:'left',sortable:false,editor:{type:'textbox',options:{required:true}}">id</th>
<th data-options="field:'text',width:100,align:'center',sortable:false,editor:{type:'textbox',options:{required:true}}">text</th>


var row = $('#treegrid').treegrid('getSelected');

$('#treegrid').treegrid('beginEdit', row.id);  //此id为tree设置的idField，选中行的标识

var vareditor=$('#treegrid').treegrid('getEditor', { index:row.id, field:'fileName'} );

$(vareditor.target).textbox('disable');

[Easyui Treegrid ]单行选中编辑
ytangdigl的博客
05-15 3429
1、Easyui Treegrid 单行选中编辑，只能选中叶子节点。 单击另外一个叶子节点，另外一个叶子节点选中，并进行编辑状态，上个正在编辑的节点退出编辑状态，并且不选中。并且只能选中叶子节点。 2、如何设置TreeGrid默认选中根节点
easyui datagrid编辑行设置某个字段不可编辑
热门推荐
u010033827的博客
06-26 1万+
function exeBatchPickInfo(wmbpId){ $('#receiptInfo').datagrid({ fit: true, //全屏 title:'入库单', striped: true, //显示斑马线 pagination:false, singleSelect:true, fitColumns:true,//自动缩进 columns: [[
EasyUI，对treegrid进行编辑
weixin_33738982的博客
07-30 764
2019独角兽企业重金招聘Python工程师标准>>> ...
可编辑TreeGrid
11-01
可编辑TreeGrid
easyui实现编辑行时，控制列是否可编辑
ernesto的博客
05-06 818
<%@ page language=“java” contentType=“text/html; charset=utf-8” pageEncoding=“utf-8”%> <%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%> <%@taglib prefix=“pt6” uri="/WEB-I...
EASYUI TREEGRID
10-30
easyui treegrid 优化，包括 以新背景色标识鼠标所指行
Easyui Treegrid改变默认图标的方法
09-02
Easyui Treegrid是一款基于jQuery的UI库，用于创建具有树形结构的表格。它结合了表格和树的优点，使得数据展示既清晰又有层次感。在实际应用中，我们可能需要根据业务需求定制Treegrid的外观，包括改变其默认的图标...
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
10-22
上述代码中，`formatter`函数对TreeGrid的第一列进行自定义，每行都会渲染一个带有特定id的checkbox。用户可以点击checkbox进行选择，当选中某个或某些checkbox后，可以通过绑定事件来获取选中项的id，并拼接成一个...
解决 easyui treegrid 批量展开和关闭卡顿问题。
05-09
数据增加属性 state：closed， 即可默认收起，反之展开，需再展开时，将加载的data数据中的state属性变更，再重新执行 $('#tg').treegrid('loadData', data); 即可实现，亲测有效 无卡顿 注：无子项的请勿加state...
EASYUI TREEGRID异步加载数据实现方法
09-05
在示例代码中，`onAfterEdit`是一个事件处理器，会在编辑完某行后被触发，这里用来弹出一个警告框显示当前编辑的行的`name`。 5. **服务器端处理**：为了实现异步加载，服务器端需要根据TreeGrid的请求参数（如页码...
jQuery Easyui Treegrid实现显示checkbox功能
10-19
jQuery Easyui Treegrid 是一个强大的数据展示组件，它结合了树形结构和表格的优点，常用于管理层次结构的数据。在实际应用中，我们经常需要添加复选框（checkbox）功能，以便用户可以多选操作。本文将详细介绍如何...
浅谈EasyUI中编辑treegrid的方法
12-02
主从表，从表是一个treegrid，加载完数据后，点击节点进入编辑状态。 代码如下: columns : [ [ {             title : “ID”,             field : “id”,             hidden : true         }, {             field : “pid”,             hidden : true         },  {             title : “AAA”,             field : “aaa”,             width : 70,     
设置EasyUI的可编辑Treegrid单元格内容
李曼 'S BLOG
04-22 7023
在使用EasyUI的可编辑Treegrid功能时，需要在代码中设置Treegrid的内容； 由于Treegrid没有完全继承DataGrid的方法，比如Treegrid不可以使用行索引，以及Treegrid没有updateRow函数，而此时我们需要设置它的值时应该怎么做呢？ 现在我将我的解决方法给大家分享出来，如下： 1、请看下图需求：单击单元格设置第三列的值 2、代码如下： &lt...
easyui下datagrid列单独赋值
qq_40997700的博客
05-31 4043
方法： onClickRow:function(rowIndex, rowData){ var rows = $('#datagrid2').datagrid('getRows'); rows[rowIndex]['startStake'] = 你要赋的值; rows[rowIndex]['endStake'] = 你要赋的值; $('#datagrid2').datagrid('r...
Easyui--datagrid数据网格
userwang的博客
06-27 642
目录前言datagrid简介和用法案例演示 前言 本章讲解的是Easyui中对的datagrid数据网格，以及实现效果。 datagrid简介和用法 数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。 从已有的表格元素创建数据网格（datagrid），在 html 中定义列、行及数据。
easyui中动态使datebox、combobox为只读状态
l_degege的专栏
12-18 3428
$("#achievement_position_id").datebox('readonly',true); $('#fm .easyui-combobox').combobox({ readonly:'true' }); 注：https://bbs.youkuaiyun.com/topics/391844884 补：$('#id').attr("readonly", true); 附：easyui...
EasyUI Datagrid 前端动态改变指定单元格值
ReverseTravel
08-04 1258
方法一：直接根据单元格下标找到对应属性然后赋值 // 获取当前页的行 var rows = $("#gridid").datagrid("getRows"); // 获取Columns对象，显式声明的列 var columns = $("#gridid").datagrid("options").columns; // 根据行号和属性下标修改单元格值 rows[index][columns[0][fieldIndex].field] = "值"; // 刷新此行 $("#gridid").datagrid(
easyui树编辑单个td及添加以后进入编辑
朝立的博客
06-28 929
最近老大做了一个菜单管理，选来选去easyui树看起来，更加合适，就做了一个以前没怎么用过，感觉用起来各种不顺手，老大还让添加各种功能，总算做出来了。 效果功能： 父节点能添加，子节点不行 添加以后直接进入编辑页面 针对单个cell，可以进行编辑 编辑以后出来单机事件会触发保存，更新操作 在外面可以进行选择类型，显示等 效果如图： 主要用到的方法api上面有 http://www.cnb
easyui treegrid 编辑打开模态框
最新发布
10-10
EasyUI TreeGrid 是一款基于 jQuery 开发的树状表格组件，它允许用户在一个网格上展示数据，并支持分层结构的显示。当需要编辑特定行的数据时，TreeGrid 提供了一种方便的方式来打开一个模态窗口或面板来进行详细信息的修改。 在 EasyUI 中，编辑功能通常通过点击单元格触发，然后弹出一个编辑模态框，让用户对选定的行进行编辑。这涉及到以下几个步骤： 1. 首先，在 TreeGrid 的配置项中，你需要启用 `editable` 属性，并设置相应的编辑选项，例如 `onBeforeEdit`, `onAfterEdit` 等事件处理函数。 ```javascript $( "#tree" ).treegrid({ columns: [...], data: [...], editable: true, onBeforeEdit: function (rowIndex, cellIndex, oldValue, newValue) { // 这里可以做一些预处理操作，比如获取额外的数据 }, onAfterEdit: function (rowIndex, cellIndex, oldValue, newValue) { // 编辑完成后更新数据库或保存更改 } }); ``` 2. 当用户双击某一节点或单击编辑列图标时，会触发编辑模态框的显示，你可以在这里定制模态框的内容和样式。EasyUI 提供了内置的 Modal 组件作为基础，你可以在适当的时候创建并显示这个模态框。 ```javascript var modal = $("#modal").dialog({ ... }); treegrid.on("click", ".edithtml", function(e) { var rowIndex = $(this).closest("tr").index(); modal.form.load("{url}/edit", {id: treegrid.treegrid('getRowIndex', $(this).parent())}); modal.dialog("open"); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值