EasyUI datagrid editor表格编辑

本文主要介绍了如何在EasyUI的datagrid中实现编辑功能,通过示例代码详细展示了具体的实现过程,旨在为读者提供实用的帮助。

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

话不多说,上代码。

$("#forecastGrid").datagrid({
	        url : contextPath + '/elc/elcForecast/queryPage.arz',
	        iconCls:'icon-edit', 
	        pagination : true,
	        pageSize : 5,
	        pageList: [5, 10],
	        rownumbers : false,
	        striped : false,
	        singleSelect : true,
	        idField : 'id',
	        nowrap : true,
	        pagePosition : 'top',
	        totalProperty : "total",
	        rowsProperty : "elcForecasts",
	        columns : [[{
				   field : 'parentUid',
				   hidden:true
	      		},{
				   field : 'period',
				   hidden:true
		      	},{
				   field : 'customerid',
				   hidden:true
		      	},{
				   field : 'constraintFlag',
				   align : 'center',
				   width : 120,
				   title : 'Constraint Flag',  
				   editor:{  
					   type:'combobox',  
		               options:{  
		            	   data: [{value:'Y',text:'Y'},
		                       	{value:'N',text:'N'}
		            	   ],
                           valueField: "value",
                           textField: "text",
                           editable: false,
		            	   required : 'required',
		            	   onSelect: function () {
		            		   endCurEdit(editIndex, 'constraintFlag');
		                   }
		               }
		        	}
		      	},{
				   field : 'sku',
				   align : 'center',
				   width : 120,
				   title : 'SKU编码'
		      	},{
				   field : 'skuNameC',
				   align : 'center',
				   width : 120,
				   title : 'SKU名称'
			    },{
		       	    field : 'totalForecast',
		            align : 'center',
		            width : 120,
		            title : '总库存',  
		        	editor:{  
		                type:'numberbox',  
		                options:{  
		                	required : 'required',
		                	precision:0
		                }
		        	}
		       	}]],
	        onBeforeLoad : function(param) {
	        	if (!$('#queryForm').form('validate')) {
	                return false;
	            }
	            $.extend(param, $('#queryForm').serializeJson());
	            return true;
	        },
	        onDblClickCell: onDblClickCell,
	        onLoadSuccess : function(data){
	        	$('#searchBtn').linkbutton('enable');
	        }/*
				 * , toolbar: [{ text: "修改", iconCls: 'icon-edit', handler:
				 * function(){
				 *  } }]
				 */
		});

//重写editCell事件
	$.extend($.fn.datagrid.methods, {
        editCell: function (jq, param) {
            return jq.each(function () {
                var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
                for (var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor1 = col.editor;
                    if (fields[i] != param.field) {
                        col.editor = null;
                    }
                }
                $(this).datagrid('beginEdit', param.index);
                for (var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor = col.editor1;
                }
            });
        }
    });
	/**
	 * 结束编辑
	 */
    function endLastEditing(index) {
        if (index == undefined) { return true }
        $('#forecastGrid').datagrid('endEdit', index);
    }
    /**
     * 校验上次编辑是否完成
     * @param field
     * @returns
     */
    function checkLastEdit() {
        if (isEmpty(editIndex)) { 
        	return true;
        }else{
        	endCurEdit(editIndex, 'constraintFlag');
        	return false;
        }
    }
    
    // 编辑行
    var editIndex = undefined;
    /**
	 * 双击事件:启用编辑
	 */
    function onDblClickCell(index, field) {
    	if (checkLastEdit(field) &&
    			(field=='totalForecast'
    			|| field == 'constraintFlag'
    			|| field == 'forecast')) {
    		beginEditCell(index, field);
            $('.datagrid-editable .textbox-text').focus();
        }
    }
    function beginEditCell(index, field){
    	 $('#forecastGrid').datagrid('selectRow', index)
         .datagrid('editCell', { index: index, field: field });
//    	 bindKeyPress(index, field);
    	 if(field != 'constraintFlag'){
    		 bindBlur(index, field);
    	 }else{
    		 editIndex = index;
    	 }
    }
    /**
	 * 绑定Enter键按下事件
	 */
    function bindKeyPress(index, field){
    	$('.datagrid-editable .numberbox,.datagrid-editable .datagrid-editable-input,.datagrid-editable .textbox-text').bind('keypress', function (e) {
        	var code = e.keyCode || e.which;
        	if (code == 13) {// code=13代表回车
            	endCurEdit(index, field);
            }
        });
    }
    /**
	 * 绑定失去焦点事件
	 */
    function bindBlur(index, field){
    	$('.datagrid-editable .textbox-text').bind('blur', function (e) {
        	endCurEdit(index, field);
        });
    }
    /**
     * 解绑失去焦点事件
     * @returns
     */
    function unbindBlur(){
    	$('.datagrid-editable .textbox-text').unbind('blur');
    }
    /**
	 * 结束编辑
	 */
    function endCurEdit(index, field){
    	if(!$('#forecastGrid').datagrid('validateRow', index)){
    		return;
    	}
    	if(field=='totalForecast'
    		|| field=='forecast'){
    		endForecastEdit(index, field);
    	}else if(field == 'constraintFlag'){
    		endConstraintFlagEdit(index, field);
    	}
    	
    	/*$(cinfirmUpdate).window({
        	onBeforeClose: function () {
        		endLastEditing(index);
    			setFieldValue(field, forecast, index);
    			mergeCell(rows);
        	}
        });*/
    }
    /**
     * 结束编辑constraintFlag
     * @param index
     * @param field
     * @returns
     */
    function endConstraintFlagEdit(index, field){
    	var rows = $('#forecastGrid').datagrid('getRows');
    	var constraintFlag = rows[index].constraintFlag;
    	var cinfirmUpdate = $.messager.confirm($.i18n.get('prompt'), '确定修改Constraint Flag?', function(result){
    		defaultEdit(index, rows);
    		if(result){
    			updateForecast(index, field);
    		}else{
    			setFieldValue(field, constraintFlag, index);
    		}
    	});
    }
    /**
     * 结束编辑额度
     * @param index
     * @param field
     * @returns
     */
    function endForecastEdit(index, field){
    	var rows = $('#forecastGrid').datagrid('getRows');
    	var forecast;
    	if(field == 'totalForecast'){
    		forecast = rows[index].totalForecast;
    	}else if(field == 'forecast'){
    		forecast = rows[index].forecast;
    	}
    	var cinfirmUpdate = $.messager.confirm($.i18n.get('prompt'), '确定修改库存?', function(result){
    		defaultEdit(index, rows);
    		if(result){
    			updateForecast(index, field);
    		}else{
    			setFieldValue(field, forecast, index);//将编辑前的值重新设置到单元格
    		}
    	});
    }
    function defaultEdit(index, rows){
    	unbindBlur();//解绑失去焦点事件,否则会再次触发失去焦点事件
		endLastEditing(index);//结束编辑,合并的单元格会还原
		editIndex = undefined;//初始化editIndex
		mergeCell(rows);//重新合并单元格
    }
    /**
	 * 设置Field Value
	 */
    function setFieldValue(fieldName, value, index, grid){
    	if (grid == undefined || grid == '') {
            grid = $('#forecastGrid');
        }
    	var row = grid.datagrid('getRows')[index];
        if (row != null) {
            var editor = grid.datagrid('getEditor', { index: index, field: fieldName });
            if (editor != null) {
                this.setValueToEditor(editor, value);
            }
            else {
                var view = $('.datagrid-view');
                for (var i = 0; i < view.length; i++) {
                    if ($(view[i]).children(grid.selector).length  > 0) {
                        var view = $(view[i]).children('.datagrid-view2');
                        var td = $(view).find('.datagrid-body td[field="' + fieldName + '"]')[index]
                        var div = $(td).find('div')[0];
                        $(div).text(value);
                    }
                }


                row[fieldName] = value;
            }
            grid.datagrid('clearSelections');
    	}
    }
    /**
	 * 更新
	 */
    function updateForecast(index, field){
    	$.messager.progress({
            title : '提示',
            text : '数据正在修改中,请稍后....'
        });
    	loadData('','/elc/elcForecast/updateForecast.arz',{},function(json){
    		$.messager.progress('close');
    		$.messager.alert('提示',json.msg,function(){});
    		onSearch();
    	});
    }

希望此文能够帮助到您!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值