使用EasyUI的Datagrid的Editor进行行编辑,Enter回车结束编辑,并开启新的一行。
//新增数据
function add() {
if (Index == undefined) {
row = { move_date: '', start_time: '', end_time: '', start_place: '', arrival_place: '', move_vehicle: '' };
$('#dg').datagrid('appendRow', row);
Index = $('#dg').datagrid('getRows').length - 1;
$('#dg').datagrid('selectRow', Index).datagrid('beginEdit', Index);
}//新建行结束
//回车时结束编辑,并开启新一行放在datagrid的onBeginEdit事件里
onBeginEdit: function (Index, row) {
var stayPlace = $("#dg_StaySchedule").datagrid('getEditor', { index: Index, field: 'stay_place' });
var stayAmount = $("#dg_StaySchedule").datagrid('getEditor', { index: Index, field: 'stay_amount' });
$(stayPlace.target).textbox('options').onChange = function (newValue, lodValue) {
//开启等待
MaskUtil.mask();
$.ajax({//根据条件值获取数据
type: "POST",
url: "url?stay_place=" + newValue + "&emp_title=" + $('#emp_title').textbox('getValue'),
dataType: 'json',
success: function (msg) {
//关闭等待
MaskUtil.unmask();
stayData = 0;
stayData = JSON.parse(msg.stay);
$(stayAmount.target).textbox('setValue', stayData);//查询的数据给列赋值
}
})
}
//回车时结束编辑,并开启新一行
$('.datagrid-editable .textbox,.datagrid-editable .datagrid-editable-input,.datagrid-editable .textbox-text').bind('keypress', function (e) {
var code = e.keyCode || e.which;
f (code == 13) {
//保存更改 第一次编辑可能不会改变值
var b = $('#dg').datagrid('validateRow', Index);
if (b == false) {
$('#dg').datagrid('selectRow', Index).datagrid('beginEdit', Index);
return;
}
$('#dg').datagrid('acceptChanges');
$('#dg').datagrid('endEdit', Index);
if (stayData > 0 && row.stay_amount > stayData) {
$.messager.confirm('操作提示', "提交的住宿费已超标准费用,标准住宿费用是:" + stayData + "元,是否继续?", function (r) {
if (r) {
$('#dg').datagrid('unselectRow', Index);
Index= undefined;
add();//新增方法
}
else {
$('#dg').datagrid('beginEdit', Index);
}
})
} else {
Index= undefined;
add();//新增方法
}
}
});
}
使用EasyUI的Datagrid的Editor进行行编辑,Enter回车结束编辑,并开启新的一行。的更多相关文章
- Easyui的datagrid的editor(行编辑器)如何扩展datetimebox类型
在easyui的datagrid扩展方法中添加这样的时间日期(datetimebox)代码块 放在 $.extend($.fn.datagrid.defaults.editors,{datetim ...
- Easyui 设置datagrid 进入编辑状态,保存结束编辑
在datagrid中如何实现让一行进入编辑状态,修改数据后,保存信息呢? //点击列表变成文本框,进入可编辑状态 $(function () { var doc = $(document), tabl ...
- 学习日记6、easyui datagrid 新增一行,编辑行,结束编辑和删除行操作记录
1.新增一行并进入编辑状态 var index=$('#Numbers').datagrid('appendRow', { CardInformation: '开户行', CardNumber: '银 ...
- [转]jQuery EasyUI自定义DataGrid的Editor
原文地址:http://www.jeasyuicn.com/post-3.html 官网datagrid的api:http://jquery-easyui.wikidot.com/document:d ...
- easyui datagrid的editor编辑器如何为validatebox控件添加改变事件
项目中需要为行编辑器Editor的某个列的文本框添加改变事件 需求:新增行时,为用户名输入特殊字符进行验证,不允许保存用户数据 html页面 <table id="gridlist&q ...
- easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案
EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正 ...
- easyUI中datagrid的使用
easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...
- easyui,datagrid表格,行内可编辑
最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下: HTML代码 <table id="dg" class="easy ...
- EasyUI效果--DataGrid的编辑效果
DataGrid的编辑效果是我目前使用的easyUI的第三个效果,相对于前两个,这个算是比较复杂点了. 运行起来的效果,大概就是这样,任意点击某行,然后该行变为可以编辑的,失去焦点之后,该行恢复 ...
随机推荐
- Linux 下安装 tomcat
前提:已经安装配置好了 JDK 1.下载二进制文件 wget http://us.mirrors.quenda.co/apache/tomcat/tomcat-9/v9.0.19/bin/apache ...
- python的socke编程
python的sock编程分为TCP编程和UDP编程,两者不同在于,TCP需要首先建立连接才能发送接收数据,而UDP则可以直接发送接收不需要预先建立连接. tcp编程,我总结为4步 TCP的serve ...
- VB6 Collection实现百万文本去重
上一篇数组的去重说到,对于千次计算以上的去重基本上特别的吃力,这里就介绍一种方法,通过Collection集合对象来过滤重复. Option Explicit '//By: InkHin '// 参考 ...
- .net core 2.2 修改IdentityUser主键标识类型
.net core2.2,生成WebApi或者MVC项目后,Identity 1.增加ApplicationUser.cs文件,内容如下 public class ApplicationUser : ...
- spring boot 2 统一异常处理
spring mvc 针对controller层异常统一处理非常简单,使用 @RestControllerAdvice 或 @RestControllerAdvice 注解就可以轻@RestContr ...
- Java框架spring 学习笔记(十八):事务管理(xml配置文件管理)
在Java框架spring 学习笔记(十八):事务操作中,有一个问题: package cn.service; import cn.dao.OrderDao; public class OrderSe ...
- java中null是什么,以及使用中要注意的事项
1.null既不是对象也不是一种类型,它仅是一种特殊的值,你可以将其赋予任何引用类型,你也可以将null转化成任何类型,例如: Integer i=null; Float f=null; String ...
- Linux Apache虚拟主机配置方法
apache 虚拟主机配置 注意: 虚拟主机可以开很多个 虚拟主机配置之后,原来的默认/etc/httpd/httpd.conf中的默认网站就不会生效了 练习: 主机server0 ip:172.25 ...
- 在Ubuntu中使用JDB调试代码
在Ubuntu中使用JDB调试代码 了解JDB JDB是JDK安装的一部分,是基于文本和命令行的调试工具,JDB是可以免费获取且平台独立的,缺点是只有命令行格式. JDB基础命令 在方法中设置断点st ...
- QT Designer基础——登录界面设计基础版2
认识QT Designer提供的可选控件:以下八个大类 Layouts:布局相关 Spacers:留空 Buttons:可点击的按钮类 Item Views和 Item Widgets:高级控件,例如 ...