今天在开发的过程中，其中一个任务期次的输入查询是按年份+季度的格式来输入的，比如2013年第一季度则用201301来显示，输入框是用date。大致思路是用日期框生成yyyyMM格式的日期，然后实时监听日期框的值，如果有改变则读取值，然后将值进行字符串处理成yyyy+季度格式数据，其中为了防止实时监听的死循环，加入了一个ischanged变量来控制。实现代码如下：
设置一个全局变量，用来记录是否改变过值，为了防止死循环用；
var isChanged = true;
绑定实时监听的代码实现
$("#taskTerm").bind('input propertychange', function() {
//为了防止出现死循环，延迟一秒后在改变值 设置isChanged变量
if(isChanged){
isChanged = false;
var taskTermVal = $(this).val();
var taskTerm;
if(taskTermVal == ""){
return;
}else {
var monthVal = taskTermVal.substring(4,6);
var yearVal = taskTermVal.substring(0,4);
if(monthVal.localeCompare("01") >= 0 && monthVal.localeCompare("03") <= 0){
taskTerm = yearVal + "01";
}else if(monthVal.localeCompare("04") >= 0 && monthVal.localeCompare("06") <= 0){
taskTerm = yearVal + "02";
}else if(monthVal.localeCompare("07") >= 0 && monthVal.localeCompare("09") <= 0){
taskTerm = yearVal + "03";
}else {
taskTerm = yearVal + "04";
}
$("#taskTerm").ligerGetDateEditorManager().setValue(taskTerm);
}
//为了防止出现死循环，延迟0.5秒后在改变值
setTimeout("setIsChanged()", 500 );
}
});
日期框的格式化：
$("#taskTerm").ligerDateEditor({
format: "yyyyMM"
});
改变ischanged变量值的函数
function setIsChanged(){
isChanged = true;
}
这样就实现了年份季度这种日期格式的设置。
贴一下整个页面代码
<script type="text/javascript">
var result;
var isChanged = true;
var isChanged2 = true;
$(function() {
$.get("/mmwp/mmwp/report.do?method=getTqList",loadGrid);
function loadGrid(data){
result = $.secureEvalJSON(data);
window['gridTq'] = $("#grid1").ligerGrid({
columns : getGrid1Columns(),
data : result.TQList,
allowHideColumn : false,
width : '100%',
rownumbers : false,
pageSize:20,
rownumbers:true,
onDblClickRow : viewTQ,
toolbar: { items: [
{ text: '查看详细', click: itemclick, icon: 'search'} ,
{ line: true },
{text: '高级自定义查询', click: searchMore, icon: 'search2'}
]
}
});
}
$('#tqSearch').bind('click', function(){
var tqTypeVal = $("#tqType").ligerComboBox().getValue();
var taskNameVal = $("#taskName").ligerGetTextBoxManager().getValue();
var fillinDeptVal = $("#fillinDept").ligerGetTextBoxManager().getValue();
var fillinPersonVal = $("#fillinPerson").ligerGetTextBoxManager().getValue();
var taskTermVal = $("#taskTerm").val();
var taskTermVal2 = $("#taskTerm2").val();
$.get("/mmwp/mmwp/report.do?method=getTqList",
{
tqType: encodeURIComponent(tqTypeVal),
taskName: encodeURIComponent(taskNameVal),
fillinDept: encodeURIComponent(fillinDeptVal),
fillinPerson: encodeURIComponent(fillinPersonVal),
taskTerm: encodeURIComponent(taskTermVal),
taskTerm2: encodeURIComponent(taskTermVal2)
},
loadGrid);
});
$("#taskTerm").bind('input propertychange', function() {
//为了防止出现死循环，延迟一秒后在改变值 设置isChanged变量
if(isChanged){
isChanged = false;
var taskTermVal = $(this).val();
var taskTerm;
if(taskTermVal == ""){
return;
}else {
var monthVal = taskTermVal.substring(4,6);
var yearVal = taskTermVal.substring(0,4);
if(monthVal.localeCompare("01") >= 0 && monthVal.localeCompare("03") <= 0){
taskTerm = yearVal + "01";
}else if(monthVal.localeCompare("04") >= 0 && monthVal.localeCompare("06") <= 0){
taskTerm = yearVal + "02";
}else if(monthVal.localeCompare("07") >= 0 && monthVal.localeCompare("09") <= 0){
taskTerm = yearVal + "03";
}else {
taskTerm = yearVal + "04";
}
$("#taskTerm").ligerGetDateEditorManager().setValue(taskTerm);
}
//为了防止出现死循环，延迟0.5秒后在改变值
setTimeout("setIsChanged()", 500 );
}
});
$("#taskTerm2").bind('input propertychange', function() {
//为了防止出现死循环，延迟一秒后在改变值 设置isChanged2变量
if(isChanged2){
isChanged2 = false;
var taskTermVal2 = $(this).val();
var taskTerm2;
if(taskTermVal2 == ""){
return;
}else {
var monthVal2 = taskTermVal2.substring(4,6);
var yearVal2 = taskTermVal2.substring(0,4);
if(monthVal2.localeCompare("01") >= 0 && monthVal2.localeCompare("03") <= 0){
taskTerm2 = yearVal2 + "01";
}else if(monthVal2.localeCompare("04") >= 0 && monthVal2.localeCompare("06") <= 0){
taskTerm2 = yearVal2 + "02";
}else if(monthVal2.localeCompare("07") >= 0 && monthVal2.localeCompare("09") <= 0){
taskTerm2 = yearVal2 + "03";
}else {
taskTerm2 = yearVal2 + "04";
}
$("#taskTerm2").ligerGetDateEditorManager().setValue(taskTerm2);
}
//为了防止出现死循环，延迟0.5秒后在改变值
setTimeout("setIsChanged2()", 500 );
}
});
$("#taskTerm").ligerDateEditor({
format: "yyyyMM"
});
$("#taskTerm2").ligerDateEditor({
format: "yyyyMM"
});
})
function setIsChanged(){
isChanged = true;
}
function setIsChanged2(){
isChanged2 = true;
}
function viewTQ(data){
if( data.REPORTTYPE == 'T-Q-1'){
window.open("reportTq1.jsp?taskId="+data.TASKID,"","scrollbars=yes,status=yes,resizable=no,top=0,left=0,width="+(screen.availWidth-10)+",height="+(screen.availHeight-30));
}else if( data.REPORTTYPE == 'T-Q-2'){
window.open("reportTq2.jsp?taskId="+data.TASKID,"","scrollbars=yes,status=yes,resizable=no,top=0,left=0,width="+(screen.availWidth-10)+",height="+(screen.availHeight-30));
}else if( data.REPORTTYPE == 'T-Q-3'){
window.open("reportTq3.jsp?taskId="+data.TASKID,"","scrollbars=yes,status=yes,resizable=no,top=0,left=0,width="+(screen.availWidth-10)+",height="+(screen.availHeight-30));
}else if( data.REPORTTYPE == 'T-Q-4'){
window.open("reportTq4.jsp?taskId="+data.TASKID,"","scrollbars=yes,status=yes,resizable=no,top=0,left=0,width="+(screen.availWidth-10)+",height="+(screen.availHeight-30));
}else if( data.REPORTTYPE == 'T-Q-5'){
window.open("reportTq5.jsp?taskId="+data.TASKID,"","scrollbars=yes,status=yes,resizable=no,top=0,left=0,width="+(screen.availWidth-10)+",height="+(screen.availHeight-30));
}else {
$.ligerDialog.warn('该报表类型不是非现场报表，不能查看！');
}
}
function itemclick(){
var data = gridTq.getSelectedRow();
if(data == null){
$.ligerDialog.warn('请先选择要查看的报表！');
}else {
viewTQ(data);
}
}
function searchMore(){
gridTq.options.data = result.TQList;
gridTq.showFilter();
}
function reset(){
$("#tqType").ligerComboBox().setValue("");
$("#taskName").ligerGetTextBoxManager().setValue("");
$("#fillinDept").ligerGetTextBoxManager().setValue("");
$("#fillinPerson").ligerGetTextBoxManager().setValue("");
$("#taskTerm").ligerGetDateEditorManager().setValue("");
$("#taskTerm2").ligerGetDateEditorManager().setValue("");
}
function getGrid1Columns() {
return [ {
display : '任务名称',
name : 'TASKNAME',
width : 120,
align : 'left'
},{
display : '报表类型',
name : 'REPORTTYPE',
width : 60,
align : 'left'
},{
display : '填报部门',
name : 'FILLINDEPT',
width : 100,
align : 'left'
},{
display : '填报人',
name : 'FILLINPERSON',
width : 60,
align : 'left'
},{
display : '填报时间',
name : 'CREATEDATE',
width : 80,
align : 'left'
},{
display : '联系电话',
name : 'TELEPHONE',
width : 100,
align : 'left'
},{
display : '责任人',
name : 'RESPERSON',
width : 60,
align : 'left'
},{
display : '任务期次',
name : 'TASKTERM',
width : 60,
align : 'left'
},{
display : '文件名称',
name : 'FILENAME',
width : 200,
align : 'left',
render : function(record, rowindex, value, column) {
if (record.FILEPATH != '' && record.FILEPATH != null) {//如果选择其他，会有备注信息
value = "<a href = \"/mmwp/mmwp/file.do?method=downLoadFile&filePath= " + record.FILEPATH + "\" >" + value + "</a>"
}
return value; //返回此单元格显示的HTML内容(一般根据value和row的内容进行组织)
}
}
];
}
</script>
</head>
<body style="padding: 6px; width: 90%; height: 100%;">
<div id="form1" class="liger-form">
<table cellpadding="0" cellspacing="0" class="l-table-edit" >
<tr>
<td align="right" class="l-table-edit-td" width="80">TQ类型:</td>
<td align="left" class="l-table-edit-td">
<select name="tqType" id="tqType" ltype="select" >
<option value="">ALL</option>
<option value="T-Q-1">TQ1</option>
<option value="T-Q-2">TQ2</option>
<option value="T-Q-3">TQ3</option>
<option value="T-Q-4">TQ4</option>
<option value="T-Q-5">TQ5</option>
</select>
</td>
<td align="left"></td>
<td align="right" class="l-table-edit-td" width="80">任务名称:</td>
<td align="left" class="l-table-edit-td"><input name="taskName" type="text" id="taskName" ltype="text" /></td>
<td align="left"></td>
<td align="right" class="l-table-edit-td" width="80">填报部门:</td>
<td align="left" class="l-table-edit-td"><input name="fillinDept" type="text" id="fillinDept" ltype="text" /></td>
<td align="left"></td>
<td align="right" class="l-table-edit-td" width="80">填报人:</td>
<td align="left" class="l-table-edit-td"><input name="fillinPerson" type="text" id="fillinPerson" ltype="text" /></td>
<td align="left"></td>
</tr>
<tr>
<td align="right" class="l-table-edit-td">任务期次:</td>
<td align="left" class="l-table-edit-td">
<input name="taskTerm" type="text" id="taskTerm" ltype="date" />
</td><td align="left"></td>
<td align="center" class="l-table-edit-td" width="80">至:</td>
<td align="left" class="l-table-edit-td">
<input name="taskTerm2" type="text" id="taskTerm2" ltype="date" />
</td><td align="left"></td>
</tr>
</table>
<font color="red">(提示：2013年第一季度则期次为201301)</font>
<div align="center">
<input type="button" value="查询" id="tqSearch" class="l-button " />
<input type="reset" value="重置" class="l-button" onclick="reset();" />
</div>
</div>
<div id="grid1" style="margin-top: 20px; padding: 0; float: left;"></div>
<div style="display: none;"></div>
</body>
</html>
相关推荐
jquery+ligerUI+文档+demo，里面有文档，中文的，还有许多demo jquery+ligerUI+文档+demo，里面有文档，中文的，还有许多demo jquery+ligerUI+文档+demo，里面有文档，中文的，还有许多demo jquery+ligerUI+文档+...
这个项目主要是用于设计通用权限管理系统，使用了springmvc + mybatis + ligerui + html + javascript + css等技术.zip 适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关项目/竞赛学习等。 ...
ligerUI的日期控件，原来的不支持秒，改成支持秒
JQuery+easyUI+ligerUI工具包+中文api，为了方便大家使用，这里本人将收集的一些js框架汇在一起，里面包括了工具包及中文帮助文档，有需要请下载
ligerui-LigerUI
使用LigerUI的Grid和Java的Json实现数据显示
最详细的LigerUI帮助文档，附带bootstrap
ligerui-LigerUI-Release Demo，是整个Web ERP开发系统的Demo来的；不管是新鸟还是老鸟；拥有这个demo，保证能帮你很大忙，希望能帮到你！！
Ligerui Table 导出excel表格 （基于jquery） 1.支持原样式导出 2.支持带图片导出 3.支持固定行固定列导出
ligerUI Tree对checkbox的禁用，设置成只读，只要早jsp中引入此文件即可。
ligerui-LigerUI-V1.2.5 界面开发框架整套框架 新版本集成列表，编辑以及框架图标与一体
基于LigerUI前端技术实现的管理平台(纯静态页面,json,工作流及权限管理)
Ligerui Grid合并单元格 ,指定列合并单元格，该合并是整列合并
一套免费,强大的UI JQUERY API 中文手册
西瓜定制LigerUi基于LigerUi二次开发的
实际项目,修改数据库文件和对应的配置就能够自动生成数据库,可运行,springMVC的各种使用方式和aop的切面配置均可见到,里面spring4和hibernate4的整合配置弄了两天才解决,绝对物有所值
ligerui
源码实现了ligerui中grid行颜色控制,列隐藏保存。
jQuery LigerUI 是基于jQuery的一系列UI控件组合，简单而又强大，致力于快速打造Web前端界面解决方案。 因为是前端控件，跟服务器无关，可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K...
ligerUI 教程API手册，方便查询