easyui datagrid的行编辑器editor 如何实现新增时可修改,编辑时,不可修改
项目出现一个需求,要求用户界面的用户名,新增时,可自由输入,编辑时,不可修改
html页面
<table id="gridlist" data-bind="datagrid:grid" >
<thead>
<tr>
<th field="ck" checkbox="true" readOnly:true ></th>
<th field="OptimisticLockField" hidden="true"></th>
<th field="UserCode" sortable="true" align="left" width="80" editor="{type:'validatebox',options:{required: true }}" >用户名 </th>
<th field="UserName" sortable="true" align="left" width="200" editor="{type:'validatebox',options:{required: true }}" >名称 </th>
<th field="OriginalPassword" sortable="true" align="left" width="200" >密码 </th>
<th field="Org" sortable="true" align="left" width="200" editor="{type:'lookup',options:{required:true,lookupType:'cloud.PcsOrg',window:{title:'所属机构'},queryParams:{State:9,Ou:false}}}" formatter="formatOrg" >所属机构 </th>
<th field="IsEnable" sortable="true" align="center" width="120" editor="{type:'checkbox',options:{on:1,off:0}}" formatter="com.formatCheckbox" >是否可用</th>
<th field="IsAdmin" align="center" width="120" editor="{type:'checkbox',options:{on:1,off:0}}" formatter="com.formatCheckbox">是否管理员</th>
<th field="LoginCount" sortable="true" align="right" width="120" >登录次数</th>
<th field="LastLoginDate" sortable="true" align="left" width="135" formatter="com.formatDate">最后登录日期</th>
<th field="LastLoginOU" align="left" width="170" hidden="true" >最后登录组织</th>
<th field="OrganizeNames" align="left" width="170">最后登录组织</th>
<th field="Permit" align="center" width="320" formatter="formatterButton"> 操作 </th>
<th field="Description" align="left" width="150" editor="text">描述</th> </tr>
</thead>
</table>
原先编辑方法
//原先编辑方法
this.editClick = function () {
if (self.RowsCount() > 1) return;
var row = self.grid.datagrid('getSelected');
if (row == null) {
com.message('error', "请选中需编辑的一行数据");
return;
}
var index = self.grid.datagrid('getRowIndex', row);
self.gridEdit.begin(index, row);
self.viewType = v_edit;
self.IsViewType(v_edit);
};
新的编辑方法
//新的编辑方法
this.editClick = function () {
if (self.RowsCount() > 1) return;
var row = self.grid.datagrid('getSelected');
if (row == null) {
com.message('error', "请选中需编辑的一行数据");
return;
}
//在编辑后把用户名改为查看状态
if (row._isnew == undefined) {
//编辑的时候把用户名改为查看状态
$('#gridlist').datagrid('removeEditor', 'UserCode');
}
var index = self.grid.datagrid('getRowIndex', row);
self.gridEdit.begin(index, row);
self.viewType = v_edit;
self.IsViewType(v_edit);
};
页面效果
1)新增时

2)编辑时

总结:使用 datagrid的removeEditor方法,指定对应列名,如语法: $('#gridlist').datagrid('removeEditor', 'UserCode');
easyui datagrid的行编辑器editor 如何实现新增时可修改,编辑时,不可修改的更多相关文章
- Easyui的datagrid的行编辑器Editor中添加事件(修改某个单元格带出其他单元格的值)
项目中有个datagrid需要编辑行时,用到Editor的属性,那么如何添加一个事件 问题:同一个编辑行中的某个单元格值改变时,修改其他单元格的值 页面用到的datagrid <table id ...
- Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法
Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- EASYUI DATAGRID 改变行值
在easyui datagrid 中如果要 改变当前选中行的值又不想用编辑状态,或者想从外部改变某一行的值,下面的方法可以做到 function test() { var ro ...
- jQuery easyuI datagrid 多行编辑
在easyUI 动态绑定部分数据后,需要有部分列可以修改,研究了一天终于搞定.这是小弟的做法,望各位有好招的大侠指点. 1.添加jQuery 和jQuery easyuI的引用. 2.添加id为tt的 ...
- EasyUI datagrid : 启用行号、固定列及多级表头后,头部行号位置单元格错位的问题
症状如图: 上图中,行号列与checkbox 列融合了.解决方法是在datagrid 的 onLoadSuccess 事件中加入如下代码: var opts = $(this).datagrid('o ...
- easyUI datagrid 多行多列数据渲染异常缓慢原因以及解决方法
原因 最近,在优化之前公司帮联想(外包)做的一个老的后台管理系统,由于项目是基于easy UI框架,页面是后台用jsp实现的,再加上在公司推行前后端分离的实践,大部分项目都基于vue采用前后端分离去实 ...
- EasyUI datagrid 双击行事件
1.EasyUI 实现点击行的任何位置,触发事件 onLoadSuccess:function(data){ } , pagination : false, //双击事件 onDblClickRow: ...
随机推荐
- 干货分享 | 3个开发IoT项目的开源物联网平台
物联网(IoT)是帮助人工智能(AI)以更好的方式控制和理解事物的未来技术. 艾艺收集了一些最有名的物联网平台,帮助您以受控方式开发物联网项目.物联网平台是帮助设置和管理互联网连接设备的组件套件. 一 ...
- can解析
- CR TubeGet 0.9.2.7,YouTube&全网视频终极下载
数十次迭代,终于功能完善,在youtube-dl原生支持基础之上,自写解析器脚本,实现对其它主流网站视频下载支持. 加入对视频播放列表.缩略图.字幕下载支持,甚至于自定义列表设计.加密视频下载. 支持 ...
- 黄金矿工(LeetCode Medium难度)1129题 题解(DFS)
题目描述: 给定一个二维网络,给定任意起点与终点.每一步可以往4个方向走.要找出黄金最多的一条线路. 很明显的是要“一条路走到黑,一直下去直到某个条件停止”. 运用dfs(深度优先搜索)求解. 因为起 ...
- Sitemap Error : XML declaration allowed only at the start of the document解决方法
今天ytkah的客户反馈说他的xml网站地图有问题,提示Sitemap Error : XML declaration allowed only at the start of the documen ...
- ES6 的class类 笔记
class Person{ // 构造 constructor(x,y){ this.x = x; this.y = y; } toString(){ return (this.x + "的 ...
- 数据库join解释 与视图
数据库的视图是表运算的结果. 数据库的表是数据单元: join是运算符: 视图是运算结果. 数据库join解释 1.join:将两个表结构连接成一个视图 2.left.right.inner: 从基准 ...
- PHP获取一年有多少周和每周开始和结束日期
/*PHP获取当前日期是第几周和本周开始日期和本周结束日期*/ //$now = '2018-11-13';周二 public function getNowTimeInfo($now) { $str ...
- (21) 树莓派使用python调用命令行 python中调用linux命令及os.system的返回值
cmd = "sudo shutdown -h now"; os.system(cmd)
- vue的认识===下载
VUE:不建议直接操作DOM Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微 胜出,并且它的热度还在递增 Vu ...