今天在开发的过程中,其中一个任务期次的输入查询是按年份+季度的格式来输入的,比如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" οnclick="reset();" /> </div> </div> <div id="grid1" style="margin-top: 20px; padding: 0; float: left;"></div> <div style="display: none;"></div> </body> </html>