多くのシステムモジュールでは、特定のデータ交換処理、つまりデータのインポートまたはエクスポート操作を実行する必要がある場合があります。このようなバッチ処理により、システムユーザーはより良い動作体験を提供し、データを入力するユーザーの効率を向上させることができます。 Bootstrapフレームワークに基づいて、このモジュールはオフィスドキュメントや写真用に更新および表示されます。
1。データインポート操作
一般に、システムモジュールにはデータのインポートおよびエクスポート操作があります。したがって、インターフェイスが自動的に生成されると、ユーザー向けにこれらの標準クエリ、インポート、エクスポート、その他の操作機能を自動的に生成する傾向があります。インターフェイス効果は次のとおりです。
Bootstrapフレームワークでは、レイヤーとして配置し、Index.cshtmlファイルに配置し、インターフェイス全体をより密接に処理できます。サンプルコードを以下に示します。
一般に、必要なすべてのフィールドを含む、次のコードが自動的に生成されます。私たちは通常、ビジネスと実際のニーズに合わせて、必要に応じてフィールドを調整します。
<！ - インポートデータ操作レイヤー - > <div id = "Import" tabindex = "-1" role = "ダイアログ=" aria-labelledby = "aria-hidden =" true "> <div> <div> <ボタン=" button "button" data-dismiss = "modal" aria-hidden = "div> <h4> <h4> <h4> <> <h4> style = "text-align：right; padding：5px"> <a href = "〜/content/template/user-template.xls" onclick = "javascript：prepiew（）;"> <img src = "〜/content/images/ico_excel.png"/> <span style = "font-size：大きい; font-weight：200; color：red"> user-template.xls </span> </a> </div> <hr/> <form id = "ffimport" method = "post"> <div style = "padding：5px" data-options = "Iconcls： name = "AttachGuid" /> <input id = "file_upload" name = "file_upload" file "file" multiple = "multiple"> <a href = "javascript :;" id = "btnupload" onclick = "javascript：$（ '＃file_upload'） id = "btncancelupload" onclick = "javascript：$（ '＃file_upload'）。uploadify（ 'cancel'、 '*'）"> cancel </div = "filequeue"> </div> <br/> <hr/> <hr/> <div divfiles "> </div < id = "gridimport" cellpadding = "0" cellpacing = "0"> <thead id = "gridimport_head"> <tr> <th theptyp = "onclick" onclick = "selectal（this）"> </th> <th> <th> <th> <th> <th> <th>電話</th> <th>オフィス電話</th> <th>メールアドレス</th> <th> gender </th> <thq number </th> <th>備考</th> </tr> </thead> <tbody id = "gridimport_body"> </tbody> </table> </div> <button <button <button <button </button </button </button </button type = "button" onclick = "saveimport（）"> save </button> </div> </div> </div> </div> </div> </div>
インポート操作インターフェイスを表示したい場合は、次のスクリプトに示すように、このレイヤーを表示するだけです。
//インポートインターフェイス関数showimport（）{$（ "＃import"）。modal（ "show"）; }ここでのファイルアップロード処理は、主にuploadifyコントロールを使用して処理されます。もちろん、これらのインポート操作を適切に達成できる処理用に以前に導入したファイル入力アップロードコントロールを使用することもできます。
一般に、uploadifyコントロールの初期化コードは次のとおりです
$（function（）{// interfaceの添付ファイル管理を追加$（ '＃file_upload'）。uploadify（{'swf'： '/content/uploadify/uploadify.swf'、//フラッシュファイルパス 'buttontext'： 'brows'、//アップロードされたpage'queuid '：' filequeue '、// queue id' queuesizelimit '：1、//キューにアップロードできるファイルの最大数は999' auto 'です。完了後にシーケンス、デフォルトの真の「filesizelimit」： '10MB'、//単一のファイルサイズ、0は無制限で、KB、MB、GB、およびその他のユニットの "filetypedESC 'の文字列値を受け入れることができます。すべてのキューが完了します//ビジネス処理コード//ユーザーにExcel形式が正常であるかどうか、データが正常にロードされている場合、「onuploadstart」：function（file）{initupfile（）; //ファイルをアップロードする前に、GUIDをリセットする前、そしてそれが違う（ "#file_upload"） 'guid'：$（ "＃adtachguid"）。重要なロジックは次のとおりです。
//ビジネス処理コード
一般的に言えば、ここでサーバーでExcelファイルを取得しているため、このファイルの形式を処理する必要があります。フォーマットが正しい場合は、ユーザーをインポートするためのデータを表示してレコードを選択し、インポートするレコードを決定します。
Excelデータ形式のチェックを処理するコードは次のとおりです。
// Excel形式が正常かどうかをユーザーに促します。データが正常にロードされている場合、$ .ajax（{url： '/user/checkexcelcolumns？guid =' + guid、type： 'get'、datatype： 'json'、cuscess：function（data）{if（data.success）{（data.succes）{initgrid（）; //テーブルデータショーのリフレッシュ（ showtoast（「アップロードされたExcelファイルチェックが失敗します。ページの右上隅にあるExcelテンプレート形式に従ってデータを入力してください。」、「エラー」}}）;Excelファイルのフィールド形式を確認するために、背景にCheckExcelColumnsメソッドを追加します。フォーマット要件を満たすファイルのみが、インターフェイスに取得および表示されます。
インターフェイスに表示される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 = 'checkboxes' type =/" checkbox/"項目 + "</td> =" <td> "</td>" + "<td> officePhone +" </td> " +" </td> " +項目 +" </td> "; 「</tr>」; }ユーザーのインポートを特定の部門にさらに取得するために、ダイアログボックスをポップアップして特定の情報を選択し、最後に処理のために背景にデータを送信することもできます。
操作コードを以下に示します。
//インポートされたデータ関数を保存saveimport（）{// object $（ "＃company_id3"）。select2（ "val"、@session ["company_id"]）。トリガー（ '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'、伝統、成功：function：data（data）{if（data.success）{// saves close sibes sibes show ship seas、 resculy "）; $（"＃import "）。modal（" hide "）; $（bodytag）.html（" "）; reffery（）;} else {showtoast（" save failed： " + data.errormessage、" error "）;}}、data：postdata}）;2。データエクスポート操作
データエクスポート操作は比較的簡単です。一般的に言えば、データを固定Excelテーブルに書き込み、ユーザーにURLを提供してダウンロードします。
// Excelデータ機能showexport（）{var url = "/user/export"; var条件= $（ "＃ffsearch"）。serialize（）; // executeexport（url、条件）; //エクスポートを実行}を取得}特定のロジックコードは次のとおりです
//エクスポート操作を実行してファイル関数を出力しますExecuteExport（url、条件）{$ .ajax（{type： "post"、 "post"、url：url、data：条件、成功：var downurl = '/fileupload/downloadfile？file =' + felepath; windocat3。添付ファイルの表示と処理
ほとんどの場合、プレビューできるオフィスドキュメント、写真などを含むアップロードされたファイルを表示する必要がある場合があります。不可能です。ダウンロードを提供し、ローカルで開いて表示できます。
以前のファイルでは、オフィスをプレビューする2つの方法があることが導入されました。 1つはMicrosoft Officeのプレビューアドレスをプレビューに使用することであり、もう1つはコントロールを使用してプレビュー用のHTMLを生成することです。 2つは、必要に応じて組み合わせて使用でき、構成できます。
/// <summary> ///添付ファイルIDに従って対応するビューURLを取得します。 ///一般的なルール：画像ファイルの場合は、view urlアドレス '/fileupload/viewattach'を返します。 ///それがオフィスファイル（Word、PPT、Excelなど）の場合、Microsoftのオンライン表示アドレスを介して表示できます。別のファイルの場合は、アドレスを直接ダウンロードできます。 /// </summary> /// <param name = "id"> adcitid id </param> /// <returns> </returns> public actions getattachviewurl（string id）{string viewurl = ""; fileuploadinfo info = bllfactory <fileupload> .instance.findbyid（id）; if（info！= null）{string ext = info.fileextend.trim（ '。'）。tolower（）; string filepath = getFilepath（info）; bool officeInternetView = false; //インターネットを使用して文字列hostname = httputility.urlpathEncode（ "http://www.iqidi.com/"）; //（ext == "xls" || ext == "xlsx" || ext = = "docx"） （OfficeInternetView）{// Microsoftのアドレスを返してOffice Officeをオンラインで閲覧するには、インターネットドメイン名またはpublic IPアドレスViewurl = string.format（ "http://view.officeapps.live.com/op/view.aspx?src= {1}"、hostname、filepath）; } else {#region初めてファイルを動的に生成します//ローカルオフィスファイルが存在するかどうかを確認します。存在しない場合は、ファイルを作成してから、string webpath = string.format（ "/generatefiles/office/{0} .htm"、info.id）を表示するパスを返します。 string generatefilepath = server.mappath（webpath）; if（！fileutil.fileisexist（generatefilepath））{string templateFile = bllfactory <fileupload> .instance.getFilepath（info）; templateFile = path.combine（system.appdomain.currentdomain.basedirectory、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 = new Workbook（templateFile）; workbook.save（generatefilepath、saveformat.html）; } else if（ext == "ppt" || ext == "pptx"）{templateFile = templateFile.Replace（ "/"、 "//"）; PresentionEx Pres = new PresentionEx（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"）。 Showerror（ "操作が失敗しました" + xhr.responsetext）; }その中のコード
$（ "＃file"）。modal（ "show"）;
グローバルダイアログボックスを呼び出して特定のコンテンツを表示します。効果は次のとおりです。
Word Document Preview Effectは次のとおりです。
または、画像ファイルを表示すると、次のようにインターフェイス効果を取得できます。
上記は、Bootstrap Metronic Development Framework Experience Experienceの概要[7]データのインポート、エクスポート、およびアクセサリーの表示と処理の関連コンテンツです。私はそれが誰にでも役立つことを願っています。詳細情報を知りたい場合は、wulin.comのWebサイトに注意してください。ここで、編集者はwulin.comのウェブサイトへのご支援に感謝します！