<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-1.8.3.js"></script>
<!-- 導入easyui類庫 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/default.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui/ext/jquery.cookie.js"></script>
<script src="${pageContext.request.contextPath }/static/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/datajs/WdatePicker.js"></script>
<script type="text/javascript">
var columns = [ [
{
field : 'operation',
title : 'operation',
width : 68,
align : 'center',
formatter : function(data, row, index) {
var opHtml = "<a href=\"javascript:void(0);\" οnclick=\"edit('"
+ row.id
+ "',"
+ index
+ ")\" class=\"easyui-linkbutton\" plain=\"true\" style=\"text-decoration:none;font-size:12px;height:100%;width:50%\"><b>U</b></a>"
+ " <a href=\"javascript:void(0);\" οnclick=\"deleteIndexFrequency('"
+ row.id
+ "',"
+ index
+ ")\" class=\"easyui-linkbutton deleteNewsNotic\" plain=\"true\" style=\"text-decoration:none;font-size:13px;height:100%;width:50%\"><b>D</b></a>";
return opHtml;
}
}, {
field : 'id',
title : 'ID',
width : 250,
align : 'left',
},{
field : 'plan_is_prepared',
title : '計劃是否已準備',
width : 99,
align : 'center',
formatter : function(data, row, index) {
if (data == '1') {
return "已準備";
} else {
return "未準備";
}
}
} ] ];
$(function() {
// 先將body隱藏,再顯示,不會出現頁面刷新效果
$("body").css({visibility:"visible"});
$('#grid').datagrid({
fit : true,
border : false,
rownumbers : true,//顯示行號
animate : true, //動畫效果
singleSelect : true,//只能單選
striped : true,
pageList : [ 10, 20, 50 ],//每頁大小
pagination : true, //啓用分頁
url : "${pageContext.request.contextPath}...", //請求地址
columns : columns,
loadMsg : '數據加載中...',
frozenColumns : [ [ { //凍結列
field : 'id',
title : 'ID',
width : 250,
align : 'left',
} ] ],
onDblClickRow : doDblClickRow, //雙擊列
onLoadSuccess: function (data) { //數據加載成功後執行
if (data.total == 0) { //沒有查到數據時顯示的樣式
$("#centerShow").css("display","none");
$("#showInfo").css("display","block")
}
else { //查到數據後顯示的樣式
$("#showInfo").css("display","none")
$("#centerShow").css("display","block");
}
},
});
$("#updateWindow").window({ //初始化更新窗口大小
width : 700,
height : 500,
modal : true
});
$("#addWindow").window({ //初始化添加窗口大小
width : 700,
height : 500,
modal : true
});
// 點擊保存 提交表單!
$("#save").click(function() { //更新數據點擊保存後事件
if ($("#updatePlanForm").form("validate")) {
/* $("#updatePlanForm").submit();
$('#updateWindow').window("close"); */
var data = $("#updatePlanForm").serialize();
$.ajax({
type : 'post',
url : "${pageContext.request.contextPath }...",
data : JSON.stringify(conveterParamsToJson(data)),
dataType : 'json',
contentType : "application/json; charset=utf-8",
success : function(data) {
if (data.result) {
$("#grid").datagrid('reload');
$.messager.alert('更新成功',data.msg,"info");
} else {
$.messager.alert('更新失敗',data.msg,"error");
}
}
});
} else {
return;
}
$('#updateWindow').window("close");
});
$("#saveVP").click(function() { //添加數據後點擊提交後觸發事件
if ($("#addPlanForm").form("validate")) {
var data = $("#addPlanForm").serialize();
$.ajax({
type : 'post',
url : "${pageContext.request.contextPath }...",
data : JSON.stringify(conveterParamsToJson(data)),
dataType : 'json',
contentType : "application/json; charset=utf-8",
success : function(data) {
if (data.result) {
$("#grid").datagrid('reload');
$.messager.alert('添加成功',data.msg,"info");
} else {
$.messager.alert('添加失敗',data.msg,"error");
}
}
});
} else {
return;
}
$('#addWindow').window("close");
});
//自定義擴展方法,動態調整序號列的寬度
$("#grid").datagrid({
onLoadSuccess : function () {
$(this).datagrid("fixRownumber");
}
});
$('.buttonStyle').hover(function(){$(this).removeClass('buttonStyle').addClass('overButtonStyle')},function(){$(this).removeClass('overButtonStyle').addClass('buttonStyle')})
})
function doSearch() {
var isDel = 0;
if ($('#yesOrNot').combobox('getText') == '已刪除') {
isDel = 1;
}else if ($('#yesOrNot').combobox('getText') == '未刪除') {
isDel = 0;
}else if($('#yesOrNot').combobox('getText') == 'All'){
isDel = null;
}
$("#grid").datagrid("load", {
"startTime" : $("#startDate").val(),
"endTime" : $("#endDate").val(),
"id" : $("input[name='Id']").val(),
"activity_type_id" : $("input[name='activeTypeId']").val(),
"is_deleted" : isDel
})
}
function addData(){
$('#addWindow').window("open");
$("#addPlanForm")[0].reset();
}
//雙擊修改內容
function doDblClickRow(rowIndex, rowData) {
$('#updateWindow').window("open");
$("#updatePlanForm").form("load", rowData);
}
<span style="white-space:pre"> </span>//更新前向後臺發送請求獲取選中行的數據,添加到更新窗口中
function edit(id, index) {
var dataVo = {
id : id
};
$.ajax({
type : 'post',
url : '${pageContext.request.contextPath}...',
data : JSON.stringify(dataVo),
dataType : 'json',
contentType : "application/json; charset=utf-8",
success : function(data) {
if (data.flag) {
$('#updateWindow').window("open");
$("input[name='id']").val(data.result.id);
$("#plan_status").numberbox('setValue', data.result.plan_status);//當覈驗框的class爲easyui-numberbox,必需用這種方式賦值
} else {
$.messager.alert('提示', data.msg);
}
}
});
}
<span style="white-space:pre"> </span>//刪除一條記錄
function deleteIndexFrequency(id, index) {
jQuery.messager
.confirm(
'提示:',
'你確認要刪除嗎?',
function(event) {
if (event) {
var dataVo = {
id : id
};
$
.ajax({
type : 'post',
url : '${pageContext.request.contextPath}...',
data : JSON.stringify(dataVo),
dataType : 'json',
contentType : "application/json; charset=utf-8",
success : function(data) {
if (data.payload) {
$("#grid").datagrid('reload');
$.messager.alert('刪除成功',data.msg,"info");
} else {
$.messager.alert('刪除失敗',data.msg,"error");
}
}
});
} else {
return;
}
});
}
//根據選擇的查詢條件導出相應數據
function exportData(){
var isDel = 0;
if ($('#yesOrNot').combobox('getText') == '已刪除') {
isDel = 1;
}else if ($('#yesOrNot').combobox('getText') == '未刪除') {
isDel = 0;
}else if($('#yesOrNot').combobox('getText') == 'All'){
isDel = 10;
}
var startTime = $("#startDate").val();
var endTime = $("#endDate").val();
var id = $("input[name='Id']").val();
var activity_type_id = $("input[name='activeTypeId']").val();
var elemIF = document.createElement("iframe");
elemIF.src = "${pageContext.request.contextPath}/visit/exportVisitPlan?is_deleted="+isDel+"&startTime="+startTime+
"&endTime="+endTime+"&id="+id+"&activity_type_id="+activity_type_id;
elemIF.style.display = "none";
document.body.appendChild(elemIF)
}
//自定義擴展方法,動態調整序號列的寬度
$.extend($.fn.datagrid.methods, {
fixRownumber : function (jq) {
return jq.each(function () {
var panel = $(this).datagrid("getPanel");
var clone = $(".datagrid-cell-rownumber", panel).last().clone();
clone.css({
"position" : "absolute",
left : -1000
}).appendTo("body");
var width = clone.width("auto").width();
if (width > 25) {
//多加5個像素,保持一點邊距
$(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).width(width + 5);
$(this).datagrid("resize");
//一些清理工作
clone.remove();
clone = null;
} else {
//還原成默認狀態
$(".datagrid-header-rownumber,.datagrid-cell-rownumber", panel).removeAttr("style");
}
});
}
});
var easyuiPanelOnMove = function(left, top) {/* 防止超出瀏覽器邊界 */
var parentObj = $(this).panel('panel').parent();
if (left < 0) {
$(this).window('move', {
left : 1
});
}
if (top < 0) {
$(this).window('move', {
top : 1
});
}
var width = $(this).panel('options').width;
var height = $(this).panel('options').height;
var right = left + width;
var buttom = top + height;
var parentWidth = parentObj.width();
var parentHeight = parentObj.height();
if(parentObj.css("overflow")=="hidden"){
if(left > parentWidth-width){
$(this).window('move', {
"left":parentWidth-width
});
}
if(top > parentHeight-height){
$(this).window('move', {
"top":parentHeight-height
});
}
}
}
$.fn.panel.defaults.onMove = easyuiPanelOnMove;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;
</script>
<style type="text/css">
.overButtonStyle {
padding:4px 16px;
margin-left:30px;
border-radius:11px;
font-size:13px;
cursor: pointer;
background-color:#D9D9D9;
color:red
}
.buttonStyle {
padding:4px 16px;
margin-left:30px;
background-color:#F0F0F0;
border-radius:11px;
font-size:13px;
cursor: pointer;
color:black
}
</style>
</head>
<body class="easyui-layout" style="visibility:hidden;">
<div style="display:none;color:red;position:absolute;top:50%;left:40%;font-size:2em" id="showInfo"><b>沒有查到相關數據</b></div>
<div data-options="region:'north'" style="padding: 6px; background: #7F99BE; border: false">
<form id="tb" method="post">
<b>start:</b> <input editable="false" id="startDate" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'endDate\')}',dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true})" style="width:135px!important; height: 15px" />
<pre name="code" class="html"> <b>end:</b> <input <span style="font-family: Arial, Helvetica, sans-serif;">editable="false" id="endDate" class="Wdate" type="text" </span><span style="font-family: Arial, Helvetica, sans-serif;">onFocus="WdatePicker({minDate:'#F{$dp.$D(\'startDate\')}',dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true})" </span><span style="font-family: Arial, Helvetica, sans-serif;">style="width:135px!important; height: 15px" /> </span>
<span>ID:</span><input name="Id" class="easyui-textbox" style="width: 100px">
<span style="white-space:pre"> </span><span>活動類型ID:</span><input name="activeTypeId" class="easyui-textbox" style="width: 100px">
<span style="white-space:pre"> </span><span>isDel:</span> <select id="yesOrNot" class="easyui-combobox" style="width: 80px;" data-options="editable:false"><option value="all">All</option><option value="yes">已刪除</option><option value="no" selected>未刪除</option></select>
<span style="white-space:pre"> </span><span οnclick="doSearch()" class="buttonStyle">search</span> <span οnclick="exportData();" class="buttonStyle">導出</span>
<span style="white-space:pre"> </span><span οnclick="addData();" style="float:right;margin-right:20px" class="buttonStyle">添加</span></form></div><div data-options="region:'center'"style="padding: 6px; background: #eee;" id="centerShow"><table id="grid"></table></div>
<div class="easyui-window" title="update window" id="updateWindow" collapsible="false" minimizable="false" maximizable="true" closed="true" style="top: 20px; left: 200px">
<div region="north" style="height: 31px; overflow: hidden;" split="false" border="false">
<div class="datagrid-toolbar">
<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" style="color: green; font-size: 15px"> <b>submit</b></a>
</div>
</div>
<div region="center" style="overflow: auto; padding: 6px;" border="false">
<form id="updatePlanForm" action="#">
<table class="table-edit" width="95%" align="center">
<tr class="title" style="font-size: 15px">
<th colspan="2" style="font-size: 18px; height: 40px; padding-left: 25px;">拜訪計劃信息
<input type="hidden" name="id" id="Id" />
</th>
</tr>
<tr>
<th style="height: 35px">計劃活動日期</th>
<th style="margin-right:32px"><input name="activity_plan_date" class="Wdate" type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly:true})" style="height: 15px" /></th>
</tr>
<tr>
<th style="height: 35px">計劃審覈狀態</th>
<th><input type="text" name="plan_review_status" id="plan_review_status" class="easyui-numberbox" required="true" min="0" max="1" missingMessage="必須填寫0或1"/></th>
<th>計劃活動類型ID</th>
<th><input type="text" name="activity_type_id" class="easyui-validatebox" data-options="required:true,validType:'multiple[\'equals[32]\',\'RegeMatch\']'" invalidMessage="必輸32個字符或存在非法字符" οnkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/></th>
</tr>
<tr>
<th>計劃活動時長</th>
<th><input type="text" name="activity_duration" class="easyui-numberbox" required="true" min="60" max="21600" invalidMessage="時間在10秒到21600秒"/></th>
</tr>
<tr>
<th style="height: 35px">計劃被拒絕原因</th>
<th><input type="text" name="refuse_reason" class="easyui-validatebox" data-options="required:true,validType:'multiple[\'length[3,100]\',\'RegeMatch\']'" invalidMessage="字符最少3個,最多100個或存在非法字符"/></th>
</tr>
</table>
</form>
</div>
</div>
<div class="easyui-window" title="add window" id="addWindow" collapsible="false" minimizable="false" maximizable="true" closed="true" style="top: 20px; left: 200px">
<div region="north" style="height: 31px; overflow: hidden;" split="false" border="false">
<div class="datagrid-toolbar">
<a id="saveVP" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" style="color: green; font-size: 15px"> <b>submit</b></a>
</div>
</div>
<div region="center" style="overflow: auto; padding: 6px;" border="false">
<form id="addPlanForm" action="#">
<table class="table-edit" width="95%" align="center">
<tr class="title" style="font-size: 15px">
<th colspan="2" style="font-size: 18px; height: 40px; padding-left: 25px;">拜訪計劃信息
<input type="hidden" name="id" id="Id" />
</th>
</tr>
......
</table>
</form>
</div>
</div>
<script type="text/javascript">
$.extend($.fn.validatebox.defaults.rules,{
multiple: {
validator: function (value, vtypes) {
var returnFlag = true;
var opts = $.fn.validatebox.defaults;
for (var i = 0; i < vtypes.length; i++) {
var methodinfo = /([a-zA-Z_]+)(.*)/.exec(vtypes[i]);
var rule = opts.rules[methodinfo[1]];
if (value && rule) {
var parame = eval(methodinfo[2]);
if (!rule["validator"](value, parame)) {
returnFlag = false;
this.message = rule.message;
break;
}
}
}
return returnFlag;
}
} ,
minLength:{
validator:function(value, param){
return value.length >=param[0];
},
message:'請至少輸入(2)個字符.'
},
equals:{
validator:function(value, param){
return value.length == param[0];
},
message:'長度必須爲(2)個字符.'
},
RegeMatch:{
validator:function(value, param){
var pattern = new RegExp("[~'!@#$%^&*()-+_=:]");
return !pattern.test(value);
},
message:'非法字符.'
}
})
</script>
</body>
</html>