今天在开发的过程中，其中一个任务期次的输入查询是按年份+季度的格式来输入的，比如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 Grid将自动从指定的URL获取JSON数据，并根据配置的列信息进行渲染。如果数据发生变化，只需重新调用Grid的`loadData`方法即可刷新表格。 在实际开发中，你可能还需要关注以下方面： - 错误...
ligerUI的日期控件，原来的不支持秒，改成支持秒
3. **数据绑定**：LigerUI支持数据绑定，可以方便地与后端数据源进行交互，实现动态数据展示和更新，减轻开发者的工作负担。 4. **事件驱动**：LigerUI遵循事件驱动模型，允许开发者通过监听和处理事件来控制用户...
LigerUI是一款基于JavaScript和CSS3的开源前端框架，它为开发者提供了丰富的UI组件和便捷的API接口，用于快速构建用户界面。此压缩包包含了LigerUI的全套源代码、API文档以及示例，旨在帮助开发者深入理解其内部工作...
在"jQuery ligerUI Demos 导航页、菜单栏"这个主题中，我们将深入探讨ligerUI如何实现导航页和菜单栏的功能。 首先，导航页是Web应用中不可或缺的部分，它帮助用户在不同的页面间进行切换，提供清晰的网站结构。...
`ligerui-LigerUI-Release.zip`包含了ligerUI的完整包，`jQuery ligerUI API.chm`是ligerUI的API文档，对于深入学习和使用ligerUI至关重要。 `JavaScript 中文版.chm`是JavaScript的基础语言参考文档，对理解所有...
LigerUI是一款强大的JavaScript界面开发框架，主要用于构建高效、易用且美观的Web应用程序。它的V1.2.5版本提供了全面的组件和功能，帮助开发者实现列表、编辑和图标等界面元素的一体化集成。在这款压缩包“ligerui-...
在IT行业中，数据展示和处理是一项重要的任务，而LigerUI Table是一款强大的jQuery插件，专为网页数据展示提供解决方案。LigerUI Table不仅具备基本的表格功能，如排序、筛选、分页，还提供了丰富的扩展特性，如导出...
**jQuery LigerUI 中文 API 知识点详解** jQuery LigerUI 是一款基于 jQuery 的前端组件库，它提供了一套完整的用户界面解决方案，适用于快速构建功能丰富的 Web 应用程序。LigerUI 包含了大量的组件，如表格、表单...
ligerUI的设计理念是简洁、高效，使得开发者能够轻松地实现各种界面效果，提高开发效率。 ligerUI的核心特性包括： 1. **组件丰富**：ligerUI提供了如表格（Grid）、表单（Form）、下拉框（ComboBox）、树形控件...
【西瓜定制LigerUi】是针对原生的LigerUi框架进行二次开发的产物，旨在满足特定项目或团队对于用户界面和交互体验的个性化需求。LigerUi是一款强大的JavaScript前端框架，它提供了丰富的UI组件和功能，使得开发者...
本文实例讲述了asp.net+Ligerui实现grid导出Excel和Word的方法。分享给大家供大家参考，具体如下： 下面采用的导EXCEL方法，适合不翻页的grid，而且无需再读一次数据库，对于翻页的grid来说，要导全部，当然后台要再...
ligerUI 教程API手册，方便查询
LigerUI是一个强大的JavaScript UI库，专为构建企业级Web应用程序而设计。它提供了一系列丰富的组件和工具，帮助开发者创建用户界面时节省时间和精力。LigerUI的核心特性在于其易于使用、高度可定制以及对各种浏览器...
例如，使用$.ajax()方法进行异步请求，结合LigerUI的对话框组件显示加载进度，可以提供良好的用户体验。此外，LigerUI的插件机制允许开发者扩展和定制功能，满足特定项目需求。 总之，jQuery和LigerUI V1.3.3是Web...
LigerUi的源代码结构清晰，注释详尽，便于开发者进行定制和优化。通过研究源代码，我们可以了解其内部工作原理，学习如何扩展新的组件，或者改进现有组件的性能。这使得LigerUi不仅是一个工具，更是提升开发者技能的...
**Source** 文件夹通常包含LigerUI 1.2.5 的源代码，这对于开发者深入理解框架的内部工作机制，以及进行自定义修改和扩展非常有用。源代码可能包括JavaScript文件，这些文件定义了LigerUI的各种组件和功能；CSS样式...
利用LigerUI的组件，可以快速实现数据录入、查询、展示等功能，同时，通过jQuery的Ajax功能，实现前后端数据的无缝对接。 五、总结 jQuery+LigerUI前端框架以其强大的功能和良好的用户体验，成为了众多开发者的选择...