目的: V80202 過濾欄位 - 多個欄位挑選其中一欄當過濾條件 - filter
- 顯示資料 - 依過濾欄位值,過濾資料
處理說明:- 顯示資料 - 依過濾欄位值,過濾資料
1>建立過濾條件1/2/3:
var cmp_filter1 = get_cmp_filter1("過濾條件1", "s_filter1", 80, 80, Tmp_Store);
var cmp_filter2 = get_cmp_filter1("過濾條件2", "s_filter2", 80, 80, Tmp_Store);
var cmp_filter3 = get_cmp_filter1("過濾條件3", "s_filter3", 80, 80, Tmp_Store);
{ value: "ECNO", displayName: "EO ECN", },
{ value: "PROCWC", displayName: "生產工廠", },
{ value: "PN", displayName: "件號", },
{ value: "AMMNO", displayName: "AMM單號", },
]
}
3>若已挑選選項,則其他過濾條件不含該選項
var cmp_filter2 = get_cmp_filter1("過濾條件2", "s_filter2", 80, 80, Tmp_Store);
var cmp_filter3 = get_cmp_filter1("過濾條件3", "s_filter3", 80, 80, Tmp_Store);
2>建立過濾條件的選項內容(store):
//combo 選項
var Tmp_Store = Ext.create("Ext.data.Store", {
fields: ["value", "displayName"],
data: [
{ value: "ECNO", displayName: "EO ECN", },
{ value: "PROCWC", displayName: "生產工廠", },
{ value: "PN", displayName: "件號", },
{ value: "AMMNO", displayName: "AMM單號", },
]
}
3>若已挑選選項,則其他過濾條件不含該選項
var onSelect = function (combo, records) {
var record = records[0] || records;
var cur_value = record.get("value");
// 更新 selectedValues 對象
if (cur_value != '') {
selectedValues[combo.id] = cur_value;
} else {
selectedValues[combo.id] = null; //挑選到"請選擇"要清空已選中的選項
console.log("selectedValues:", selectedValues);
};
//更新其他下拉列表的選項,store 的內容<>目前過濾條件的挑選值且store 的內容<>目前挑選值
var Tmp_filter_Ary = ['s_filter1', 's_filter2', 's_filter3']; //過濾條件的 Array
Tmp_filter_Ary.forEach(function (id) {
if (id !== combo.id) { //其他過濾條件
var otherCombo = Ext.getCmp(id);
otherCombo.getStore().clearFilter(); //清除 store.filter 內容
otherCombo.getStore().filterBy(function (record) {
//filterBy function , 若為 true ,則包含該選項
//若store值= 目前挑選值，則不加入
var Tmp_isAdd = true;
if (record.get('value') == cur_value)
Tmp_isAdd = false;
//若store值= 已挑選欄位值，則不加入
var selectedValues_Ary = Object.keys(selectedValues).map((key) => [key, selectedValues[key]]);
for (i = 0; i < selectedValues_Ary.length; i++) {
if (record.get('value') == selectedValues[i])
Tmp_isAdd = false;
}
return Tmp_isAdd;
});
}
});
}; // end of onselection
var onExpand= function (combo) {
combo.getStore().clearFilter();
var otherSelectedValues = ['s_filter1', 's_filter2', 's_filter3']
.filter(otherId => otherId !== combo.id).map(otherId => selectedValues[otherId]);
combo.getStore().filterBy(function (record) {
return !otherSelectedValues.includes(record.get('value'));
});
}
1>*.js
//combo 選項
var Tmp_Store = Ext.create("Ext.data.Store", {
fields: ["value", "displayName"],
data: [
{ value: "", displayName: "請選擇", },
{ value: "ECNO", displayName: "EO ECN", },
{ value: "PROCWC", displayName: "生產工廠", },
{ value: "PN", displayName: "件號", },
{ value: "AMMNO", displayName: "AMM單號", },
]
}
);
//儲存combox目前選擇的項目
var selectedValues = {
s_filter1: null,
s_filter2: null,
s_filter3: null,
};
var onSelect = function (combo, records) {
myalert("onSelect !!" + combo.id);
console.log("records:", records);
var record = records[0] || records;
console.log("record:", record);
var cur_value = record.get("value");
console.log("cur_value:", cur_value);
// 更新 selectedValues 對象
if (cur_value != '') {
selectedValues[combo.id] = cur_value;
} else {
selectedValues[combo.id] = null; //挑選到"請選擇"要清空已選中的選項
console.log("selectedValues:", selectedValues);
};
//更新其他下拉列表的選項, store 的內容<>目前過濾條件的挑選值且 store 的內容<>目前挑選值
var Tmp_filter_Ary = ['s_filter1', 's_filter2', 's_filter3']; //過濾條件的 Array
Tmp_filter_Ary.forEach(function (id) {
if (id !== combo.id) {
var otherCombo = Ext.getCmp(id);
otherCombo.getStore().clearFilter(); //清除 store.filter 內容
otherCombo.getStore().filterBy(function (record) {//filterBy function , 若為 true ,則包含該選項
var Tmp_isAdd = true;
if (record.get('value') == cur_value)
Tmp_isAdd = false;
//將 obj 轉成 Array
var selectedValues_Ary = Object.keys(selectedValues).map((key) => [key, selectedValues[key]]);
for (i = 0; i < selectedValues_Ary.length; i++) {
if (record.get('value') == selectedValues[i])
Tmp_isAdd = false;
}
return Tmp_isAdd;
});
console.log(" selectedValues: ", selectedValues);
console.log(" id: ", id);
var Tmp_store = otherCombo.getStore();
console.log(" otherCombo.getStore()- Tmp_store", Tmp_store);
}
});
}; // end of onselection
var onExpand= function (combo) {
combo.getStore().clearFilter();
var otherSelectedValues = ['s_filter1', 's_filter2', 's_filter3'].filter(otherId => otherId !== combo.id).map(otherId => selectedValues[otherId]);
combo.getStore().filterBy(function (record) {
return !otherSelectedValues.includes(record.get('value'));
});
}
var cmp_filter1 = get_cmp_filter1("過濾條件1", "s_filter1", 80, 80, Tmp_Store);
var cmp_filter2 = get_cmp_filter1("過濾條件2", "s_filter2", 80, 80, Tmp_Store);
var cmp_filter3 = get_cmp_filter1("過濾條件3", "s_filter3", 80, 80, Tmp_Store);
Ext.getCmp("s_filter1").on("select", onSelect);
Ext.getCmp("s_filter2").on("select", onSelect);
Ext.getCmp("s_filter3").on("select", onSelect);
Ext.getCmp("s_filter1").on("expand", onExpand);
Ext.getCmp("s_filter2").on("expand", onExpand);
Ext.getCmp("s_filter3").on("expand", onExpand);
2>*.js
//取得過濾欄位的過濾值
//var Tmp_filter_Ary = ["s_filter1", "s_filter2", "s_filter3"]; //過濾欄位的元件名稱
//var Tmp_filter_Name1 = selectedValues["s_filter1"];
//if (!checkisnull(Tmp_filter_Name1)) {
// var Tmp_filter_Name1_val = nulltoStr(Ext.getCmp("s_filter1_val").getValue()).trim();
// Tmp_filter_Name1 = "s_" + Tmp_filter_Name1;
// np[Tmp_filter_Name1] = Tmp_filter_Name1_val;
//}
//取得過濾欄位的過濾值, 並傳入 np
Tmp_filter_Ary.forEach(function (cur_filter) {
var Tmp_filter_NM = selectedValues[cur_filter];
if (!checkisnull(Tmp_filter_NM)) {
var cur_filter_txt = cur_filter + "_val";
var Tmp_filter_NM_val = nulltoStr(Ext.getCmp(cur_filter_txt).getValue()).trim();
Tmp_filter_NM = "s_" + Tmp_filter_NM;
np[Tmp_filter_NM] = Tmp_filter_NM_val;
}
}
);
沒有留言:
張貼留言