mobiscroll的例子
官网：https://docs.mobiscroll.com/4-3-2/jquery/datetime#options
、、、、、、、、、、、、、
<!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>
不积跬步无以至千里，不积小流无以成江海
