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: ...
随机推荐
- 使用ProcDump自动生成Dump文件
ProcDump工具来自Sysinternals Suite 最近用来自动产生Dump文件 一是用来监视服务器程序无响应 procdump -accepteula -64 -ma -h server. ...
- js刷新页面得重新加载和页面的刷新
1.reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当 ...
- Django简介,请求生命周期,静态文件配置
Web框架 Web框架(Web framework)是一种开发框架,用来支持动态网站.网络应用和网络服务的开发.这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方 ...
- Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port
Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看默认配置 [root@node101.yinzh ...
- Kubernetes 监控
1. Weave Scope Weave Scope 容器地图 创建 Kubernetes 集群并部署容器化应用只是第一步.一旦集群运行起来,我们需要确保一起正常,所有必要组件就位并各司其职,有足够的 ...
- 解决Mac OS X 系统在home文件夹下面操作不支持的方法
解决Mac OS X 系统在home文件夹下面操作不支持的方法 最近需要使用Mac OS X 系统尝试安装使用appium程序,安装过程中发现,Mac OS X 系统在home文件夹下面操作不支持 ...
- php7中的dirname,intdiv,define
<?php //dirname可指定目录级数 //intdiv整数整除 //define可以定义数组 echo dirname('/var/www/html/app/etc/config'); ...
- 【转载】jmeter-命令行执行脚本
原文地址:https://blog.csdn.net/qq_35451939/article/details/79643560 日常测试过程中发现,在大数量并发时,jmeterGUI界面时长宕机.卡死 ...
- Cause: com.mysql.cj.jdbc.exceptions.MysqlDataTruncation: Data truncation: Incorrect date value
Cause: com.mysql.cj.jdbc.exceptions.MysqlDataTruncation: Data truncation: Incorrect date value: '154 ...
- 安全组与网络ACL
通过配置网络ACL和安全组策略,保障VPC内的弹性云服务器安全使用. 安全组对弹性云服务器进行防护:设置不同安全组访问规则实现系统访问控制 网络ACL对子网进行防护:可实现网络区域访问控制