많은 시스템 모듈에서 특정 데이터 교환 처리, 즉 데이터 가져 오기 또는 내보내기 작업을 수행해야 할 수도 있습니다. 이러한 배치 처리는 시스템 사용자에게 더 나은 운영 경험을 제공하고 데이터에 입력하는 사용자의 효율성을 향상시킬 수 있습니다. 부트 스트랩 프레임 워크를 기반 으로이 모듈은 사무실 문서 나 그림에 대해 업데이트되고 보입니다.
1. 데이터 가져 오기 작업
일반적으로 시스템 모듈에는 데이터 가져 오기 및 수출 작업이 있습니다. 따라서 인터페이스가 자동으로 생성되면 사용자의 표준 쿼리, 가져 오기, 내보내기 및 기타 작업 기능을 자동으로 생성하는 경향이 있습니다. 인터페이스 효과는 다음과 같습니다.
부트 스트랩 프레임 워크에서, 나는 그것을 레이어로 넣고 그것을 index.cshtml 파일에 배치하여 전체 인터페이스를보다 밀접하게 처리 할 수 있습니다. 샘플 코드는 다음과 같습니다.
일반적으로 필요한 모든 필드를 포함하여 다음 코드가 자동으로 생성됩니다. 우리는 일반적으로 비즈니스와 실제 요구에 맞는 필드를 조정합니다.
<!-가져 오기 데이터 운영 계층-> <div id = "import"tabindex = "-1"role = "대화 상자"aria-labelledby = "mymodallabel"aria-hidden = "true"> <div> <div> <div> <버튼 = "button"data-dismiss = "modal"aria-hidden = "true"> <h4> 파일 import <h4> <div style = "text-align : right; padding : 5px"> <a href = "~/content/template/user-template.xls"onclick = "javaScript : preview ();"> <img src = "~/content/images/ico_excel.png"/> span 스타일 = "font-size : 더 큰; 글꼴 중량 : 200; 색상 : 빨간색"> user-template.xls </span> </a> </div> <hr/> <form id = "ffimport"method = "post"> <div style = "padding : 5px"data-option = "iconcls : 'incon-key'> 이름 = "att id = "btnupload"onclick = "javaScript : $ ( '##file_upload'). ubloadify ( 'upload', '*')"> upload </a> <a href = "javaScript :" id = "btncancelUpload"onclick = "javaScript : $ ( '##file_upload'). uploadify ( 'cancel', '*')"> 취소 </a> <div id = "filequeue"> </div> <br/> <hr/> <div id = "div_files "> </div> </div> </div> </form> </div> </div. id = "gridimport"cellpadding = "0"CellPacing = "0"> <thead id = "gridimport_head"> <tr> <input type = "checkbox"onclick = "selectall (this)"> </th> <th> user encoding </th> <th> 사용자 이름/login name </th> <th> <th> <th> <th> <th> stit> 전화 </th> <th> 사무실 전화 </th> <th> 이메일 주소 </th> <th> 성별 </th> <th> qq 번호 </th> <th> 비고 </th> </tr> </thead> <tbody id = "gridimport_body"> </tbody> </table> </div> <div> <버튼 형 = "data-dismis" "data-dismis" type = "button"onclick = "saveimport ()"> 저장 </div> </div> </div> </div> </div> </div>
가져 오기 작업 인터페이스를 표시하려면 다음 스크립트와 같이이 레이어 만 표시하면됩니다.
// 가져 오기 인터페이스 함수 표시 showImport () {$ ( "#import"). modal ( "show"); }여기에서 파일 업로드 처리는 주로 업로드 컨트롤을 사용하여 처리됩니다. 물론, 처리를 위해 이전에 도입 한 파일 입력 업로드 컨트롤을 사용할 수도 있으며, 이는 이러한 가져 오기 작업을 잘 달성 할 수 있습니다.
일반적으로 업로드 제어의 초기화 코드는 다음과 같습니다.
$ (function () {// 인터페이스 $ ( '#file_upload')의 첨부 관리 관리를 추가합니다 ( '#file_upload'). uploadify ({ 'swf': '/content/jqueryTools/uploadify/uploadify.swf', // flash path'buttontext ','brows ', // 버튼 text'uploader':/fileUpload/uppload page'queueid ': // queue id'queuesizelimit ': 1, // 큐에서 업로드 할 수있는 최대 파일의 수는 999'Auto '입니다 : false, // 파일을 선택한 후 파일이 자동으로 업로드되는지 여부는 실제'multi ': // true intured're Relove 're Relevect' 완료 후 시퀀스, 기본적으로 'filesizelimit': '10MB', // 단일 파일 크기, 0은 무제한이며, KB, MB, GB 및 기타 단위 'FiletyPedesc': 'Excel Files', // 파일 설명 '*.xls', // uploaded filter 'intucte': uploaded filter 'em)에서 문자열 값을 허용 할 수 있습니다. // 모든 대기열이 완료된 후 // 비즈니스 처리 코드 // 데이터가 정상적으로로드되는 경우 엑셀 형식이 정상인지, 'onuploadStart': function (file) {initupfile (); // 파일을 업로드하기 전에, GUID를 재설정하고, "#file_upload". '데이터 가져 오기': $ ( "#att주요 논리는 다음과 같습니다.
// 비즈니스 처리 코드
일반적으로 여기서 서버에서 Excel 파일을 얻었 으므로이 파일의 형식을 처리해야합니다. 형식이 올바른 경우 사용자가 레코드를 선택하고 가져올 레코드를 결정할 수있는 데이터를 표시합니다.
Excel 데이터 형식 확인을 처리하는 코드는 다음과 같습니다.
// Excel 형식이 정상인지 사용자에게 프롬프트합니다. 데이터가 정상적으로로드되면 $ .ajax ({url : '/user/checkexcelcolumns? guid =' + guid, 'get', datatype : 'json', success : function (data) {if (data.success) {initgrid (); 테이블 데이터를 새로 고침했습니다. (파일이로드 되었음)} {remoaded was the data wased wased wased wased waded waded waded waded waded waded waded waded waded was was was haded was showted waded wadment waded wadment at showt. ShowToast (업로드 된 Excel 파일 확인이 실패합니다. 페이지의 오른쪽 상단에 Excel 템플릿 형식에 따라 데이터를 입력하십시오. ","error ");백그라운드에 CheckexcelColumns 메소드를 추가하여 Excel 파일의 필드 형식을 확인합니다. 형식 요구 사항을 충족하는 파일 만 인터페이스에 검색 및 표시됩니다.
인터페이스에 표시된 JS 코드는 Excel 파일의 내용을 추출하여 테이블 요소에 바인딩하는 것입니다.
// 조건 함수 initGrid () {var guid = $ ( "#attachguid"). val (); var url = "/user/getExcelData? guid =" + guid; $ .getJson (url, function (data) {$ ( "#gridimport_body"). html ( ""); $ .Each (data.rows, function (i, item) {var tr = "<tr>"; tr += "<td> <input class = 'checkbox'type =/"checkbox/"name =/"checkbox/"> td>"; handno + "<td>" + item.fullname + "</td>"; "<td>"</td> "<td>"<td> " + item.gender +"; "</tr>"; "#gridimport_body". }사용자 가져 오기를 특정 부서로 추가로 얻으려면 대화 상자를 팝업하고 특정 정보를 선택하고 마지막으로 처리를 위해 데이터를 배경에 제출할 수도 있습니다.
작업 코드는 다음과 같습니다.
// 가져온 데이터 함수 저장 SaveImport () {// 객체에 할당 $ ( "#company_id3"). select2 ( "val", @session [ "company_id"]). trigger ( 'change'); $ ( "#dept_id3"). select2 ( "val", @session [ "dept_id"]). 트리거 ( 'change'); $ ( "#selectDept"). Modal ( "show"); }이런 식으로 저축을 확인하면 AJAX를 통해 데이터를 배경에만 제출하면됩니다. 특정 JS 코드는 다음과 같습니다.
$ .ajax ({url : '/user/saveexceldata', type : 'post', datatype : 'json', contenttype : 'application/json; charset = utf-8', charset = utf-8 ', 전통 : true : function : function (data) {if (data.success) {// Saves the Pop-Up Layer, 2. 메인리스트 Shows 3. 성공적으로 "); $ ("#import "). modal ("hide "); $ (bodytag) .html (" "); refresh ();} else {showtoast ("저장 실패 : " + data.errormessage,"error "), data : postdata});2. 데이터 내보내기 작업
데이터 내보내기 작업은 비교적 간단합니다. 일반적으로, 우리는 데이터를 고정 Excel 테이블에 작성한 다음 사용자에게 URL을 제공하여 다운로드 할 수 있습니다.
// Export Excel 데이터 기능 showExport () {var url = "/User/Export"; var 조건 = $ ( "#ffsearch"). serialize (); // 조건을 가져옵니다.특정 논리 코드는 다음과 같습니다
// 내보내기 작업을 실행하고 파일 함수 executexport (url, condition) {$ .ajax ({type : "post", url : url, data : data : guest : function (filepath) {var downUrl = '/fileUpload/downloadfile? file =' + filepath; window.lodurl;}});});});3. 첨부 파일보기 및 처리
대부분의 경우 사무실 문서, 사진 등을 포함하여 업로드 된 파일을 미리 볼 수있는 파일을 볼 필요가 있습니다. 불가능합니다. 다운로드를 제공하고 로컬로 개방하여 볼 수 있습니다.
이전 파일은 사무실을 미리 볼 수있는 두 가지 방법이 있다고 소개했습니다. 하나는 미리보기를 위해 Microsoft Office의 미리보기 주소를 사용하고 다른 하나는 컨트롤을 사용하여 미리보기를 위해 HTML을 생성하는 것입니다. 둘은 조합으로 사용하고 필요에 따라 구성 할 수 있습니다.
/// <summary> /// 첨부 파일 ID에 따라 해당보기 URL을 가져옵니다. /// 일반 규칙 : 이미지 파일 인 경우 뷰 URL 주소 '/fileUpload/viewattach'를 반환합니다. /// 사무실 파일 (Word, PPT, Excel) 등이 있으면 Microsoft의 온라인보기 주소를 통해 볼 수 있습니다. 다른 파일 인 경우 주소를 직접 다운로드 할 수 있습니다. /// </summary> /// <param name = "id"> 첨부 ID </param> /// <returns> </returns> public actionResult getAttachViewUrl (String id) {String viewUrl = ""; fileUploadInfo info = bllfactory <fileUpload> .instance.findbyid (id); if (info! = null) {string ext = info.fileextend.trim ( '.'). tolower (); 문자열 filepath = getFilePath (정보); bool OfficeInternetView = false; // 인터넷을 미리보기 문자열 호스트 이름 = httputility.urlpathencode ( "http://www.iqidi.com/"); // if (ext == "xls"xls "xls"xlsx "| ext =="doc "|| ext"|| ext "| | if (OfficeInternetView) {// 온라인으로 Office를 탐색하기 위해 Microsoft 주소를 반환하려면 인터넷 도메인 이름 또는 공개 IP 주소 viewurl = String.format ( "http://view.officeapps.live.com/view.aspx?src= {0}}", hostname, fillepath); } else { #영역은 처음으로 파일을 동적으로 생성합니다. // 로컬 사무실 파일이 존재하는지 확인합니다. 존재하지 않는 경우 파일을 작성한 다음 String webpath = String.format을보기위한 경로를 반환합니다 ( "/GenerateFiles/Office/{0} .htm", info.id); 문자열 generateFilePath = server.mappath (webpath); if (! fileutil.fileisexist (generateFilePath)) {String TemplateFile = bllFactory <FileUpload> .instance.getFilePath (info); templatefile = path.comBine (System.AppDomain.currentDomain.baseIrectory, TemplateFile.Replace ( "//", "/")); if (ext == "doc"|| ext == "docx") {aspose.words.document doc = new aspose.words.document (templatefile); Doc.Save (GenerateFilePath, aspose.words.saveformat.html); } else if (ext == "xls"|| ext == "xlsx") {Workbook Workbook = 새로운 통합 문서 (TemplateFile); Workbook.Save (GenerateFilePath, SaveFormat.html); } else if (ext == "ppt"|| ext == "pptx") {templatefile = templatefile.replace ( "/", "//"); 프레젠테이션 pres = 새로운 프레젠테이션 (TemplateFile); pres.save (GenerateFilePath, aspose.slides.export.saveformat.html); }} #endregion viewurl = webpath; }} else {viewurl = filepath; }} return content (viewurl); }이 배경 처리 코드를 통해 사무실 미리보기시 사용되는 URL을 올바르게 알 수 있습니다.
이러한 방식으로 프론트 엔드 페이지에서 파일이 어떤 파일인지 결정한 다음 표시하면됩니다.
if (type == "image") {var imgcontent = '<img src = "' + viewurl + '" />'; $ ( "#divviewfile"). html (imgcontent); $ ( "#file"). modal ( "show"); } else {$ .ajax ({type : 'get', url : viewurl, // async : false, // sync // datatype : 'json', success : function (json) {$ ( "#divviewfile"). html (json); $ ( "#file"); 샤워러 ( "작동 실패" + xhr.responsetext); }그것의 코드
$ ( "#file"). modal ( "show");
우리는 글로벌 대화 상자를 호출하여 특정 컨텐츠를 표시합니다. 효과는 다음과 같습니다.
Word 문서 미리보기 효과는 다음과 같습니다.
또는 이미지 파일을 볼 때 다음과 같이 인터페이스 효과를 얻을 수 있습니다.
위는 부트 스트랩 메트로닉 개발 프레임 워크 경험 요약의 관련 내용입니다 [7] 데이터 가져 오기, 내보내기 및 액세서리보기 및 처리. 모든 사람에게 도움이되기를 바랍니다. 자세한 정보를 알고 싶다면 Wulin.com 웹 사이트에주의를 기울이십시오. 편집자는 Wulin.com 웹 사이트에 대한 귀하의 지원에 감사드립니다!