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, ...
随机推荐
- r指定位置插入一列
y<-1:4 data1 <-data.frame(x1=c(1,3,5,7), x2=c(2,4,6,8),x3=c(11,12,13,14),x4=c(15,16,17,18)) da ...
- [转载] PHP开发必看 编程十大好习惯
适当抽象 但是在抽象的时候,要避免不合理的抽象,有时也可能造成过渡设计,现在只需要一种螺丝刀,但你却把更多类型的螺丝刀都做出来了(而且还是瑞士军刀的样子..): 一致性 团队开发中,可能每个人的编程风 ...
- 【Java NIO的深入研究1】缓冲区
缓冲区 传统的流和通道的对比 流 通道 慢 快 处理简单 处理复杂 单字节的传输 一块数据的传输 - Java.io.*已经重新写过 - 是对流的模拟 单向的 双向的 可直接访问 必须通过Buffer ...
- javascript 高级选择器：querySelector 和 querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- pushlet 之 Pushlet使用手把手实例
Pushlet(一种comet 架构的实现)是基于Servlet 机制,数据从server端的Java 对象直接推送(push) 到客户端浏览器的(动态)HTML 页面,而无需任何Java app ...
- SVN入门 TortoiseSVN 检出
1. SVN检出(SVN Checkout) 检出项目文件. 新建或者进入目录下(比如qianduan1),右键 --> Svn 检出-->其中版本库URL我可以在SVN服务器获取到,将复 ...
- jQuery弹出层效果
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- foreach使用
1. 读取记录while($row=mysql_fetch_array($result)){$record[]=array( 'title'=>$row['title'], 'body'= ...
- Redis生成Id主键的工具
public class PrimaryKeyGenerator { private static readonly NedisClient client = new NedisClient(GetR ...