ninegrid2 6.244.0 → 6.246.0

package/dist/bundle.cjs.js

@@ -18002,7 +18002,6 @@ class ngFilterPanel extends HTMLElement
 	connectedCallback() {
 
 		this.#owner = this.getRootNode().host;
-		console.log("========================", this.#owner);
 
 		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
 
@@ -18041,114 +18040,89 @@ class ngFilterPanel extends HTMLElement
 			</div>
 		`;
 		
-		$(this.shadowRoot).find("input[type=text]")		.on("input",	this.#onInput);
-		$(this.shadowRoot).find("input[type=checkbox]")	.on("change",	this.#onSelectAll);
-		$(this.shadowRoot).find("#btnOk")				.on("click",	this.#onOk);
-		$(this.shadowRoot).find("#btnCancel")			.on("click",	this.#onCancel);
-		
-		//$(this).on("mousedown", e => { e.preventDefault(); e.stopPropagation(); });
-		//$(this).on("mousedown", e => { e.stopPropagation(); });
+		this.shadowRoot.querySelector("input[type=text]").addEventListener("input", this.#onInput);
+		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
+		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
+		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
 	};
 
 	#onOk = (e) => {
 
 		const grd = this.shadowRoot.querySelector("nine-grid");
 
-		//ninegrid.j.querySelectorAll(grd).addClass("loading");
-		//ninegrid.j.querySelectorAll(this.#target.owner).addClass("loading");
 		this.classList.add("loading");
 		
 		setTimeout(() => {
-
-			const LVL_IDX	= grd.fields.indexOf("LVL");
-			const CHK_IDX	= grd.fields.indexOf("CHK");
-			const COLNM_IDX	= grd.fields.indexOf("COLNM");
-			const DATA_IDX	= grd.fields.indexOf("DATA");
-			
-			const checked	= grd.data.getValidDataNF().filter(m => { return m.v[LVL_IDX] == 2 && m.v[CHK_IDX] == "Y"; });
-			//const unchecked = grd.data.getValidDataNF().filter(m => { return m.v[LVL_IDX] == 2 && m.v[CHK_IDX] != "Y"; });
-			
-			var filterOptions = [];
-			if (checked.length > 0) {
-				
-				[...new Set(checked.map(m => { return m.v[COLNM_IDX] }))].forEach(v => {
-					filterOptions.push({
-						colnm	: v,
-						data	: [...new Set(grd.data.getValidData().filter(m => { return m.v[CHK_IDX] == "Y" && m.v[COLNM_IDX] == v; }).map(m => { return m.v[DATA_IDX] || ''; }))].sort((a,b) => { return a > b ? 1 : -1; }),
-					});
-				});
-			}
+			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
+			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
+			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
+				colnm: v,
+				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
+			})) : [];
 			
-			//console.log(filterOptions);
-			//console.log(this.#target, this.#target.button, filterOptions)
 			
 			this.#button.filterOptions = filterOptions;
-			
-			var oParam = {};
-			
-			this.#owner.body.querySelectorAll("ng-filter-button").forEach(el => {
-				
-				//if (!el.filterOptions) return true;
 
-				el.filterOptions.forEach(filterOptions => {
-					if (filterOptions.data.length > 0) oParam[filterOptions.colnm] = filterOptions.data;
-				});
-			});
+			const oParam = Object.fromEntries(
+				[...this.#owner.body.querySelectorAll("ng-filter-button")]
+					.flatMap(el => el.filterOptions)
+					.filter(opt => opt.data.length > 0)
+					.map(opt => [opt.colnm, opt.data])
+			);
 			
 			this.#owner.filtering.set(oParam);
 
 			this.classList.remove("loading");
+			this.style.display = 'none';
 		});
-		
-		$(this).hide();
 	};
 	
 	
 	
 	#onCancel = (e) => {
-		$(this).hide();
+		this.style.display = 'none';
 	};
 
 	#onSelectAll = (e) => {
-		var grd = this.shadowRoot.querySelector("nine-grid");
-		var idx = (grd.fields.indexOf("CHK"));
+		const grd = this.shadowRoot.querySelector("nine-grid");
+		const idx = grd.fields.indexOf("CHK");
+		const isChecked = e.target.checked; // ✅ jQuery 없이 `checked` 값 가져오기
+
+		grd.data.getValidData().forEach(m => {
+			m.v[idx] = isChecked ? "Y" : "N"; // ✅ `Y` 또는 `N` 값 설정
+		});
 
-		grd.data.getValidData().map(m => { m.v[idx] = $(e.target).prop("checked") ? "Y" : "N"; });
-		
 		grd.refreshData();
 	};
+
 	
 	
 	#onInput = (e) => {
-		var grd = this.shadowRoot.querySelector("nine-grid");
-
+		const grd = this.shadowRoot.querySelector("nine-grid");
 		
-		ninegrid.j.querySelectorAll(grd).addClass("loading");
-
+		grd.classList.add("loading");
 		
-		var data = grd.dataManager.rawRecords;
+		const data = grd.dataManager.rawRecords;
+    	data.forEach(m => { m.__ng.filtered = false; });
 		
-		data.map(m => { m.__ng.filtered = false; });
+		const v = e.target.value.toLowerCase(); // ✅ jQuery 없이 값 가져오기
+		const [LVL_IDX, DATA_IDX] = ["LVL", "DATA"].map(field => grd.fields.indexOf(field));
 
-		
-		var v = $(e.target).val().toLowerCase();
-		
+		data.forEach(m => {
+			m.__ng.filtered = m.v[LVL_IDX] === 2 && !String(m.v[DATA_IDX] || "").toLowerCase().includes(v);
+		});
 
-		const LVL_IDX	= grd.fields.indexOf("LVL");
-		const DATA_IDX	= grd.fields.indexOf("DATA");
-		
-		data.filter(m => { return m.v[LVL_IDX] == 2 && String(m.v[DATA_IDX] || '').toLowerCase().indexOf(v) < 0; }).map(m => { m.__ng.filtered = true; });
-		
 		grd.data.resetRecords();
 		
 		if (this.#timer) {
+			console.log("-------------", this.#timer);
 			clearTimeout(this.#timer);
+			console.log("===============", this.#timer);
 			this.#timer = null;
 		}
 		this.#timer = setTimeout(() => {
 			grd.dataManager.viewRecords.reset();
 			grd.dataManager.viewRecords.touch();
-			//ninegrid.j.querySelectorAll(grd).removeClass("loading");
 		}, 200);
 	};
 	

package/dist/bundle.esm.js

@@ -18000,7 +18000,6 @@ class ngFilterPanel extends HTMLElement
 	connectedCallback() {
 
 		this.#owner = this.getRootNode().host;
-		console.log("========================", this.#owner);
 
 		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
 
@@ -18039,114 +18038,89 @@ class ngFilterPanel extends HTMLElement
 			</div>
 		`;
 		
-		$(this.shadowRoot).find("input[type=text]")		.on("input",	this.#onInput);
-		$(this.shadowRoot).find("input[type=checkbox]")	.on("change",	this.#onSelectAll);
-		$(this.shadowRoot).find("#btnOk")				.on("click",	this.#onOk);
-		$(this.shadowRoot).find("#btnCancel")			.on("click",	this.#onCancel);
-		
-		//$(this).on("mousedown", e => { e.preventDefault(); e.stopPropagation(); });
-		//$(this).on("mousedown", e => { e.stopPropagation(); });
+		this.shadowRoot.querySelector("input[type=text]").addEventListener("input", this.#onInput);
+		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
+		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
+		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
 	};
 
 	#onOk = (e) => {
 
 		const grd = this.shadowRoot.querySelector("nine-grid");
 
-		//ninegrid.j.querySelectorAll(grd).addClass("loading");
-		//ninegrid.j.querySelectorAll(this.#target.owner).addClass("loading");
 		this.classList.add("loading");
 		
 		setTimeout(() => {
-
-			const LVL_IDX	= grd.fields.indexOf("LVL");
-			const CHK_IDX	= grd.fields.indexOf("CHK");
-			const COLNM_IDX	= grd.fields.indexOf("COLNM");
-			const DATA_IDX	= grd.fields.indexOf("DATA");
-			
-			const checked	= grd.data.getValidDataNF().filter(m => { return m.v[LVL_IDX] == 2 && m.v[CHK_IDX] == "Y"; });
-			//const unchecked = grd.data.getValidDataNF().filter(m => { return m.v[LVL_IDX] == 2 && m.v[CHK_IDX] != "Y"; });
-			
-			var filterOptions = [];
-			if (checked.length > 0) {
-				
-				[...new Set(checked.map(m => { return m.v[COLNM_IDX] }))].forEach(v => {
-					filterOptions.push({
-						colnm	: v,
-						data	: [...new Set(grd.data.getValidData().filter(m => { return m.v[CHK_IDX] == "Y" && m.v[COLNM_IDX] == v; }).map(m => { return m.v[DATA_IDX] || ''; }))].sort((a,b) => { return a > b ? 1 : -1; }),
-					});
-				});
-			}
+			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
+			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
+			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
+				colnm: v,
+				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
+			})) : [];
 			
-			//console.log(filterOptions);
-			//console.log(this.#target, this.#target.button, filterOptions)
 			
 			this.#button.filterOptions = filterOptions;
-			
-			var oParam = {};
-			
-			this.#owner.body.querySelectorAll("ng-filter-button").forEach(el => {
-				
-				//if (!el.filterOptions) return true;
 
-				el.filterOptions.forEach(filterOptions => {
-					if (filterOptions.data.length > 0) oParam[filterOptions.colnm] = filterOptions.data;
-				});
-			});
+			const oParam = Object.fromEntries(
+				[...this.#owner.body.querySelectorAll("ng-filter-button")]
+					.flatMap(el => el.filterOptions)
+					.filter(opt => opt.data.length > 0)
+					.map(opt => [opt.colnm, opt.data])
+			);
 			
 			this.#owner.filtering.set(oParam);
 
 			this.classList.remove("loading");
+			this.style.display = 'none';
 		});
-		
-		$(this).hide();
 	};
 	
 	
 	
 	#onCancel = (e) => {
-		$(this).hide();
+		this.style.display = 'none';
 	};
 
 	#onSelectAll = (e) => {
-		var grd = this.shadowRoot.querySelector("nine-grid");
-		var idx = (grd.fields.indexOf("CHK"));
+		const grd = this.shadowRoot.querySelector("nine-grid");
+		const idx = grd.fields.indexOf("CHK");
+		const isChecked = e.target.checked; // ✅ jQuery 없이 `checked` 값 가져오기
+
+		grd.data.getValidData().forEach(m => {
+			m.v[idx] = isChecked ? "Y" : "N"; // ✅ `Y` 또는 `N` 값 설정
+		});
 
-		grd.data.getValidData().map(m => { m.v[idx] = $(e.target).prop("checked") ? "Y" : "N"; });
-		
 		grd.refreshData();
 	};
+
 	
 	
 	#onInput = (e) => {
-		var grd = this.shadowRoot.querySelector("nine-grid");
-
+		const grd = this.shadowRoot.querySelector("nine-grid");
 		
-		ninegrid.j.querySelectorAll(grd).addClass("loading");
-
+		grd.classList.add("loading");
 		
-		var data = grd.dataManager.rawRecords;
+		const data = grd.dataManager.rawRecords;
+    	data.forEach(m => { m.__ng.filtered = false; });
 		
-		data.map(m => { m.__ng.filtered = false; });
+		const v = e.target.value.toLowerCase(); // ✅ jQuery 없이 값 가져오기
+		const [LVL_IDX, DATA_IDX] = ["LVL", "DATA"].map(field => grd.fields.indexOf(field));
 
-		
-		var v = $(e.target).val().toLowerCase();
-		
+		data.forEach(m => {
+			m.__ng.filtered = m.v[LVL_IDX] === 2 && !String(m.v[DATA_IDX] || "").toLowerCase().includes(v);
+		});
 
-		const LVL_IDX	= grd.fields.indexOf("LVL");
-		const DATA_IDX	= grd.fields.indexOf("DATA");
-		
-		data.filter(m => { return m.v[LVL_IDX] == 2 && String(m.v[DATA_IDX] || '').toLowerCase().indexOf(v) < 0; }).map(m => { m.__ng.filtered = true; });
-		
 		grd.data.resetRecords();
 		
 		if (this.#timer) {
+			console.log("-------------", this.#timer);
 			clearTimeout(this.#timer);
+			console.log("===============", this.#timer);
 			this.#timer = null;
 		}
 		this.#timer = setTimeout(() => {
 			grd.dataManager.viewRecords.reset();
 			grd.dataManager.viewRecords.touch();
-			//ninegrid.j.querySelectorAll(grd).removeClass("loading");
 		}, 200);
 	};
 	

package/dist/etc/ngFiltering.js

@@ -179,7 +179,6 @@ class ngFilterPanel extends HTMLElement
 	connectedCallback() {
 
 		this.#owner = this.getRootNode().host;
-		console.log("========================", this.#owner)
 
 		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
 
@@ -218,114 +217,89 @@ class ngFilterPanel extends HTMLElement
 			</div>
 		`;
 		
-		$(this.shadowRoot).find("input[type=text]")		.on("input",	this.#onInput);
-		$(this.shadowRoot).find("input[type=checkbox]")	.on("change",	this.#onSelectAll);
-		$(this.shadowRoot).find("#btnOk")				.on("click",	this.#onOk);
-		$(this.shadowRoot).find("#btnCancel")			.on("click",	this.#onCancel);
-		
-		//$(this).on("mousedown", e => { e.preventDefault(); e.stopPropagation(); });
-		//$(this).on("mousedown", e => { e.stopPropagation(); });
+		this.shadowRoot.querySelector("input[type=text]").addEventListener("input", this.#onInput);
+		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
+		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
+		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
 	};
 
 	#onOk = (e) => {
 
 		const grd = this.shadowRoot.querySelector("nine-grid");
 
-		//ninegrid.j.querySelectorAll(grd).addClass("loading");
-		//ninegrid.j.querySelectorAll(this.#target.owner).addClass("loading");
 		this.classList.add("loading");
 		
 		setTimeout(() => {
-
-			const LVL_IDX	= grd.fields.indexOf("LVL");
-			const CHK_IDX	= grd.fields.indexOf("CHK");
-			const COLNM_IDX	= grd.fields.indexOf("COLNM");
-			const DATA_IDX	= grd.fields.indexOf("DATA");
-			
-			const checked	= grd.data.getValidDataNF().filter(m => { return m.v[LVL_IDX] == 2 && m.v[CHK_IDX] == "Y"; });
-			//const unchecked = grd.data.getValidDataNF().filter(m => { return m.v[LVL_IDX] == 2 && m.v[CHK_IDX] != "Y"; });
-			
-			var filterOptions = [];
-			if (checked.length > 0) {
-				
-				[...new Set(checked.map(m => { return m.v[COLNM_IDX] }))].forEach(v => {
-					filterOptions.push({
-						colnm	: v,
-						data	: [...new Set(grd.data.getValidData().filter(m => { return m.v[CHK_IDX] == "Y" && m.v[COLNM_IDX] == v; }).map(m => { return m.v[DATA_IDX] || ''; }))].sort((a,b) => { return a > b ? 1 : -1; }),
-					});
-				});
-			}
+			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
+			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
+			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
+				colnm: v,
+				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
+			})) : [];
 			
-			//console.log(filterOptions);
-			//console.log(this.#target, this.#target.button, filterOptions)
 			
 			this.#button.filterOptions = filterOptions;
-			
-			var oParam = {};
-			
-			this.#owner.body.querySelectorAll("ng-filter-button").forEach(el => {
-				
-				//if (!el.filterOptions) return true;
 
-				el.filterOptions.forEach(filterOptions => {
-					if (filterOptions.data.length > 0) oParam[filterOptions.colnm] = filterOptions.data;
-				});
-			});
+			const oParam = Object.fromEntries(
+				[...this.#owner.body.querySelectorAll("ng-filter-button")]
+					.flatMap(el => el.filterOptions)
+					.filter(opt => opt.data.length > 0)
+					.map(opt => [opt.colnm, opt.data])
+			);
 			
 			this.#owner.filtering.set(oParam);
 
 			this.classList.remove("loading");
+			this.style.display = 'none';
 		});
-		
-		$(this).hide();
 	};
 	
 	
 	
 	#onCancel = (e) => {
-		$(this).hide();
+		this.style.display = 'none';
 	};
 
 	#onSelectAll = (e) => {
-		var grd = this.shadowRoot.querySelector("nine-grid");
-		var idx = (grd.fields.indexOf("CHK"));
+		const grd = this.shadowRoot.querySelector("nine-grid");
+		const idx = grd.fields.indexOf("CHK");
+		const isChecked = e.target.checked; // ✅ jQuery 없이 `checked` 값 가져오기
+
+		grd.data.getValidData().forEach(m => {
+			m.v[idx] = isChecked ? "Y" : "N"; // ✅ `Y` 또는 `N` 값 설정
+		});
 
-		grd.data.getValidData().map(m => { m.v[idx] = $(e.target).prop("checked") ? "Y" : "N"; });
-		
 		grd.refreshData();
 	};
+
 	
 	
 	#onInput = (e) => {
-		var grd = this.shadowRoot.querySelector("nine-grid");
-
+		const grd = this.shadowRoot.querySelector("nine-grid");
 		
-		ninegrid.j.querySelectorAll(grd).addClass("loading");
-
+		grd.classList.add("loading");
 		
-		var data = grd.dataManager.rawRecords;
+		const data = grd.dataManager.rawRecords;
+    	data.forEach(m => { m.__ng.filtered = false; });
 		
-		data.map(m => { m.__ng.filtered = false; });
+		const v = e.target.value.toLowerCase(); // ✅ jQuery 없이 값 가져오기
+		const [LVL_IDX, DATA_IDX] = ["LVL", "DATA"].map(field => grd.fields.indexOf(field));
 
-		
-		var v = $(e.target).val().toLowerCase();
-		
+		data.forEach(m => {
+			m.__ng.filtered = m.v[LVL_IDX] === 2 && !String(m.v[DATA_IDX] || "").toLowerCase().includes(v);
+		});
 
-		const LVL_IDX	= grd.fields.indexOf("LVL");
-		const DATA_IDX	= grd.fields.indexOf("DATA");
-		
-		data.filter(m => { return m.v[LVL_IDX] == 2 && String(m.v[DATA_IDX] || '').toLowerCase().indexOf(v) < 0; }).map(m => { m.__ng.filtered = true; });
-		
 		grd.data.resetRecords();
 		
 		if (this.#timer) {
+			console.log("-------------", this.#timer);
 			clearTimeout(this.#timer);
+			console.log("===============", this.#timer);
 			this.#timer = null;
 		}
 		this.#timer = setTimeout(() => {
 			grd.dataManager.viewRecords.reset();
 			grd.dataManager.viewRecords.touch();
-			//ninegrid.j.querySelectorAll(grd).removeClass("loading");
 		}, 200)
 	};
 	

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.244.0",
+  "version": "6.246.0",
   "main": "dist/index.js",
   "exports": {
     "import": "./dist/index.js",

package/src/etc/ngFiltering.js

@@ -179,7 +179,6 @@ class ngFilterPanel extends HTMLElement
 	connectedCallback() {
 
 		this.#owner = this.getRootNode().host;
-		console.log("========================", this.#owner)
 
 		const cssPath = this.getRootNode().host.closest("nine-grid").getAttribute("css-path") || "";
 
@@ -218,114 +217,89 @@ class ngFilterPanel extends HTMLElement
 			</div>
 		`;
 		
-		$(this.shadowRoot).find("input[type=text]")		.on("input",	this.#onInput);
-		$(this.shadowRoot).find("input[type=checkbox]")	.on("change",	this.#onSelectAll);
-		$(this.shadowRoot).find("#btnOk")				.on("click",	this.#onOk);
-		$(this.shadowRoot).find("#btnCancel")			.on("click",	this.#onCancel);
-		
-		//$(this).on("mousedown", e => { e.preventDefault(); e.stopPropagation(); });
-		//$(this).on("mousedown", e => { e.stopPropagation(); });
+		this.shadowRoot.querySelector("input[type=text]").addEventListener("input", this.#onInput);
+		this.shadowRoot.querySelector("input[type=checkbox]").addEventListener("change", this.#onSelectAll);
+		this.shadowRoot.querySelector("#btnOk").addEventListener("click", this.#onOk);
+		this.shadowRoot.querySelector("#btnCancel").addEventListener("click", this.#onCancel);
 	};
 
 	#onOk = (e) => {
 
 		const grd = this.shadowRoot.querySelector("nine-grid");
 
-		//ninegrid.j.querySelectorAll(grd).addClass("loading");
-		//ninegrid.j.querySelectorAll(this.#target.owner).addClass("loading");
 		this.classList.add("loading");
 		
 		setTimeout(() => {
-
-			const LVL_IDX	= grd.fields.indexOf("LVL");
-			const CHK_IDX	= grd.fields.indexOf("CHK");
-			const COLNM_IDX	= grd.fields.indexOf("COLNM");
-			const DATA_IDX	= grd.fields.indexOf("DATA");
-			
-			const checked	= grd.data.getValidDataNF().filter(m => { return m.v[LVL_IDX] == 2 && m.v[CHK_IDX] == "Y"; });
-			//const unchecked = grd.data.getValidDataNF().filter(m => { return m.v[LVL_IDX] == 2 && m.v[CHK_IDX] != "Y"; });
-			
-			var filterOptions = [];
-			if (checked.length > 0) {
-				
-				[...new Set(checked.map(m => { return m.v[COLNM_IDX] }))].forEach(v => {
-					filterOptions.push({
-						colnm	: v,
-						data	: [...new Set(grd.data.getValidData().filter(m => { return m.v[CHK_IDX] == "Y" && m.v[COLNM_IDX] == v; }).map(m => { return m.v[DATA_IDX] || ''; }))].sort((a,b) => { return a > b ? 1 : -1; }),
-					});
-				});
-			}
+			const [LVL_IDX, CHK_IDX, COLNM_IDX, DATA_IDX] = ["LVL", "CHK", "COLNM", "DATA"].map(k => grd.fields.indexOf(k));
+			const checked = grd.data.getValidDataNF().filter(m => m.v[LVL_IDX] === 2 && m.v[CHK_IDX] === "Y");
+			const filterOptions = checked.length > 0 ? [...new Set(checked.map(m => m.v[COLNM_IDX]))].map(v => ({
+				colnm: v,
+				data: [...new Set(grd.data.getValidData().filter(m => m.v[CHK_IDX] === "Y" && m.v[COLNM_IDX] === v).map(m => m.v[DATA_IDX] || ''))].sort()
+			})) : [];
 			
-			//console.log(filterOptions);
-			//console.log(this.#target, this.#target.button, filterOptions)
 			
 			this.#button.filterOptions = filterOptions;
-			
-			var oParam = {};
-			
-			this.#owner.body.querySelectorAll("ng-filter-button").forEach(el => {
-				
-				//if (!el.filterOptions) return true;
 
-				el.filterOptions.forEach(filterOptions => {
-					if (filterOptions.data.length > 0) oParam[filterOptions.colnm] = filterOptions.data;
-				});
-			});
+			const oParam = Object.fromEntries(
+				[...this.#owner.body.querySelectorAll("ng-filter-button")]
+					.flatMap(el => el.filterOptions)
+					.filter(opt => opt.data.length > 0)
+					.map(opt => [opt.colnm, opt.data])
+			);
 			
 			this.#owner.filtering.set(oParam);
 
 			this.classList.remove("loading");
+			this.style.display = 'none';
 		});
-		
-		$(this).hide();
 	};
 	
 	
 	
 	#onCancel = (e) => {
-		$(this).hide();
+		this.style.display = 'none';
 	};
 
 	#onSelectAll = (e) => {
-		var grd = this.shadowRoot.querySelector("nine-grid");
-		var idx = (grd.fields.indexOf("CHK"));
+		const grd = this.shadowRoot.querySelector("nine-grid");
+		const idx = grd.fields.indexOf("CHK");
+		const isChecked = e.target.checked; // ✅ jQuery 없이 `checked` 값 가져오기
+
+		grd.data.getValidData().forEach(m => {
+			m.v[idx] = isChecked ? "Y" : "N"; // ✅ `Y` 또는 `N` 값 설정
+		});
 
-		grd.data.getValidData().map(m => { m.v[idx] = $(e.target).prop("checked") ? "Y" : "N"; });
-		
 		grd.refreshData();
 	};
+
 	
 	
 	#onInput = (e) => {
-		var grd = this.shadowRoot.querySelector("nine-grid");
-
+		const grd = this.shadowRoot.querySelector("nine-grid");
 		
-		ninegrid.j.querySelectorAll(grd).addClass("loading");
-
+		grd.classList.add("loading");
 		
-		var data = grd.dataManager.rawRecords;
+		const data = grd.dataManager.rawRecords;
+    	data.forEach(m => { m.__ng.filtered = false; });
 		
-		data.map(m => { m.__ng.filtered = false; });
+		const v = e.target.value.toLowerCase(); // ✅ jQuery 없이 값 가져오기
+		const [LVL_IDX, DATA_IDX] = ["LVL", "DATA"].map(field => grd.fields.indexOf(field));
 
-		
-		var v = $(e.target).val().toLowerCase();
-		
+		data.forEach(m => {
+			m.__ng.filtered = m.v[LVL_IDX] === 2 && !String(m.v[DATA_IDX] || "").toLowerCase().includes(v);
+		});
 
-		const LVL_IDX	= grd.fields.indexOf("LVL");
-		const DATA_IDX	= grd.fields.indexOf("DATA");
-		
-		data.filter(m => { return m.v[LVL_IDX] == 2 && String(m.v[DATA_IDX] || '').toLowerCase().indexOf(v) < 0; }).map(m => { m.__ng.filtered = true; });
-		
 		grd.data.resetRecords();
 		
 		if (this.#timer) {
+			console.log("-------------", this.#timer);
 			clearTimeout(this.#timer);
+			console.log("===============", this.#timer);
 			this.#timer = null;
 		}
 		this.#timer = setTimeout(() => {
 			grd.dataManager.viewRecords.reset();
 			grd.dataManager.viewRecords.touch();
-			//ninegrid.j.querySelectorAll(grd).removeClass("loading");
 		}, 200)
 	};