easyUI行内编辑与jdbc批量更新

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

?
1
2
3
4
5
6
7
8
9
10
11
12
{
    field : 'SQE_NAME',
    title : '主担',
    width : 100,
    align : 'center',
    editor : {
        type : 'textbox',
    options : {
        readonly : false
    }
    },
}   

 点击该单元格可编辑：

?
1
dataGridObj.onClickCell = editorUtils.onClickCell;

 定义的编辑保存js:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 编辑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批量更新

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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);
    }
 
}

 页面编辑、保存按钮：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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代码：

 

posted @   AlphaJunS  阅读(296)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae