easyUI行内编辑与jdbc批量更新

easyUI加载的datagrid，editor表示可编辑

{
    field : 'SQE_NAME',
    title : '主担',
    width : 100,
    align : 'center',
    editor : {
        type : 'textbox',
	options : {
	    readonly : false
	}
    },
}    

 点击该单元格可编辑：

dataGridObj.onClickCell = editorUtils.onClickCell;

 定义的编辑保存js:

// 编辑datagrid的帮助类
var editorUtils = {editIndex:undefined};
editorUtils.onClickCell = function(index, field) {
	var rows = $('#engine_ebom_datagrid').datagrid('getRows');
	var data = rows[index];
	if (editorUtils.editIndex != index){
		$('#engine_ebom_datagrid').datagrid('selectRow', index).datagrid('beginEdit', index);
		editorUtils.editIndex = index;
	}
}

/**
 * 启用编辑
 */
function onStartEdit(){
	// 获取选中行数据
	var rows = $('#engine_ebom_datagrid').datagrid('getSelections');
	// 未选择数据
	if (rows.length == 0) {
		$.messager.alert("提示", "请选择一行数据");
		return;
	}
	for(var i=0;i<rows.length;i++){
		var rowIndex = $('#engine_ebom_datagrid').datagrid('getRowIndex',rows[i]);
		$('#engine_ebom_datagrid').datagrid('selectRow', rowIndex).datagrid('beginEdit', rowIndex);
	}
};

/**
 * 保存
 */
editorUtils.accept = function(){
	var dtd = $.Deferred();
	var rows = $('#engine_ebom_datagrid').datagrid('getRows');
	for(var i=0;i<rows.length;i++){
		var rowIndex = $('#engine_ebom_datagrid').datagrid('getRowIndex',rows[i]);
		$('#engine_ebom_datagrid').datagrid('selectRow', rowIndex).datagrid('endEdit', rowIndex);
	}
	
	var data = $('#engine_ebom_datagrid').datagrid('getRows');
    $.ajax({
		type : "POST",
		url : TpmPage.contextPath + '/engineEbom/batchUpdateEngineEbom',
		dataType: 'json',
		contentType:'application/json',
		data : JSON.stringify(data),
		success : function(response) {
			dtd.resolve();
			console.log(response);
		},
		error : function(response) {
			dtd.reject();
			console.error(response);
		}  
	}); 
    refreshCurrent();
    return dtd.promise();
}

 数据传递到后台时，需批量更新到数据库，采用jdbc批量更新

package com.dflzm.tpme.szjh.service.impl;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;

import com.dflzm.tpme.szjh.service.IEngineEbomService;

/**  
 * Description
 * @author fanj  
 * @version 1.0   
 * 2020年2月17日 下午6:09:28 
 */
@Service
public class EngineEbomServiceImpl implements IEngineEbomService {

	@Autowired
	private JdbcTemplate businessTpmeJdbcTemplate;
	
	@Override
	public void batchUpdateEngineEbom(List<Map<String, Object>> params) {
		// 用于封装参数
		List<Object[]> batchArgs = new ArrayList<Object[]>();
		for (int i = 0; i < params.size(); i++) {
			Map<String, Object> map = params.get(i);
			String sqeAccount = String.valueOf(map.get("SQE_ACCOUNT"));
			String sqeName = String.valueOf(map.get("SQE_NAME"));
			String partDesignerAccount = String.valueOf(map.get("PART_DESIGNER_ACCOUNT"));
			String partDesignerName = String.valueOf(map.get("PART_DESIGNER_NAME"));
			String enginePrjCode = String.valueOf(map.get("ENGINE_PRJ_CODE"));
			String supplierNo = String.valueOf(map.get("SUPPLIER_NO"));
			String supplierName = String.valueOf(map.get("SUPPLIER_NAME"));
			String engineEbomId = String.valueOf(map.get("ENGINE_EBOM_ID"));
			Object[] batchArg = new Object[] {sqeAccount, sqeName, partDesignerAccount, partDesignerName, enginePrjCode, supplierNo, 
					supplierName, engineEbomId};
			batchArgs.add(batchArg);
		}
		String sql = "update TT_ENGINE_EBOM set SQE_ACCOUNT = ?," + "SQE_NAME = ?," + "PART_DESIGNER_ACCOUNT = ?," + "PART_DESIGNER_NAME = ?," 
				+ "ENGINE_PRJ_CODE = ?," + "SUPPLIER_NO = ?," + "SUPPLIER_NAME = ?" + " where ENGINE_EBOM_ID = ?";
		businessTpmeJdbcTemplate.batchUpdate(sql, batchArgs);
	}

}

 页面编辑、保存按钮：

<div class="easyui-layout" data-options="fit:true,border:false">
		<div data-options="region:'center',border:false">
			<table id="engine_ebom_datagrid"></table>
		</div>
	</div>
	<!-- 按钮 datagrid-btn-separator-->
	<div id="engine_ebom_tb">
	    <table cellspacing="0" cellpadding="0">
	        <tr>
	           	<td style="font-size:12px;color:rgb(14,45,95);font-weight:bold;padding:0 3px;">发动机EBOM</td>
	           	<td><div class="datagrid-btn-separator"></div></td>
	           	<td><a onclick="addToStartManager()" class="easyui-linkbutton" data-options="iconCls:'fa fa-play',plain:true">添加到PPAP启动管理</a></td>
	           	<td><div class="datagrid-btn-separator"></div></td>
	           	<td><a onclick="onStartEdit()" class="easyui-linkbutton" data-options="iconCls:'fa fa-pencil-square-o',plain:true">编辑</a></td>
				<td>
					<div class="datagrid-btn-separator"></div>
				</td>
	           	<td><a class="easyui-linkbutton" data-options="iconCls:'fa fa-floppy-o',plain:true" onclick="editorUtils.accept()">保存</a></td>
				<td>
					<div class="datagrid-btn-separator"></div>
				</td>
	        </tr>
	    </table>
	</div>

完整js代码：

$(function() {
	//initPPAPs();
	initEngineEBOMs();
});

/**
 * 初始化发动机EBOM列表
 */
function initEngineEBOMs(){
	var dataGridObj = getDatagridObj();
	dataGridObj.url = TpmPage.contextPath + '/ppap/invoke?methodName=queryEngineEBOMInitList&pagination=true';
	dataGridObj.idField = 'ENGINE_EBOM_ID';
	dataGridObj.pageSize = 20;
	dataGridObj.sortName = 'ENGINE_EBOM_ID';
	dataGridObj.sortOrder = 'asc';
	dataGridObj.toolbar="#engine_ebom_tb";
	dataGridObj.nowrap = true;
	dataGridObj.singleSelect = false;
	dataGridObj.checkOnSelect = true;
	dataGridObj.columns = [[
		{
			field : 'ck',
			checkbox : true
		},{
			field : 'ENGINE_EBOM_ID',
			title : 'ENGINE_EBOM_ID',
			width : 80,
			align:'center',
			hidden : true
			//checkbox : true
		},{
			field : 'ENGINE_TYPE',
			title : '机型',
			width : 100,
			//sortable : true,
			align:'center'
		},{
			field : 'FUNCTION_MODULE',
			title : '功能模块',
			width : 200,
			sortable : true,
			align:'center'
		},{
			field : 'GROUP',
			title : '组',
			width : 100,
			hidden : true,
			align:'center'
		},{
			field : 'PART_CODE',
			title : '零件号',
			width : 150,
			align : 'center'
		},{
			field : 'PART_NAME',
			title : '零件名称',
			width : 150,
			align : 'center'
		},{
			field : 'PART_NAME_EN',
			title : '零件名称（英文）',
			width : 100,
			hidden : true,
			align : 'center'
		},{
			field : 'VERSION',
			title :'版本',
			width : 100,
			hidden : true,
			align : 'center'
		},{
			field : 'PART_NUM',
			title : '零件数量',
			width : 80,
			hidden : true,
			align : 'center'
		},{
			field : 'SUBSTITUTE_LIST',
			title : '替代件列表',
			width : 80,
			hidden : true,
			align : 'center'
		},{
			field : 'PUBLISH_DATE',
			title : '发布日期',
			width : 150,
			hidden : true,
			align : 'center'
		},{
			field : 'PART_PHASE',
			title : '零件阶段',
			width : 100,
			hidden : true,
			align : 'center'
		},{
			field : 'PART_IMPORTANCE_LEVEL',
			title : '零件重要程度',
			width : 100,
			hidden : true,
			align : 'center'
		},{
			field : 'PART_RESPONSIBLE_PERSON',
			title : '零件负责人',
			width : 100,
			hidden : true,
			align : 'center'
		},{
			field : 'PART_USE_POSITION',
			title : '零件使用位置',
			width : 200,
			hidden : true,
			align : 'center'
		},{
			field : 'REFERENCE_TIGHTENING_TORQUE',
			title : '建议拧紧力矩',
			width : 100,
			hidden : true,
			align : 'center'
		},{
			field : 'REMARK',
			title : '备注',
			width : 100,
			align : 'center'
		},{
			field : 'SQE_ACCOUN',
			title : '主担账户',
			width : 100,
			hidden : true,
			align : 'center'
		},{
			field : 'SQE_NAME',
			title : '主担',
			width : 100,
			align : 'center',
			editor : {
				type : 'textbox',
				options : {
					readonly : false
				}
			},
		},{
			field : 'PART_DESIGNER_ACCOUNT',
			title : '设计师账户',
			width : 100,
			hidden : true,
			align : 'center'
		},{
			field : 'PART_DESIGNER_NAME',
			title : '设计师',
			width : 100,
			align : 'center',
			editor : {
				type : 'textbox',
				options : {
					readonly : false
				}
			},
		},{
			field : 'ENGINE_PRJ_CODE',
			title : '项目代号',
			width : 100,
			align : 'center',
			editor : {
				type : 'textbox',
				options : {
					readonly : false
				}
			},
		},{
			field : 'SUPPLIER_NO',
			title : '供应商编号',
			width : 100,
			align : 'center',
			editor : {
				type : 'textbox',
				options : {
					readonly : false
				}
			},
		},{
			field : 'SUPPLIER_NAME',
			title : '供应商名称',
			width : 100,
			align : 'center'
		}
    ]];
	// 使easyUI中的editor可用
	dataGridObj.onClickCell = editorUtils.onClickCell;
	//查询列表
	dataGridObj.remoteFilter = true;
	$('#engine_ebom_datagrid').datagrid(dataGridObj);
	$('#engine_ebom_datagrid').datagrid('enableFilter');
}

// 编辑datagrid的帮助类
var editorUtils = {editIndex:undefined};
editorUtils.onClickCell = function(index, field) {
	var rows = $('#engine_ebom_datagrid').datagrid('getRows');
	var data = rows[index];
	if (editorUtils.editIndex != index){
		$('#engine_ebom_datagrid').datagrid('selectRow', index).datagrid('beginEdit', index);
		editorUtils.editIndex = index;
	}
}

/**
 * 启用编辑
 */
function onStartEdit(){
	// 获取选中行数据
	var rows = $('#engine_ebom_datagrid').datagrid('getSelections');
	// 未选择数据
	if (rows.length == 0) {
		$.messager.alert("提示", "请选择一行数据");
		return;
	}
	for(var i=0;i<rows.length;i++){
		var rowIndex = $('#engine_ebom_datagrid').datagrid('getRowIndex',rows[i]);
		$('#engine_ebom_datagrid').datagrid('selectRow', rowIndex).datagrid('beginEdit', rowIndex);
	}
};

/**
 * 保存
 */
editorUtils.accept = function(){
	var dtd = $.Deferred();
	var rows = $('#engine_ebom_datagrid').datagrid('getRows');
	for(var i=0;i<rows.length;i++){
		var rowIndex = $('#engine_ebom_datagrid').datagrid('getRowIndex',rows[i]);
		$('#engine_ebom_datagrid').datagrid('selectRow', rowIndex).datagrid('endEdit', rowIndex);
	}
	
	var data = $('#engine_ebom_datagrid').datagrid('getRows');
    $.ajax({
		type : "POST",
		url : TpmPage.contextPath + '/engineEbom/batchUpdateEngineEbom',
		dataType: 'json',
		contentType:'application/json',
		data : JSON.stringify(data),
		success : function(response) {
			dtd.resolve();
			console.log(response);
		},
		error : function(response) {
			dtd.reject();
			console.error(response);
		}  
	}); 
    refreshCurrent();
    return dtd.promise();
}

/**
 * 刷新当前页面
 */
function refreshCurrent() {
	$('#engine_ebom_datagrid').datagrid('clearSelections');
	$('#engine_ebom_datagrid').datagrid('reload');
}

/**
 * 添加到PPAP启动管理列表
 * fanj
 * 2020-02-17
 */
function addToStartManager() {
	// 获取勾选的数据
	// 添加到PPAP启动管理列表前，对数据进行校验，主担，设计师，项目代号，供应商，零件图号，零件名称
	// 添加到PPAP启动管理列表
}