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, ...
随机推荐
- 400错误，Required String parameter 'paramter' is not present
1.就拿简单的登录来说吧,这是开始的代码 @RequestMapping(value="/login")public ModelAndView login(@RequestPara ...
- AT command常用中文简解
1.常用操作1.1 AT命令解释:检测 Module 与串口是否连通,能否接收 AT 命令:命令格式:AT<CR>命令返回:OK (与串口通信正常) (无返回,与串 ...
- ci框架model中的进行增删改的写法
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); // 商品类别模型class Categor ...
- Spring Annotation是怎么工作的？
最近刚好看了下注解,虽然明白了注解的作用原理,但是仍然不明白Spring中的注解是如何工作的. 占座用,留待后续. 先来两个链接吧 https://dzone.com/articles/spring- ...
- php -- or 的用法
经常看到这样的语句: $file = fopen($filename, r) or die("抱歉,无法打开: $filename"); or 在这里是这样理解的,因为在PHP中并 ...
- UART通信协议
第一部分: UART使用的是 异步,串行通信. 串行通信是指利用一条传输线将资料一位位地顺序传送.特点是通信线路简单,利用简单的线缆就可实现通信,降低成本,适用于远距离通信,但传输速度慢的应用场 ...
- MVC下载(存在文件的情况)
前台: <h1>下载</h1> <button onclick="location = 'download'">下载</button> ...
- 真想用c#开发个 wp五笔输入法。。。奈何网上资料太少，源码都是c++写的。求大神指点!!!
真想用c#开发个 wp五笔输入法...奈何网上资料太少,源码都是c++写的.求大神指点!!!!
- idea 新建项目 文件名都是红色的处理办法
原因是当前的project用了版本控制器 所以这个project下面所有的项目都加入版本控制器里了,所以项目文件和名称都是红色的 简单文字叙述解决办法 file-->settings--> ...
- POJ 2923 Relocation(01背包变形, 状态压缩DP)
Q: 如何判断几件物品能否被 2 辆车一次拉走? A: DP 问题. 先 dp 求解第一辆车能够装下的最大的重量, 然后计算剩下的重量之和是否小于第二辆车的 capacity, 若小于, 这 OK. ...