<%@page import="java.text.DateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="org.springside.modules.security.springsecurity.SpringSecurityUtils" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ include file="/common/globle.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>服务卡列表</title>
<%@ include file="/common/csslib.jsp" %>
<%@ include file="/common/jslib.jsp" %>
<jsp:useBean id="now" class="java.util.Date" /> [d1]
<script src="${ctx}/js/busiservicecard/servicecard.js" type="text/javascript"></script>
<script type="text/javascript">
var gridManager = null;
var activeDialog = null;
var currUserId='<%=currUserId%>';
function f_openWindow(url, title, width, height)
{
var dialogOptions = { width, height: height, title: title, url: url, buttons: [
{ text: '保存', onclick: function (item, dialog)
{
dialog.frame.f_save();
}
},
{ text: '关闭', onclick: function (item, dialog)
{
dialog.close();
}
}
], isResize: true, timeParmName: 'a'
};
activeDialog = parent.jQuery.ligerDialog.open(dialogOptions);
}
function f_closeWindow(reload)
{
activeDialog && activeDialog.close();
reload && f_reload();
}
$(function ()
{
f_setGrid();
});
var toolbarOptions = {
items: [
{ text: '导出', click:f_btnClick,id:"export" , img:"${ctx}/js/ligerUI/skins/icons/excel.png"},
{ line: true },
{ text: '分配', click:f_btnClick,id:"delivery" , img:"${ctx}/js/images/add.png"},
{ line: true },
{ text: '重置', click:f_btnClick,id: "reset", img:"${ctx}/js/images/page_edit.png"},
{ line: true },
{ text: '作废', click:f_btnClick,id: "invalid", img:"${ctx}/js/images/page_edit.png"}
]
};
/**
* 查询按钮
*/
var toolbarOptionsquery = {
items : [
{
text : '查询',click : f_query,id : "querydetail",img : "${ctx}/js/ligerUI/skins/icons/find.gif"},
{text : '清空',click : f_queryClear,id : "queryclear",img : "${ctx}/js/ligerUI/skins/icons/clear.png"}
]};
/**
*清空按钮操作
*/
function f_queryClear(){
$("#company").val('');
$("#companyname").ligerTextBox().setValue('选择商家'); [d2]
$("#startno").ligerTextBox().setValue('起始卡号'); [d3]
$("#endno").ligerTextBox().setValue('终止卡号');
$("#startdate").ligerGetDateEditorManager().setValue('<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="yyyy-MM-dd"/>');
$("#enddate").ligerGetDateEditorManager().setValue('<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="yyyy-MM-dd"/>');
$("#staytime").ligerTextBox().setValue('---滞留时长---');
$("#memo").ligerTextBox().setValue('备注');
//清空复选框
$("#status").val('');
$("#status").ligerGetComboBoxManager().selectValue('--全部（状态）--');
$("#status").ligerGetComboBoxManager().bulidContent();
$("#status").blur();
$("#staytime").val('');
$("#staytime").ligerGetComboBoxManager().selectValue('---滞留时长---');
$("#staytime").ligerGetComboBoxManager().bulidContent();
$("#staytime").blur();
}
function f_query(){
var companyid=$("#company").val();
if(companyid=="选择商家"){
companyid="";
}
var status=$("#statusid").val();
if(status=="--全部（状态）--"){
status="";
}
var memo=$("#memo").val();
if(memo=="备注"){
memo="";
}
var staytime = $('#staytime').val();
if(staytime=="---滞留时长---"){
staytime="-1";
}
var startno=$("#startno").val();
var endno=$("#endno").val();
if(startno=="起始卡号"){
startno="";
}
if(endno=="终止卡号"){
endno="";
}
if(endno!="终止卡号"){
endno=endno.replace(/^0*/,""); }
var startDate=$("#startdate").val();
var endDate=$("#enddate").val();
gridManager.setOptions( {
parms : [
{
name: 'filter_EQS_querydate',
value: "'"+startDate+" 00:00:00' and "+"'"+endDate+" 23:59:59'"
},
{
name :'filter_EQS _companyid',
value :companyid
},
{
name : 'filter_EQI_staytime',
value : staytime
},
{
name:'filter_EQS_cardno',
value :startno+" and "+endno[d11]
},
{
name : 'filter_EQS_status',
value : status
},
{
name:'filter_LIKES_memo',
value: memo
}
],
newPage :1
});
gridManager.loadData(true);
}
var toolbar = {
};
$(function ()
{
var layout = $("#layout").ligerLayout( {
leftWidth : 200
});
//查询条件
$("#searchbar").ligerToolBar(toolbar);
$("#searchbar").before("<div style='margin-left:4px;' class='l-toolbar-item'><table border='0'><tr>"+
"<td style='margin-top:0px;margin-bottom:0px;'><input type='text' name='startno' id='startno' value='起始卡号' size='13' onblur="if(this.value=='') value='起始卡号';" onfocus="if(this.value=='起始卡号') value='';" style=''/></td>"+
"<td style='text-align:center;'> 至 </td><td><input type='text' name='endno' id='endno' value='终止卡号' size='13' onblur="if(this.value=='') value='终止卡号';" onfocus="if(this.value=='终止卡号') value='';" style=''/></td>"+
"<td> </td><td><input type='text' name='companyname' id='companyname' onclick='f_findComapny()[d13] ;' size='15' value='选择商家' onblur='changeCompany(this);'/>[d14] <input type='hidden' name='company' id='company' value='-1'/></td>"+
"<td> </td><td><input type='text' name='memo' id='memo' value='备注' onblur="if(this.value=='') value='备注';" onfocus="if(this.value=='备注') value='';" style=''/></td><td> </td>"+
"<td> </td><td><input type='text' name='status' id='status' value='--全部（状态）--' onblur="if(this.value=='') value='--全部（状态）--';" onfocus="if(this.value=='--全部（状态）--') value='';" style=''/></td>"+
"<td> </td><td style='text-align:right;font-weight:680;'> </td><td><select id='staytime' style='100%;'><option value='-1'>---滞留时长---</option><option value='60'>60</option><option value='80'>80</option><option value='120'>120</option></select>[d15] </td>"+
"<td> </td></tr></table></div>");
$("#toptoolbarquery").ligerToolBar(toolbarOptionsquery[d16] );
$("div[toolbarid='querydetail']","#toptoolbarquery").before("<div style='margin-top:4px' class='l-toolbar-item'><table><tr>"+
"<td></td><td><input type='text' name='startdate' id='startdate' ltype='date' onblur="if(this.value=='') value='';" onfocus="if(this.value=='') value='';" style=''/></td>" +
"<td style='text-align:center;'> 至 </td><td><input type='text' name='enddate' id='enddate' ltype='date' onblur="if(this.value=='') value='';" onfocus="if(this.value=='') value='';" style=''/></td></tr></table></div>");
f_setGrid();
$("#startdate").ligerDateEditor({labelWidth: 80, labelAlign: 'left', 120});
$("#startdate").ligerGetDateEditorManager().setValue('<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="yyyy-MM-dd"/>');
$("#enddate").ligerDateEditor({labelWidth: 80, labelAlign: 'left',120});
$("#enddate").ligerGetDateEditorManager().setValue('<fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="yyyy-MM-dd"/>');
$("#startno").ligerTextBox({Width:120,Height:5});
$("#endno").ligerTextBox({Width:120,Height:5});
$("#staytime").ligerComboBox({Width:120,Height:5});
$("#companyname").ligerTextBox({Width:120,Height:5});
$("#memo").ligerTextBox({Width:120,Height:5});
});
function f_setGrid()
{
//初始化状态
$("#status").ligerComboBox({ isShowCheckBox: false,
isMultiSelect: true,
width : 150,
selectBoxWidth : 150,
[d18] selectBoxHeight : 200,
data: [
{ text: '已分配', id: '0' [d19] },
{ text: '已使用', id: '1' },
{ text: '申请作废', id: '2' },
{ text: '已作废', id: '3' },
{ text: '作废失败', id: '4' },
{ text: '已结算', id: '5' }
], valueFieldID : 'statusid',label:'选择性别',labelWidth:200,labelAlign:'center'
});
gridManager = $("#maingrid").ligerGrid({
columns: [
{ display: 'id', name: 'srvcardid', align: 'center', 40, minWidth: 40},
{ display: '服务卡号', name: 'cardno', align: 'center', 100},
{ display: '发卡日期', name: 'publishdate', align: 'center', 100,render:function(row){
return row.publishdate.slice(0,10);
}
},
{ display: '服务商家', name: 'companyname', 290,render:function(row){
if(row.company!=null){
return row.company.companyname;
}else{
return "";
}
}},
{ display: '滞留时长(天)',name: 'staytime',140,render:function(row){
if(row.status==0&&row.staytime!=0&&row.staytime>=0){
return row.staytime;
}else{
return "0";
}
}},
{ display: '状态', name: 'status', 140,render:function(row){
if(row.status==0){
return "已分配";
}else if(row.status==1){
return "已使用";
}else if(row.status==2){
return "申请作废";
}else if(row.status==3){
return "已作废";
}else if(row.status==4){
return "作废失败";
}else if(row.status==5){
return "已结算";
}
}},
{ display:'备注信息',name: 'memo', 290,render:function(row){
if(row.memo==null){
return " ";
}else {
return row.memo;
}
}
}
], dataAction: 'server',enabledSort:false,
url: "busiservicecard!getList.action",toolbar: toolbarOptions, sortName: 'srvcardid',
parms: [],
'99.8%', height: '100%', pageSize: 30,
checkbox: true,
frozenCheckbox : false,
frozenRownumbers :false,
fixedCellHeight :false,
rownumbers :true,
heightDiff: -9,
frozenCheckbox : false,
rownumbers :true,
onError: function (a, b)
{
}
});
}
function f_reload()
{
gridManager && gridManager.loadData(true);
$("#startno").focus();
}
//搜索框初始化
$(function(){
var layout1 = $("#layout1").ligerLayout( {
height:65,
topHeight:65
});
$(".content").hide(); //隐藏所有主体内容
$('.s').toggle(function(){
//选择class为s的元素,并添加toggle方法
//toggle方法可以切换元素的可见状态,如可见便切换隐藏,反之亦然
$(this).parent().nextAll('.content').slideDown();
$("#myimg").attr("src","${ctx }/js/ligerUI/skins/icons/up.png");
//给当前元素添加文本"隐藏",并找到父级元素之后的所有同辈元素.并添加向下展开效果
},function(){
$(this).parent().nextAll('.content').slideUp();
$("#myimg").attr("src","${ctx }/js/ligerUI/skins/icons/down.png");
//给当前元素添加文本"展开",并找到父级元素之后的所有同辈元素.并添加向上收缩效果
});
});
</script>
<style type="text/css">
.l-toolbar
{ height:30px;
}
.l-toolbar-item
{
margin-top:4px;
}
</style>
<style>
.title{ font-size:12px; font-weight:bold; text-indent:10px; line-height:25px; margin-top:2px; background:white; border:2px; }
.title span{ float:right; font-size:12px; margin-right:10px; color:block; cursor:pointer;}
.navline{height:1px;100%;border-bottom:1px solid #f5f5f5;background-color:#D9D9D9;margin-bottom:4px; margin-top:2px;}
</style>
</head>
<body style="padding: 0px; height: 100%;">
<!-- 搜素框 begin-->
<div class="title"><img src="${ctx}/js/ligerUI/skins/icons/search.gif"></img> 搜索<span class="s"><img id="myimg" src="${ctx }/js/ligerUI/skins/icons/down.png"/></span></div>
<div class="navline"></div>
<div class="content">
<div id="layout1" >
<div position="top" style="position: absolute; 100%; overflow-y: auto;" >
<div id="searchbar" ></div>
<div id="toptoolbarquery"></div>
[d21] </div>
</div>
</div>
<!-- 搜索框 end -->
<input id="date" name="date" type="hidden"/>
<div id="toolbarquery"></div>
<div id="maingrid"></div>
</body>
</html>
最终效果图:
补充：
在父窗体调用子窗体的f_select方法
function f_findContactOK (item , dialog) {
var fn = dialog.frame.f_select || dialog.frame.window.f_select;
var data = fn();
if (!data) {
alert('请选择行!');
return;
}
var idStr = "";
var idName ="";
$(data).each(function(i,item){
idStr += item.companyid[d25] ;
idName += item[d26] .companyname[d27] ;
if (i < data.length - 1) idStr += ",";[d28]
if (i < data.length - 1) idName += ",";
});
$("#companyname").val(idName);
$("#company").val(idStr); [d29]
dialog.close();
}
/**
* 选择所属商家
*/
function f_findComapny() {
$.ligerDialog.open[d30] ({
title : '选择商家',
name : 'winselector',
width : 550,
height : 450,
url : '../business/busiservicecard!company.action',
buttons : [ {
text : '确定',
onclick[d31] : f_findContactOK//这样调的方法
}, {
text : '取消',
onclick : f_findContactCancel
} ]
});
return false;
}
[d1]初始化日期控件需要导入的类
[d2]清空子窗体的checked数据
[d3]清空普通input输入框的数据
[d4]清空时间，即初始化当然时间控件为当前日期
[d5]清空复选下拉框
[d6]清空单选下拉框
[d7]点击查询按钮，选判断input里面的值，如果没变就重新给companyid付值为空，这样在manager里面不会进hql语句
[d8]把008032转换为8032
[d9]点击查询按钮，把时间控件里的值传到后台，通过filter。不需要在action里面炒作，只需要在manager里面通过filtervalue和filtername取值
[d11]这一个区间有两个自段
起止卡号区间，用这种方式在jsp页面把两个字段拼成一个新的字符串，传给后台
[d12]LigerUI自带参数，添加newPage：1表示每次技术查询到第N页，不刷新的情况下点击查询按钮，仍然可以重第一页开始查
[d13]点击文本框弹出子窗体，可以在子窗体任意选择多个商家，然后需要把商家名字：companyname和商家idcompanyid返回到父窗体。
思路：
1、 在父窗体
1） f_findComapny方法，进一个空action弹出子页面busiservicecard-company.jsp
2） 调子窗体的f_select方法
var fn = dialog.frame.f_select || dialog.frame.window.f_select
2、在子窗体
1）列出商家
2）获得选中的商家名称和id
//获取选中的行
function f_select()
{
//var rowsdata=g.getSelectedRow();
var rowsdata=g.getCheckedRows();
return rowsdata;
}
g表示展示子窗体显示商家的gridview控件别名
getCheckedRows（）获得多个选中的checkbox；而getSelectedRow只能获得一条
return rowsdata表示返回选中的值到父页面。父页面字需要调用这个f_select()方法就可以了。当然掉的方式很特殊：var fn = dialog.frame.f_select || dialog.frame.window.f_select;
frame表示子窗体。
[d15]单选下拉框
[d16]绑定toolbar工具栏eg：查询、清除、导出按钮在上面
[d17]状态id，初始化起绑定作用。
[d18]一般设一样宽，这样下拉框和他的文本框一样宽，好看。
[d19]Text是显示值，id是传给后台的值
[d20]取下拉框选中的多个值，就取它对应的值
[d21]两个工具栏，toolbar
[d22]子窗体的ok按钮事件
[d23]表示回调函数返回的对象
[d24]LG.js里面的一个空方法，实质上他调的是dialog.frame.f_select返回的值是个data
[d25]商家id，对应数据库里面的字段名
[d27]商家名称
[d28]拼成一个带逗号的字符串eg：1,2,3，
[d29]把得到的字符串，付值给之前申明的文本框
[d30]以dialog对话框的形式弹出子页面不是f_open，所以是在子页面自己窗体上写确定按钮。而不是父窗体
[d31]触发确定按钮事件