easyUI는 데이터 그리드로드, 편집기 표현 편집
{ 필드 'SQE_NAME' 제목 : '주 곰' 폭 : 100, 정렬 : '센터', 에디터 : { 입력 : '텍스트 상자', 옵션 : { 읽기 전용 : 거짓 } }, }
편집에 셀을 클릭합니다 :
dataGridObj.onClickCell = editorUtils.onClickCell;
정의 편집 및 저장 JS :
// 도움의 데이터 그리드 클래스를 편집 VAR editorUtils = {editIndex : 정의되지 않은}; editorUtils.onClickCell = 기능 (인덱스 필드) { VAR 행 = $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'getRows.'); VAR 데이터 = 행 [인덱스]; 경우 (editorUtils.editIndex! = 인덱스) { . $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'selectRow', 인덱스) .datagrid ( 'beginEdit', 인덱스); editorUtils.editIndex = 인덱스; } } / ** * 편집 사용 * / onStartEdit 함수 () { // 선택된 행의 데이터를 얻을 수 VAR 행 = $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'getSelections.'); // 데이터가 선택되지 않았습니다 경우 (rows.length == 0) { $ .Messager.alert는 ( "메시지", "데이터의 라인을 선택하세요"); 반환; } 경우 (나는 <rows.length; VAR 난 0 = I ++) { . rowIndex에 VAR = $ ( '# engine_ebom_datagrid') 데이터 격자 ( 'getRowIndex'행 [I]); . $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'selectRow', rowIndex에) .datagrid ( 'beginEdit', rowIndex에); } }; / ** * 저장 * / editorUtils.accept = 함수 () { VAR DTD = $ .Deferred (); VAR 행 = $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'getRows.'); 경우 (나는 <rows.length; VAR 난 0 = I ++) { . rowIndex에 VAR = $ ( '# engine_ebom_datagrid') 데이터 격자 ( 'getRowIndex'행 [I]); . $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'selectRow', rowIndex에가) ( '지며 EndEdit', rowIndex에)를 .datagrid; } VAR 데이터 = $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'getRows.'); {(아약스 $ 입력 : "POST", URL : TpmPage.contextPath + '/ engineEbom / batchUpdateEngineEbom가' dataType와 'JSON' contentType의 '응용 프로그램 / JSON' 데이터 : JSON.stringify (데이터) 성공 : 함수 (대응) { () dtd.resolve; CONSOLE.LOG (대응); }, 오류 : 함수 (대응) { () dtd.reject; console.error (대응); } }); refreshCurrent (); () dtd.promise 리턴; }
배경에 데이터를 전달하는 경우, 데이터베이스에 배치 갱신 할 필요는 JDBC 일괄 업데이트를 사용
com.dflzm.tpme.szjh.service.impl 패키지; 수입 인 java.util.ArrayList; 수입은 java.util.List; 수입 java.util.Map; 수입 org.springframework.beans.factory.annotation.Autowired; 수입 org.springframework.jdbc.core.JdbcTemplate; 수입 org.springframework.stereotype.Service; 수입 com.dflzm.tpme.szjh.service.IEngineEbomService; / ** * 설명 * @author의 fanj * @version 1.0 * 2020 2월 17일 오후 6시 9분 28초 * / @서비스 공용 클래스 EngineEbomServiceImpl 구현 IEngineEbomService { @Autowired 개인 JdbcTemplate을 businessTpmeJdbcTemplate; @우세하다 공공 무효 batchUpdateEngineEbom (목록 <지도 <문자열, 객체 >> PARAMS) { 캡슐화 // 매개 변수 목록 <object []> = batchArgs 새로운 ArrayList를 <object [] "(); 경우 (나는 <params.size (); INT 나 0 = I ++) { 지도 <문자열, 개체>지도 = params.get (I); 문자열 sqeAccount = 한 String.valueOf (map.get ( "SQE_ACCOUNT")); 문자열 sqeName = 한 String.valueOf (map.get ( "SQE_NAME")); 문자열 partDesignerAccount = 한 String.valueOf (map.get ( "PART_DESIGNER_ACCOUNT")); 문자열 partDesignerName = 한 String.valueOf (map.get ( "PART_DESIGNER_NAME")); 문자열 enginePrjCode = 한 String.valueOf (map.get ( "ENGINE_PRJ_CODE")); 문자열 supplierNo = 한 String.valueOf (map.get ( "SUPPLIER_NO")); 문자열 supplierName = 한 String.valueOf (map.get ( "SUPPLIER_NAME")); 문자열 engineEbomId = 한 String.valueOf (map.get ( "ENGINE_EBOM_ID")); 개체 [] batchArg 새로운 객체 = [{sqeAccount, sqeName, partDesignerAccount, partDesignerName, enginePrjCode, supplierNo, supplierName, engineEbomId}; batchArgs.add (batchArg); } 문자열 SQL = "업데이트 TT_ENGINE_EBOM 세트 SQE_ACCOUNT =?"+ "SQE_NAME =?"+ "PART_DESIGNER_ACCOUNT =?"+ "PART_DESIGNER_NAME =?" + "ENGINE_PRJ_CODE =?"+ "SUPPLIER_NO =?"+ "SUPPLIER_NAME =?" + "어디 ENGINE_EBOM_ID =?"; businessTpmeJdbcTemplate.batchUpdate (SQL, batchArgs); } }
페이지 편집, 저장 버튼 :
<DIV 클래스 = "easyui 레이아웃"데이터 옵션 = "적합 : 사실, 국경 : 거짓"> <div의 데이터 옵션 = "영역 '중심'테두리 : FALSE"> <테이블 ID가 = "engine_ebom_datagrid"> </ 테이블> </ DIV> </ DIV> <! - 버튼 데이터 그리드 - BTN 분리기 -> <div ID = "engine_ebom_tb"> <표 cellspacing = "0"의 cellpadding = "0"> <TR> <TD 스타일 = "폰트 크기 : 12 픽셀, 색상 : RGB (14,45,95) 폰트 중량 : 볼드체, 패딩 : 3px의 0;"> 发动机 EBOM </ TD> <TD> <div 클래스 = "- 데이터 격자 BTN 분리기"> </ div> </ TD> <TD> <A onclick="addToStartManager()" class="easyui-linkbutton" data-options="iconCls:'fa fa-play',plain:true"> 添加 到 PPAP 启动 管理 </A> </ TD > <TD> <div 클래스 = "- 데이터 격자 BTN 분리기"> </ div> </ TD> <TD> <A onclick="onStartEdit()" class="easyui-linkbutton" data-options="iconCls:'fa fa-pencil-square-o',plain:true"> 编辑 </A> </ TD > <TD> <div 클래스 = "- 데이터 격자 BTN 분리기"> </ div> </ TD> <TD> <A class="easyui-linkbutton" data-options="iconCls:'fa fa-floppy-o',plain:true" onclick="editorUtils.accept()"> 保存 </A> </ TD > <TD> <div 클래스 = "- 데이터 격자 BTN 분리기"> </ div> </ TD> </ TR> </ 테이블> </ DIV>
전체 JS 코드 :
() {(기능 $ // initPPAPs (); initEngineEBOMs (); }); / ** * 엔진 EBOM 목록을 초기화 * / initEngineEBOMs 함수 () { dataGridObj = getDatagridObj는 ()이었다; dataGridObj.url = TpmPage.contextPath + '? / PPAP / 호출 methodName로 = queryEngineEBOMInitList 및 페이지 매김 사실 ='; dataGridObj.idField = 'ENGINE_EBOM_ID'; dataGridObj.pageSize = 20; dataGridObj.sortName = 'ENGINE_EBOM_ID'; dataGridObj.sortOrder = 'ASC'; dataGridObj.toolbar = "#의 engine_ebom_tb"; dataGridObj.nowrap 사실 =; dataGridObj.singleSelect = 거짓; dataGridObj.checkOnSelect 사실 =; dataGridObj.columns = [ { 필드 'CK', 체크 박스는 true }, { 필드 'ENGINE_EBOM_ID' 제목 : 'ENGINE_EBOM_ID' 폭 : 80 정렬 : '센터', 숨겨진 : 사실 // 체크 박스 : 사실 }, { 필드 'ENGINE_TYPE' 제목 : '모델' 폭 : 100, // 정렬 : 사실, 정렬 : '센터' }, { 필드 'FUNCTION_MODULE' 제목 : '기능 모듈' 폭 : 200, 정렬 : 사실, 정렬 : '센터' }, { 필드 : '그룹', title : '조' 폭 : 100, 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'PART_CODE' 제목 : '번호' 폭 : 150 정렬 : '센터' }, { 필드 'PART_NAME' 제목 : '부분 이름' 폭 : 150 정렬 : '센터' }, { 필드 'PART_NAME_EN' 제목 : "(영어로) '부분으로 된 이름, 폭 : 100, 숨겨진 : 사실, 정렬 : '센터' }, { 필드 : '버전', 제목 : '버전', 폭 : 100, 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'PART_NUM' 제목 : '부품의 수' 폭 : 80 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'SUBSTITUTE_LIST' 제목 : '대체 멤버 목록', 폭 : 80 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'PUBLISH_DATE' 제목 : '날짜' 폭 : 150 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'PART_PHASE' 제목 : '부품 무대' 폭 : 100, 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'PART_IMPORTANCE_LEVEL' 제목 : '중요한 부분' 폭 : 100, 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'PART_RESPONSIBLE_PERSON' 제목 : '부품 책임있는 사람' 폭 : 100, 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'PART_USE_POSITION' 제목 : '부분의 위치를 사용' 폭 : 200, 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'REFERENCE_TIGHTENING_TORQUE' 제목 : '조임 토크 추천', 폭 : 100, 숨겨진 : 사실, 정렬 : '센터' }, { 필드 '비고' 제목 : '주의' 폭 : 100, 정렬 : '센터' }, { 필드 'SQE_ACCOUN' 제목 : '마스터 계정 곰' 폭 : 100, 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'SQE_NAME' 제목 : '주 곰' 폭 : 100, 정렬 : '센터', 에디터 : { 입력 : '텍스트 상자', 옵션 : { 읽기 전용 : 거짓 } }, }, { 필드 'PART_DESIGNER_ACCOUNT' 제목 : '디자이너 계정' 폭 : 100, 숨겨진 : 사실, 정렬 : '센터' }, { 필드 'PART_DESIGNER_NAME' 제목 : '디자이너' 폭 : 100, 정렬 : '센터', 에디터 : { 입력 : '텍스트 상자', 옵션 : { 읽기 전용 : 거짓 } }, }, { 필드 'ENGINE_PRJ_CODE' 제목 : '프로젝트 코드' 폭 : 100, 정렬 : '센터', 에디터 : { 입력 : '텍스트 상자', 옵션 : { 읽기 전용 : 거짓 } }, }, { 필드 'SUPPLIER_NO' 제목 : '업체 번호' 폭 : 100, 정렬 : '센터', 에디터 : { 입력 : '텍스트 상자', 옵션 : { 읽기 전용 : 거짓 } }, }, { 필드 'SUPPLIER_NAME' 제목 : '업체 이름' 폭 : 100, 정렬 : '센터' } ]]는; // 에디터에서 easyUI 사용할 수 있도록 dataGridObj.onClickCell = editorUtils.onClickCell; // 쿼리 목록 dataGridObj.remoteFilter 사실 =; . $ ( '# engine_ebom_datagrid') 데이터 그리드 (dataGridObj); $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'enableFilter.'); } // 도움의 데이터 그리드 클래스를 편집 VAR editorUtils = {editIndex : 정의되지 않은}; editorUtils.onClickCell = 기능 (인덱스 필드) { VAR 행 = $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'getRows.'); VAR 데이터 = 행 [인덱스]; 경우 (editorUtils.editIndex! = 인덱스) { . $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'selectRow', 인덱스) .datagrid ( 'beginEdit', 인덱스); editorUtils.editIndex = 인덱스; } } / ** * 편집 사용 * / onStartEdit 함수 () { // 선택된 행의 데이터를 얻을 수 VAR 행 = $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'getSelections.'); // 데이터가 선택되지 않았습니다 경우 (rows.length == 0) { $ .Messager.alert는 ( "메시지", "데이터의 라인을 선택하세요"); 반환; } 경우 (나는 <rows.length; VAR 난 0 = I ++) { . rowIndex에 VAR = $ ( '# engine_ebom_datagrid') 데이터 격자 ( 'getRowIndex'행 [I]); . $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'selectRow', rowIndex에) .datagrid ( 'beginEdit', rowIndex에); } }; / ** * 저장 * / editorUtils.accept = 함수 () { VAR DTD = $ .Deferred (); VAR 행 = $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'getRows.'); 경우 (나는 <rows.length; VAR 난 0 = I ++) { . rowIndex에 VAR = $ ( '# engine_ebom_datagrid') 데이터 격자 ( 'getRowIndex'행 [I]); . $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'selectRow', rowIndex에가) ( '지며 EndEdit', rowIndex에)를 .datagrid; } VAR 데이터 = $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'getRows.'); {(아약스 $ 입력 : "POST", URL : TpmPage.contextPath + '/ engineEbom / batchUpdateEngineEbom가' dataType와 'JSON' contentType의 '응용 프로그램 / JSON' 데이터 : JSON.stringify (데이터) 성공 : 함수 (대응) { () dtd.resolve; CONSOLE.LOG (대응); }, 오류 : 함수 (대응) { () dtd.reject; console.error (대응); } }); refreshCurrent (); () dtd.promise 리턴; } / ** * 현재 페이지를 새로 고침 * / refreshCurrent 함수 () { $ ( '# engine_ebom_datagrid') 데이터 그리드 ( 'clearSelections.'); . $ ( '# engine_ebom_datagrid') 데이터 그리드 ( '재 장전'); } / ** * 부팅 관리자 PPAP 목록에 추가 * 콜체스터 * 2020년 2월 17일 * / addToStartManager 함수 () { // 검사 데이터 가져 오기 // 시작 목록 관리, 데이터 유효성 검사, 주요 걱정, 디자이너, 프로젝트 코드, 공급 업체, 부품 도면 번호, 부품 이름 앞에 PPAP에 추가 // 부팅 관리자 PPAP 목록에 추가 }