easy ui 行内编辑数据并保存

这段代码展示了如何使用 Easy UI 在表格中实现数据的行内编辑和保存功能。通过监听单元格的双击事件,触发编辑状态,并使用 datebox 对日期进行格式化处理。同时提供了新增、修改、保存和取消等操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script>

var editIndex = undefined;
var edit_flag = false;

	$(function(){
   	 	var data;
   	 	var t;
		    
		     data=[[
		     	{field:'st_id',title: '任务ID',align: 'center' ,width: '7%' },
			{field:'sm_name',title: '名称',align: 'center',width: '9%'},
			{field:'st_start_date',title: '开始日期*',align: 'center',width: '8.3%', editor:{type:'datebox',options:{required:true,formatter:myformatter,parser:myparser1}}},
			{field:'st_end_date',title: '结束日期*',align: 'center', width: '8.3%'  , editor:{type:'datebox',options:{required:true,formatter:myformatter,parser:myparser1}}},
			{field:'st_condition',title: '定时条件*',align: 'center',width: '8.3%',editor:'textbox'},
			{field:'st_url',title: '指定URL*',align: 'center',width: '9%',editor:'textbox'},
	                {field:'st_spath',title: '结果文件路径*',align: 'center',width: '10%',editor:'textbox'},
	                {field:'st_sfile',title: '结果文件名*',align: 'center',width: '8.3%',editor:'textbox'},
	                {field:'st_desc',title: '描述*',align: 'center',width: '11%',editor:'textbox'},
	                {field:'st_valid_str',title: '标记*',align: 'center',width: '7%' ,
	                	formatter:function(value,row){
							return row.st_valid_str;
						},
						editor:{
							type:'combobox',
							options:{
								valueField:'sm_valid',
								textField:'sm_valid',
								method:'get',
								url:'sm_valid.json',
								panelHeight:48,
								required:true
							}
						}
	                },
	                {field:'handle',title: '操作',align: 'center',width: '7%' ,
						
						formatter:function(value,row,index){
						  var st_id=row.st_id;
							
						  if (row.editing){
							var s = '<a id="a_s_'+st_id+'" href="#" style="color:red;" onclick="saverow(this)">保存</a> ';
							var c = '<a href="#" style="color:red;" onclick="cancelrow(this)">取消</a>';
								return s+c;
						  } else {
								var e = '<a href="#" onclick="editrow(this)">修改</a> ';
								var d = '<a href="#" onclick="remo('+st_id+')">删除</a>';
								return e+d;
							}
						}
			        }
			        
		    ]];
		    
	    $('#cfgTable').datagrid({
		    striped: true,
		    url:'<%=request.getContextPath()%>/***/***',
		    //queryParams : {text:encodeURI('1'),usetype:encodeURI('2'),rela:'3',citys:encodeURI('4')},
		    loadMsg:'数据加载中请稍后……',
		    pagination: true,  
		    rownumbers: true,     
		    checkOnSelect: false,
		    onDblClickCell:onDblClickCell,
		    onBeforeEdit:function(index,row){
					row.editing = true;
					updateActions(index);
				},
				onAfterEdit:function(index,row){
					row.editing = false;
					
					if(edit_flag == false){
						openEdit(row.st_id,
    						 row.st_start_date,
    						 row.st_end_date,
    						 row.st_condition,
    						 row.st_url,
    						 row.st_spath,
    						 row.st_sfile,
    						 row.st_desc,
    						 row.st_valid_str);
					}
					
					
					updateActions(index);
				},
				onCancelEdit:function(index,row){
					row.editing = false;
					updateActions(index);
				},
		    singleSelect: true,
		    pageSize:15,
		    pageList: [10,15,20],
		    columns:data,
		    toolbar: [{  
		    	text: '新增',   
	            iconCls: 'icon-add',   
	            handler: function() {   
	                openDialog();   
	            }   
	        }]
	       
		});
	    
	    var p = $('#cfgTable').datagrid('getPager');   
	    
	    $(p).pagination({   
	        //pageSize: 15,//每页显示的记录条数,默认为10   
	        pageList: [10,15,20],//可以设置每页记录条数的列表   
	        beforePageText: '第',//页数文本框前显示的汉字   
	        afterPageText: '页    共 {pages} 页',   
	        displayMsg: '当前显示 {from} - {to} 条记录     共 {total} 条记录'
	    });
	    
    });   
    
    	//更新行数据
  		function updateActions(index){
			$('#cfgTable').datagrid('updateRow',{
				index: index,
				row:{}
			});
		}
		//获取行索引
		function getRowIndex(target){
			var tr = $(target).closest('tr.datagrid-row');
			return parseInt(tr.attr('datagrid-row-index'));
		}
		//修改操作
		function editrow(target){
			var editrow = getRowIndex(target);
			edit_flag = false;
			
			if(editIndex != undefined){
				$('#cfgTable').datagrid('cancelEdit', editIndex);
				editIndex = undefined;
			}
			
			$('#cfgTable').datagrid('beginEdit', editrow);
			editIndex=editrow;
			
		}
		//保存操作
		function saverow(target){
			edit_flag = false;
			var editrow = getRowIndex(target);
			$('#cfgTable').datagrid('endEdit', editrow);
			editIndex = undefined;
			
		}
		//取消操作
		function cancelrow(target){
			$('#cfgTable').datagrid('cancelEdit', getRowIndex(target));
			editIndex = undefined;
		}
    
	
    function openDialog(){
   	。。。。
   }
    
 
    
    function openEdit(st_id,st_start_date, st_end_date, st_condition, st_url, st_spath, st_sfile, st_desc,st_valid){
   			。。。。。
		
    } 
    
   
    
    
    //日历时间格式函数
  	function myformatter(date){
		var y = date.getFullYear();
		var m = date.getMonth()+1;
		var d = date.getDate();
		return y+''+(m<10?('0'+m):m)+''+(d<10?('0'+d):d);
	}
	function myparser(s){
			
	}
	//将日历原先的值显示子日历表中
	function myparser1(s){
           
            if (s != null && s != ''){  
                return new Date(s.substring(0,4),s.substring(4,6)-1,s.substring(6));  
            } else {  
                return new Date();  
            }  
	}
		
		
	
		function endEditing(){
		
			if (editIndex == undefined){return true;};
			
			if ($('#cfgTable').datagrid('validateRow', editIndex)){
			
				$('#cfgTable').datagrid('cancelEdit', editIndex);
				
				editIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
		
	//index为点击第几行 , field为点击的字段
        function onDblClickCell(index, field){
    		//不是需要修改的字段 不执行
    		if(field !='st_start_date'&&field!='st_end_date'){
    			//取消行编辑状态
    			$('#cfgTable').datagrid('endEdit', editIndex);
    			editIndex = undefined;
    			return;
    		}
    	
			if (editIndex != index){
				if (endEditing()){
				
					//edit_flag为true不保存   false保存数据
					edit_flag = true;
					
				
					//选中一行,行索引从 0 开始。
					$('#cfgTable').datagrid('selectRow', index).datagrid('beginEdit', index);
					
					//获取指定的编辑器, options 参数包含两个特性:  index:行的索引; field:字段名。
					 var ed = $('#cfgTable').datagrid('getEditor', {index:index,field:field});
					if (ed){
						($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
					} 
					
					editIndex = index;
				} else {
					setTimeout(function(){
						$('#cfgTable').datagrid('selectRow', editIndex);
					},0);
				}
			}
		} 
		
    </script>
<body>
    <div class="main " >
     <table id="cfgTable" data-options="fit:true,toolbar:'#toolbar',panelHeight:'auto'"></table>
    </div>
</body>





                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值