mobiscroll的例子
官網：https://docs.mobiscroll.com/4-3-2/jquery/datetime#optionsjavascript
、、、、、、、、、、、、、css
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="../../css/bootstrap-theme.min.css" rel="stylesheet"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <link href="../../css/base.css" rel="stylesheet"> <link href="../../js/mobiscroll/css/mobiscroll.custom-3.0.0-beta2.min.css" rel="stylesheet"> <script src="../../js/jquery-1.9.1.min.js"></script> <script src="../../js/mobiscroll/js/mobiscroll.custom-3.0.0-beta2.min.js"></script> <script src="../../js/layer/layer.js"></script> <script src="../../js/commom/ajax.js"></script> <script src="../../js/public.js"></script> <script type="text/javascript" charset="utf-8" src="../../cordova.js"></script> <script src="../../js/datatables/jquery.dataTables.min.js"></script> <title>巡視記錄列表</title></head><style> body,html{background-color: #EFEFEF;} .tr_class_red {color:red;} .tr_class {} table{border-right:1px solid #049888;border-bottom:1px solid #049888} table td{border-left:1px solid #049888;border-top:1px solid #049888} table th{border-left:1px solid #049888;border-top:1px solid #049888}</style><body><div align="center" style="width: 99%;"> <table id="dataGrid" align="center" border="1" style="width: 100%;"> <thead> <tr> <th style="display: none">patrolRecordId</th> <th align="center" class="table_title">巡視班組</th> <th align="center" class="table_title">巡視人</th> <th align="center" class="table_title">巡視開始時間</th> <th align="center" class="table_title">巡視結束時間</th> <th align="center" class="table_title">圖片</th> <th align="center" class="table_title">操做</th> </tr> </thead> <tbody> </tbody> </table></div><div align="right"> <button style="width:80px;background-color: #9CE6F2" onclick="window.history.back()" >關閉</button></div></body><script type="application/javascript"> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { console.log("頁面初始化"); if(mam.navigator){ initData(); }else { $(function() { initData(); }); } } function initData() { var recordParams = {}; var warningFormId = getQueryVariable("warningFormId"); var operationKey = getQueryVariable("operationKey"); var recordFeecbackId = getQueryVariable("recordFeecbackId"); recordParams.warningFormId = warningFormId; recordParams.operationKey = operationKey; recordParams.recordFeecbackId = recordFeecbackId; var data = []; exAjax("postJSON","PATROL_RECORD",recordParams,"WARN_DATA",function(e){ if(notEmptyStr(e.recordList) && e.recordList.length > 0){ data = e.recordList; var table = $('#dataGrid').DataTable({ "scrollY" : $(document).height()*0.65, "scrollCollapse" : true,//滾動 "paging" : false, "searching" : false,//去除搜索欄 "language" : { "info" : "", // "zeroRecords" : "沒有找到記錄", "zeroRecords" : " ", "infoEmpty" : "沒有查詢到相關數據！" }, "ordering": false, "drawCallback" : function(){ // this.api().column("photo:name").nodes().each(function(cell, i) { // cell.innerHTML = "<a onclick='patrolDocList(patrolRecordId)'>圖片</a>" // }); var dataTable = this.api(); this.api().rows().nodes().each(function(cell, i) { var patrolRecordId = dataTable.cell(i,0).data(); var patrolSt = dataTable.cell(i,3).data(); cell.cells[2].innerHTML = "<span id='st_"+patrolRecordId+"' istime='datetime' style='color: #7D97AD' onclick=\"pickSt(this,'"+patrolRecordId+"')\">"+patrolSt+"</span>";//開始時間 }); this.api().rows().nodes().each(function(cell, i) { var patrolRecordId = dataTable.cell(i,0).data(); var patrolEt = dataTable.cell(i,4).data(); cell.cells[3].innerHTML = "<span id='et_"+patrolRecordId+"' istime='datetime' style='color: #7D97AD' onclick=\"pickEt(this,'"+patrolRecordId+"')\">"+patrolEt+"</span>";//結束時間 }); this.api().rows().nodes().each(function(cell, i) { var patrolRecordId = dataTable.cell(i,0).data(); cell.cells[4].innerHTML = "<a onclick=\"patrolDocList('"+patrolRecordId+"')\">圖片</a>";//圖片欄 }); this.api().rows().nodes().each(function(cell, i) { var patrolRecordId = dataTable.cell(i,0).data(); cell.cells[5].innerHTML = "<a onclick=\"save('"+patrolRecordId+"')\">保存</a>";//操做欄 }); }, data: data, columns: [ { data: 'patrol_record_id', visible: false }, { data: 'org_name', width: "20%" }, { data: 'patrol_user_name', width: "16%" }, { data: 'patrol_start_time', width: "24%" }, { data: 'patrol_end_time', width: "24%" }, { data: {}, name: 'photo' // width: "8%" },//圖片 { data: {}, name: 'operate' // width: "8%" } ] }); // initMobiscroll(); } }); } /** * 查看巡視記錄的附件列表 */ function patrolDocList(patrolRecordId) { exAjax("postJSON", "PATROL_DOC_LIST", {patrolRecordId : patrolRecordId}, "WARN_DATA", function (e) { if(notEmptyStr(e.docList) && e.docList.length > 0){ var docList = ""; $.each(e.docList, function (index, doc) { docList += "<tr id='tr_"+doc.warning_form_doc_id+"'>" + "<td width='80%' style='overflow: auto'>" + "<a href='javascript:void(0)' onclick=\"downDoc('"+doc.warning_form_doc_id+"');\">" + //下載 doc.doc_name + "</a>" + "</td>" + "<td width='20%' align='center' >" + "<a href='javascript:void(0);' onclick=\"delFile('"+doc.warning_form_doc_id+"');\">刪除</a>" + "</td>" + "</tr>"; }); var htmlContent = "<table width= '100%' border= '0' align= 'center' cellspacing= '1' bgcolor= '#BFC7CA' id= 'fileTab'> " + " <thead id= 'detail'> " + " <tr> " + " <td align= 'center' class= 'table_title'>附件名稱</td> " + " <td align= 'center' class= 'table_title'>操做</td> " + " </tr> " + " </thead>" + docList + "</table>" ; layerIndex = layer.open({ type: 1,//默認：0 （0表示信息框，1表示頁面層，2表示加載層） title: "附件列表", // offset: 't', closeBtn : 0,//右上角的關閉按鈕 content: htmlContent, area: ['80%', '50%'], // btn: ['肯定', '取消'], btn: ['關閉'], yes: function(index){ layer.close(index); } }); }else { alert("沒有上傳附件"); } }); } function downDoc(docId) { console.dir(docId); var downloadUrl = cxt + "/xcgk/app/userVail?key=file_down&warningFormDocId=" + docId; // var downloadUrl = "https://mamtj.sgcc.com.cn/jdxmobile/health/getHealthReport.doc?report_id=ff8080815d8db82e015d8e75f8ee002c"; console.log(downloadUrl); // removefile(appcode,'094436.doc'); // fileDownload(appcode,downloadUrl,'/media','094436.doc','安全風險現場管控','0'); /** 插件參數說明： url 應用配置白名單地址 （能夠在網頁中打開並下載文件） https://mam1.ft-power.com.cn:10013 平臺環境域名訪問地址 html4/download/xwlb.mp4 應用資源地址 successCallback 成功回調 狀態碼見開發指南 errorback 失敗回調 狀態碼？ "download/" 文件保存本地存儲卡根目錄 如：/sdcard/download "測試下載插件視頻.mp4" 文件保存本地文件名稱 "SYS" 應用編碼 "DOWNVIDEO" 應用服務編碼 */ // var urlyjzh = "http://robocob.tp-ecp.com:8081/robocop-web/DownloadServlet;jsessionid=5K-CQ22HQoArLHCNVeSVHWVVEt62zrWYDENtqWSFm3mTK7KBtYvD!-1465857157?path=%2Ftest%2F49%2F201%2F9f14af95-a517-4612-8481-4c17cbba73da"; // var downloadUrl = "http://118.25.1.152:17001/xcgk/app/userVail?key=file_down&warningFormDocId=b6fc3e779e7540b7bdc28f5ac156d53f"; //文件下載 // alert("down下載 test.doc"); // mam.navigator.down.down(successCallback, errorback, urlyjzh, "yjzh.doc","downdocument6/", "SYS", "DOWNVIDEO"); mam.navigator.down.down(successCallback, errorback, downloadUrl, docId + "-" + "down.jpg", "download/", appcode, "WARN_DATA"); } function successCallback(v) { console.log(v); alert("下載成功：" + JSON.stringify(v)); } function errorback(v) { console.log(v); alert("下載失敗：" + JSON.stringify(v)); } function fileDownload(appcode,downloadUrl,saveUrl,filename,appname,fileStatus) { console.log("fileDownload 插件調用成功"); mam.navigator.appfilemanage.fileDownload(fileDownloadCallback,appcode,'','0',downloadUrl,saveUrl,filename,appname,'2097152',fileStatus); } function fileDownloadCallback(obj) { console.log(obj); console.log("fileDownload 插件調用 回調"+ JSON.stringify(obj)); // alert(JSON.stringify(obj)); } // fileStatus 0 未下載 1 下載中 3 下載成功 function removefile(appcode,filename) { // alert("應用編碼 "+appcode+"應用名稱 "+filename); mam.navigator.appfilemanage.rmFile(rmcallback,appcode,filename); } function rmcallback(obj) { console.log(obj); // alert(JSON.stringify(obj)); } /** * 刪除附件 * @param id */ function delFile(id) { if (window.confirm('確認刪除？')) { exAjax("postJSON", "DEL_FILE", {id:id}, "WARN_DATA", function (e) { if(e && e.code == 0){ $("#tr_"+id).remove(); alert(e.msg); }else{ alert("刪除失敗"); } }); } } function save(patrolRecordId) { var sTime = $("#st_"+patrolRecordId).text(); var eTime = $("#et_"+patrolRecordId).text(); var params = { patrolRecordId : patrolRecordId, sTime : sTime, eTime : eTime }; exAjax("postJSON", "UPDATE_PATROL_TIME", params, "WARN_DATA", function (e) { if(e && e.msg){ alert(e.msg); }else { alert("保存失敗"); } }); } function pickSt(st, patrolRecordId) { $(st).mobiscroll().datetime({ // $('#st_'+patrolRecordId).mobiscroll().datetime({ theme:'ios', // Specify theme like: theme: 'ios' or omit setting to use default lang:'zh', // Specify language like: lang: 'pl' or omit setting to use default display:'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default dateFormat: 'yy/mm/dd', timeFormat: 'HH:ii', daySuffix : '日', setText: '肯定', cancelText: '取消', defaultValue : new Date($(st).text().replace(new RegExp("-","g"), '/')), onSet: function (event, inst) { // var newValue = event.valueText.replace(/\/+/gm, "-"); var newValue = event.valueText.replace(new RegExp("/","gm"), "-"); $(st).text(newValue); } }); $(st).mobiscroll('show'); } function pickEt(et, patrolRecordId) { $(et).mobiscroll().datetime({ // $('#et_'+patrolRecordId).mobiscroll().datetime({ theme:'ios', // Specify theme like: theme: 'ios' or omit setting to use default lang:'zh', // Specify language like: lang: 'pl' or omit setting to use default display:'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default dateFormat: 'yy/mm/dd', timeFormat: 'HH:ii', daySuffix : '日', setText: '肯定', cancelText: '取消', defaultValue : new Date($(et).text().replace(new RegExp("-","g"), '/')), onSet: function (event, inst) { // var newValue = event.valueText.replace(/\/+/gm, "-"); var newValue = event.valueText.replace(new RegExp("/","gm"), "-"); $(et).text(newValue); } }); $(et).mobiscroll('show'); } /** * 初始化mobiscroll */ function initMobiscroll() { var datePicks = $("span[istime='datetime']"); // console.dir(datePicks); $.each(datePicks, function (i, e) { // console.dir(e); $(e).mobiscroll().datetime({ // $('#st_'+patrolRecordId).mobiscroll().datetime({ theme:'ios', // Specify theme like: theme: 'ios' or omit setting to use default lang:'zh', // Specify language like: lang: 'pl' or omit setting to use default display:'bottom', // Specify display mode like: display: 'bottom' or omit setting to use default dateFormat: 'yy/mm/dd', timeFormat: 'HH:ss', daySuffix : '日', setText: '肯定', cancelText: '取消', defaultValue : new Date(), onSet: function (event, inst) { // console.dir(event); // var newValue = event.valueText.replace(/\/+/gm, "-"); var newValue = event.valueText.replace(new RegExp("/","gm"), "-"); } }); }); }</script></html>
相關文章
- 1. mobiscroll的例子
- 2. mobiscroll
- 3. jquery mobile mobiscroll 日期插件使 用mobiscroll
- 4. mobiscroll 的詳細用法
- 5. mobiscroll日期插件使用
- 6. Jquery Mobile日期控件mobiscroll
- 7. mobiscroll js 日期插件
- 8. SparkStructuredStreaming 的例子
- 9. WeakedHashMap 的例子
- 10. worker_pool的例子
- 更多相關文章...
- • MyBatis與Spring的整合實例 - MyBatis教程
- • Spring實例化Bean的三種方法 - Spring教程
- • 漫談MySQL的鎖機制
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
