採用bootstrap框架樣式 ...
採用bootstrap框架樣式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../../theme/pc_global.js"></script> <script src="../../theme/js/layer/layer.js" type="text/javascript"></script> <style> .container .form-group { margin-top: 5px; } </style> </head> <body> <form id="form1" runat="server" enctype="multipart/form-data"> <%-- class="form-inline"--%> <div class="container"> <div class="form-group"> <label class="control-label">第一步：下載Excel模板到本地；</label> <button type="button" class="btn btn-default" onclick="DownModule()">下載模板</button> </div> <div class="form-group"> <label class="control-label">第二步：按照Excel模板中格式要求編輯學生分數；</label> </div> <div class="form-group"> <label class="control-label" style="float: left;">第三步：從本地選擇已保存的Excel文件；</label> <input type="file" style="float: left; display: none;" id="inputfile" runat="server" /> <div class="input-group" style="float: left; width: 40%; margin-top: -5px;"> <span class="input-group-btn"> <button type="button" class="btn btn-default" onclick="$('#inputfile').click();">選擇文件</button> </span> <input id="txt_inputfile" type="text" class="form-control" readonly="true" /> </div> </div> <div style="clear: left; margin-bottom: 15px;"></div> <div class="form-group"> <label class="control-label" style="float: left;">第四步：點擊導入上傳文件到系統。</label> <button type="button" style="float: left; margin-top: -5px;" class="btn btn-default" runat="server" onserverclick="btn_Click" onclick="CheckFile();">導入</button> <label id="lbl_error" style="float: left;" class="control-label text-danger" runat="server"></label> </div> <div style="clear: left;"></div> <div id="div_error" class="table-responsive" style="display: none;" runat="server"> <table class="table table-hover table-bordered"> <caption>以下數據導入失敗</caption> <thead> <tr> <th>學號</th> <th>姓名</th> <th>分數</th> <th>錯誤原因</th> </tr> </thead> <tbody id="tbody_trs" runat="server"> </tbody> </table> </div> </div> <asp:HiddenField ID="HFTClassID" runat="server" /> <asp:HiddenField ID="HidCustomScoreID" runat="server" /> </form> <script type="text/javascript"> var FrameIndex = parent.layer.getFrameIndex(window.name); //獲取視窗索引 //關閉頁面 function ClosePage() { parent.layer.close(FrameIndex); } </script> <script type="text/javascript"> //導入 function ExportScoreCustom() { var tclassid = $("#HFTClassID").val(); var customscoreid = $("#HidCustomScoreID").val(); $.ajax({ //提交數據的類型 POST GET type: "POST", //提交的網址 url: "../ScoreAction.ashx", //提交的數據 data: { "action": "exportscorecustom", "tclassid": tclassid, "customscoreid": customscoreid }, //返回數據的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在請求之前調用的函數 beforeSend: function () { }, //成功返回之後調用的函數 success: function (datajson) { if (datajson != null && typeof (datajson) == "string" && datajson.length > 0) { try { datajson = JSON.parse(datajson); } catch (e) { datajson = eval("(" + datajson + ")"); } } window.parent.LoadList(); if (datajson.msg < 0) {//導入臨時表失敗 layer.msg(datajson.msgbox); $("#div_label label").text(datajson.msgbox); $("#div_error").hide(); } else { $("#div_label label").text(""); $("#div_error").show(); $("#div_error table tbody").empty(); $(datajson.jsonstr).each(function (index, Row) { $("#div_error table tbody").append(MyTrHtml(Row)); }); } }, //調用執行後調用的函數 complete: function (XMLHttpRequest, textStatus) { }, //調用出錯執行的函數 error: function () { } }); } function MyTrHtml(Row) { var errormsg = $("#div_tr_model").html(); errormsg = errormsg.replace(/{IDNO}/g, Row.IDNO) .replace(/{UserName}/g, Row.UserName) .replace(/{Score}/g, Row.Score) .replace(/{ErrorReason}/g, Row.ErrorReason); return errormsg; } //下載模板 function DownModule() { parent.window.open("http://" + window.location.host + "/_Score/自定義成績模板.xls"); } //點擊導入 function CheckFile() { if ($("#inputfile").val() == "") { $("#txt_inputfile").val("未選擇任何文件"); return false; } else { return true; } } //上傳文件-確定 $('#inputfile').change(function () { var str = $(this).val(); var arr = str.split('\\');//註split可以用字元或字元串分割 var my = arr[arr.length - 1];//這就是要取得的圖片名稱 $("#txt_inputfile").val(my); }) </script> </body> </html>
