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: ...
随机推荐
- HttpUtils请求工具类
package com.cmcc.hybj.payment.framework.https; import java.io.UnsupportedEncodingException;import ja ...
- java InputStream的使用
package cn.kongxh.io3;import java.io.File ;import java.io.InputStream ;import java.io.FileInputStrea ...
- thinkPHP+LayUI 懒加载实现
html <div class="layui-container" id="container"> </div> js,要引入layui ...
- Golang: 接收GET和POST参数
GET 和 POST 是我们最常用的两种请求方式,今天结合前端 axios 请求库来讲一讲,如何在 golang 服务中,正确接收这两种请求的参数信息. 一.搭建一个简单的服务 首先,我们来创建一个最 ...
- Win10下免安装版MySQL8.0.16的安装和配置
1.MySQL8.0.16解压 其中dada文件夹和my.ini配置文件是解压后手动加入的,如下图所示 2.新建配置文件my.ini放在D:\Free\mysql-8.0.16-winx64目录下 [ ...
- 如何在macOS下调整磁盘分区大小?
可以在“macOS”下利用磁盘工具并且不抹掉主分区的情况下,随意更改磁盘分区大小的方法.“OS X”经过几次大版本升级以后,也改名为“macOS”,而且系统自带的“磁盘工具”无论是功能和界面也有很大的 ...
- httprunner学习23-加解密
前言 有些接口的请求参数是加密的,返回的接口内容也是需要解密才能看到. 加密接口 比如当我们访问下面这个登陆的接口时,请求参数账号和密码都是需要加密,通过parms参数传过去,服务器才能识别到 没加密 ...
- nginx编译安装以及配置tcp转发
依赖包安装 yum -y install gcc gcc-c++ make automake autoconf pcre pcre-devel zlib zlib-devel openssl open ...
- destoon系统开发-最新利用浏览器的cookie 做历史浏览记录
注意: 代码 放在要显示的为 (一般放在详情页),注意本教程不入库,直接利用浏览器的 cookie 缓存判断 <!--历史浏览记录 S--> <div class=&quo ...
- MySQL中Count函数的参数该传入什么样的值?
MySQL中Count函数的参数该传入什么样的值? 查询用户表中总记录 用户表中信息如下: 1.SELECT COUNT(*) FROM USER 结果为:3条 2. SELECT COUNT(us ...