项目出现一个需求,要求用户界面的用户名,新增时,可自由输入,编辑时,不可修改

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 如何实现新增时可修改,编辑时,不可修改的更多相关文章

  1. Easyui的datagrid的行编辑器Editor中添加事件(修改某个单元格带出其他单元格的值)

    项目中有个datagrid需要编辑行时,用到Editor的属性,那么如何添加一个事件 问题:同一个编辑行中的某个单元格值改变时,修改其他单元格的值 页面用到的datagrid <table id ...

  2. Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法

    Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...

  3. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  4. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  5. EASYUI DATAGRID 改变行值

    在easyui datagrid 中如果要 改变当前选中行的值又不想用编辑状态,或者想从外部改变某一行的值,下面的方法可以做到 function test() {             var ro ...

  6. jQuery easyuI datagrid 多行编辑

    在easyUI 动态绑定部分数据后,需要有部分列可以修改,研究了一天终于搞定.这是小弟的做法,望各位有好招的大侠指点. 1.添加jQuery 和jQuery easyuI的引用. 2.添加id为tt的 ...

  7. EasyUI datagrid : 启用行号、固定列及多级表头后,头部行号位置单元格错位的问题

    症状如图: 上图中,行号列与checkbox 列融合了.解决方法是在datagrid 的 onLoadSuccess 事件中加入如下代码: var opts = $(this).datagrid('o ...

  8. easyUI datagrid 多行多列数据渲染异常缓慢原因以及解决方法

    原因 最近,在优化之前公司帮联想(外包)做的一个老的后台管理系统,由于项目是基于easy UI框架,页面是后台用jsp实现的,再加上在公司推行前后端分离的实践,大部分项目都基于vue采用前后端分离去实 ...

  9. EasyUI datagrid 双击行事件

    1.EasyUI 实现点击行的任何位置,触发事件 onLoadSuccess:function(data){ } , pagination : false, //双击事件 onDblClickRow: ...

随机推荐

  1. 干货分享 | 3个开发IoT项目的开源物联网平台

    物联网(IoT)是帮助人工智能(AI)以更好的方式控制和理解事物的未来技术. 艾艺收集了一些最有名的物联网平台,帮助您以受控方式开发物联网项目.物联网平台是帮助设置和管理互联网连接设备的组件套件. 一 ...

  2. can解析

  3. CR TubeGet 0.9.2.7,YouTube&全网视频终极下载

    数十次迭代,终于功能完善,在youtube-dl原生支持基础之上,自写解析器脚本,实现对其它主流网站视频下载支持. 加入对视频播放列表.缩略图.字幕下载支持,甚至于自定义列表设计.加密视频下载. 支持 ...

  4. 黄金矿工(LeetCode Medium难度)1129题 题解(DFS)

    题目描述: 给定一个二维网络,给定任意起点与终点.每一步可以往4个方向走.要找出黄金最多的一条线路. 很明显的是要“一条路走到黑,一直下去直到某个条件停止”. 运用dfs(深度优先搜索)求解. 因为起 ...

  5. 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 ...

  6. ES6 的class类 笔记

    class Person{ // 构造 constructor(x,y){ this.x = x; this.y = y; } toString(){ return (this.x + "的 ...

  7. 数据库join解释 与视图

    数据库的视图是表运算的结果. 数据库的表是数据单元: join是运算符: 视图是运算结果. 数据库join解释 1.join:将两个表结构连接成一个视图 2.left.right.inner: 从基准 ...

  8. PHP获取一年有多少周和每周开始和结束日期

    /*PHP获取当前日期是第几周和本周开始日期和本周结束日期*/ //$now = '2018-11-13';周二 public function getNowTimeInfo($now) { $str ...

  9. (21) 树莓派使用python调用命令行 python中调用linux命令及os.system的返回值

    cmd = "sudo shutdown -h now"; os.system(cmd)

  10. vue的认识===下载

    VUE:不建议直接操作DOM Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微 胜出,并且它的热度还在递增 Vu ...