EXT.NET年月季筛选条件

最新推荐文章于 2023-07-07 07:20:43 发布

原创最新推荐文章于 2023-07-07 07:20:43 发布 · 497 阅读

0 ·

CC 4.0 BY-SA版权

EXT.NET 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何使用前端技术实现时间选择、数据筛选功能，包括年度、季度和月度查询的实现方法，以及后台代码逻辑，旨在帮助前端开发者提升数据处理能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们的把年月季的控件拉到界面上来：

<ext:ComboBox ID="cbTime" FieldLabel="月/季/年" runat="server" LabelWidth="60" Width="160"
LabelAlign="Right" Editable="false">
<Items>
<ext:ListItem Text="年度查询" Value="0" />
<ext:ListItem Text="季度查询" Value="1" />
<ext:ListItem Text="月查询" Value="2" />
</Items>
<SelectedItems>
<ext:ListItem Text="年度查询" Value="0" />
</SelectedItems>
<Listeners>
<Select Handler="if (records.length > 0) {CbTimeSelect(records[0].data.field1);}">
</Select>
</Listeners>

</ext:ComboBox>

<ext:DateField runat="server" ID="MonthStart" Name="CheckDate" Format="yyyy-MM" Type="Month"
FieldLabel="月" AllowBlank="false" Editable="false" StyleSpec="color:red" LabelAlign="Right"
Width="120" LabelWidth="20" AutoFocus="true">
<Listeners>
<Change Handler="startMonthBuild(item,newValue,oldValue);">
</Change>
</Listeners>
</ext:DateField>
<ext:DateField runat="server" ID="MonthEnd" Name="CheckDate" Format="yyyy-MM" Type="Month"
FieldLabel="至" AllowBlank="false" Editable="false" StyleSpec="color:red" LabelAlign="Right"
Width="120" LabelWidth="20" AutoFocus="true">
<Listeners>
<Change Handler="endMonthBuild(item,newValue,oldValue)">
</Change>
</Listeners>

</ext:DateField>

<ext:ComboBox ID="cbBDate" FieldLabel="年份" runat="server" LabelWidth="35" Width="140"
LabelAlign="Right" Editable="false" Hidden="true" AllowBlank="false">
<Items>
</Items>
<Listeners>
<Change Handler="if(App.cbEDate.getValue() && newValue>App.cbEDate.getValue()){
Ext.Msg.alert('提示', '开始时间不能大于结束时间');
App.cbBDate .clear()
}
" />
</Listeners>
</ext:ComboBox>
<ext:ComboBox ID="cbEDate" FieldLabel="至" runat="server" LabelWidth="20" Width="130"
LabelAlign="Right" Editable="false" Hidden="true" AllowBlank="false">
<Items>
</Items>
<Listeners>
<Change Handler="if(App.cbBDate .getValue() && newValue<App.cbBDate .getValue()){
Ext.Msg.alert('提示', '开始时间不能大于结束时间');
App.cbEDate.clear()
}
" />
</Listeners>
</ext:ComboBox>

然后就是后台的代码了：

//下拉框季度
function quarterBuild() {
App.cbBDate.setValue();
App.cbEDate.setValue();
var length = App.cbBDate.store.data.length;
for (var i = 0; i < length; i++) {
App.cbBDate.removeByIndex(0);
App.cbEDate.removeByIndex(0);
}
var date = new Date();
var year = date.getFullYear();
var quarter = Math.ceil((date.getMonth() + 1) / 3);
var firstQuarter = quarter;
for (var i = 0; i < 12; i++) {
App.cbBDate.addItem(year + "年" + quarter + "季度", year + "" + quarter);
App.cbEDate.addItem(year + "年" + quarter + "季度", year + "" + quarter);
if (i == 0) {
App.cbEDate.setValue(year + "" + quarter, year + "年" + quarter + "季度");
}
if (i == 5) {
App.cbBDate.setValue(year + "" + quarter, year + "年" + quarter + "季度");
}
quarter--;
if (quarter <= 0) {
quarter = 4;
year--;
}
}
}
//下拉框年
function yearBuild() {
App.cbBDate.setValue();
App.cbEDate.setValue();
var length = App.cbBDate.store.data.length;
for (var i = 0; i < length; i++) {
App.cbBDate.removeByIndex(0);
App.cbEDate.removeByIndex(0);
}
var date = new Date();
var year = date.getFullYear();
for (var i = 0; i < 12; i++) {
App.cbBDate.addItem(year + "年", "" + year + "");
App.cbEDate.addItem(year + "年", "" + year + "");
if (i == 0) {
App.cbEDate.setValue("" + year + "", year + "年");
}
if (i == 5) {
App.cbBDate.setValue("" + year + "", year + "年");
}
year--;
}
}
//下拉初始月份
function startMonthBuild(item, newValue, oldValue) {
if (App.MonthEnd.getValue() && newValue > App.MonthEnd.getValue()) {
Ext.Msg.alert("提示", "开始时间不能大于结束时间");
App.MonthStart.clear();
}
else {
var year = newValue.getFullYear();
var month = newValue.getMonth() + 1;
App.hideMonthStart.value = year + "" + month;
}
}
//下结束月份
function endMonthBuild(item, newValue, oldValue) {
if (App.MonthStart.getValue() && newValue < App.MonthStart.getValue()) {
Ext.Msg.alert("提示", "开始时间不能大于结束时间");
App.MonthEnd.clear();
}
else {
var year = newValue.getFullYear();
var month = newValue.getMonth() + 1;
App.hideMonthEnd.value = year + "" + month;
}
}
// 下拉框月/年/季度
function CbTimeSelect(type) {
if (type == "2") {
App.cbBDate.hide();
App.cbEDate.hide();
App.MonthStart.show();
App.MonthEnd.show();
} else if (type == "0") {
App.cbBDate.setFieldLabel("年");
App.MonthStart.hide();
App.MonthEnd.hide();
App.cbBDate.show();
App.cbEDate.show();
yearBuild();
}
else {
App.cbBDate.setFieldLabel("季度");
App.MonthStart.hide();
App.MonthEnd.hide();
App.cbBDate.show();
App.cbEDate.show();
quarterBuild();
}
}

取值直接名称.value即可。