官网: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的例子的更多相关文章

  1. mobiscroll 插件札记(一)

    mobiscroll 插件笔记(一) 文章参照  http://www.cnblogs.com/headwolf/archive/2013/12/23/3487207.html 最近切一个移动页面,需 ...

  2. Mobiscroll的介绍【一款兼容PC和移动设备的滑动插件】

    Mobiscroll是一个用于触摸设备的日期和时间选择器,它的使用不会改变HTML5.PhoneGap以及混合应用的原生用户体验.作为一款jQuery滑动选择插件,用户可以自定义主题样式,为自己的移动 ...

  3. 用mobiscroll.js如何简单使用日期控件

    首先,可以到官网学习,地址:https://docs.mobiscroll.com 第一步:引用js.css样式 1)mobiscroll.css 2)mobiscroll_date.css 3)jq ...

  4. jquery mobiscroll 滑动、滚动

    mobiscroll : 滑动选择 2.13.2版本免费,官网(mobiscroll.com)收费 先从官方下载2.13.2体验版下来,查看例子结合官方API学习( http://docs.mobis ...

  5. mobiscroll时间控件

    https://docs.mobiscroll.com/3-0-0_beta/javascript/numpad#events 这个是官方的日期插件,日历,什么效果都有,很强大的. mobiscrol ...

  6. 手机日期控件mobiscroll

    query Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件可以让用户很方 ...

  7. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  8. SQLServer地址搜索性能优化例子

    这是一个很久以前的例子,现在在整理资料时无意发现,就拿出来再改写分享. 1.需求 1.1 基本需求: 根据输入的地址关键字,搜索出完整的地址路径,耗时要控制在几十毫秒内. 1.2 数据库地址表结构和数 ...

  9. C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子)

    第一次接触HtmlAgilityPack是在5年前,一些意外,让我从技术部门临时调到销售部门,负责建立一些流程和寻找潜在客户,最后在阿里巴巴找到了很多客户信息,非常全面,刚开始是手动复制到Excel, ...

随机推荐

  1. Windows与Linux下进程间通信技术比较

    一般我们写的程序都是以单个进程的方式来运行的,比较少涉及到多进程.特别是在windows下,因为Windows是按照线程来分配CPU时间片的,线程是最小的调度单位,所以在Windows下更多的用到多线 ...

  2. QFTPERROR lists

  3. laravel 5.1 的程序性能优化(配置文件)

    命令优化 本文的目的是来弄清楚一些优化命令在 Laravel 5.1 和之前版本之间的差别. 在 15年6月发布的 Laravel 5.1版本中, 命令和他们的逻辑方法被清理掉, 本文章就是描述这些不 ...

  4. 关于Cocos2d-x中数据的存储

    当局分数的打印和最高分数的记录 1.首先定义一个Label类型的节点在GameScene.cpp的init方法中,设置初始分数为0 _myScore = 0; scorelabel = Label:: ...

  5. Spring 4 官方文档学习(十一)Web MVC 框架之resolving views 解析视图

    接前面的Spring 4 官方文档学习(十一)Web MVC 框架,那篇太长,故另起一篇. 针对web应用的所有的MVC框架,都会提供一种呈现views的方式.Spring提供了view resolv ...

  6. JDK中的序列化和反序列化

    题外话:诸事缠身,不知不觉距离上一篇就将近一个月了,读书不易,学习不易,唯有坚持. 写来写去始终不满意,索性贴一个比较好的文章吧! 参考: [Java基础]序列化与反序列化深入分析

  7. (转)关于三星cortex A9 Sate4412 开发板 uboot 启动的一些问题释疑

    说明:本文转载自:http://blog.csdn.net/gooogleman/article/details/17238079  作者:gooogleman                   日 ...

  8. 基于SSH框架、Oracle数据库、easyui的分页显示

    要求:在easyui-datagrid中完成paginaton的分页功能. 1.easyui-datagrig的配置 <table id="dg" rownumbers=tr ...

  9. jquery-创建元素和添加子元素

    一.创建新元素 1.使用$函数创建新元素 var $newElement=$('<div><p>段落</p></div>');//创建元素,返回jQue ...

  10. js的form表单提交url传参数(包含+等特殊字符)的解决方法

    方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){        var formredwin = document.createElemen ...