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>
mobiscroll的例子的更多相关文章
- mobiscroll 插件札记（一）
mobiscroll 插件笔记(一) 文章参照 http://www.cnblogs.com/headwolf/archive/2013/12/23/3487207.html 最近切一个移动页面,需 ...
- Mobiscroll的介绍【一款兼容PC和移动设备的滑动插件】
Mobiscroll是一个用于触摸设备的日期和时间选择器,它的使用不会改变HTML5.PhoneGap以及混合应用的原生用户体验.作为一款jQuery滑动选择插件,用户可以自定义主题样式,为自己的移动 ...
- 用mobiscroll.js如何简单使用日期控件
首先,可以到官网学习,地址:https://docs.mobiscroll.com 第一步:引用js.css样式 1)mobiscroll.css 2)mobiscroll_date.css 3)jq ...
- jquery mobiscroll 滑动、滚动
mobiscroll : 滑动选择 2.13.2版本免费,官网(mobiscroll.com)收费 先从官方下载2.13.2体验版下来,查看例子结合官方API学习( http://docs.mobis ...
- mobiscroll时间控件
https://docs.mobiscroll.com/3-0-0_beta/javascript/numpad#events 这个是官方的日期插件,日历,什么效果都有,很强大的. mobiscrol ...
- 手机日期控件mobiscroll
query Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件可以让用户很方 ...
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...
- SQLServer地址搜索性能优化例子
这是一个很久以前的例子,现在在整理资料时无意发现,就拿出来再改写分享. 1.需求 1.1 基本需求: 根据输入的地址关键字,搜索出完整的地址路径,耗时要控制在几十毫秒内. 1.2 数据库地址表结构和数 ...
- C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子)
第一次接触HtmlAgilityPack是在5年前,一些意外,让我从技术部门临时调到销售部门,负责建立一些流程和寻找潜在客户,最后在阿里巴巴找到了很多客户信息,非常全面,刚开始是手动复制到Excel, ...
随机推荐
- 专题实验 Statspack & 9大动态视图
statspack 是一个DBA经常用的调优工具, 它的主要作用是, 针对数据库的不同时刻做快照, 然后来比对快照之前的差异和瓶颈, 快照可以是手动的也可以是自动的, 从 oracle 10g开始, ...
- 45本免费的JavaScript书籍资源收集
JavaScript目前变得越来越流行,已经变成了Web开发必备的语言,加之其跨平台的特性,使得在一切皆为JavaScript的移动互联网时代大有作为. 同时,我们看到,在过去的这一年的软件开发中,J ...
- chrome 常用快捷键（可以摆脱鼠标哦）
Ctrl+N 打开新窗口. Ctrl+T 打开新标签页. Ctrl+Sh ...
- Xenocode Postbuild 2010 for .NET 混淆工具的详细使用步骤【转】
1,首先我们需要去下载这个工具去,我这里倒是有一个下载的网址,已经被破解了,而且有序列号 http://download.csdn.net/tag/Xenocode+Postbuild+2010+fo ...
- (转) 从ffmpeg中提取出YUV数据
有时需要从ffmpeg中提取出YUV数据用作预览,另存什么的. ffmpeg是先解码成YUV, 再以这个YUV作为输入进行编码,所以YUV数据有两种: 解码后的YUV数据, 以及 编码重建的YUV ...
- centos6.5的软件安装，用户管理等
1.软件的安装命令: 第一种:以 软件名.rpm 为结尾的二进制文件,这样的文件的安装 rpm -ivh 软件名.rpm i 是 install v 是校验 h 进度 卸载软件 是 rpm -e 软件 ...
- html dom基本操作
//div出滚动条: <div id="discussion" style="height:500px;overflow:auto;"></d ...
- url传参错误的痛
今天用一下方法给后台传参数: var url = 'patrolpoint!totalHistoryPage.action' + '?patrolPoint.batchOnTime=' ...
- Unity的Asset Store商店下载文件路径
如果之前在Asset Store商店下载过资源包,结果下次用的时候找不到了,不用急,其实Unity把它自动保到下面这个目录了,最后一个文件夹名与版本号有关,找到前面的即可. C:\Users\Admi ...
- 详解MathType引用公式编号功能
在论文创作期间,如果需要在文本中删除大量的公式,手动编号删除的工作量是比较大的,使用MathType引用公式编号功能就可以节约大量的时间,提供很大的方便.本教程将详解MathType引用公式编号功能. ...