tableSorter(..) 추가

src/main/webapp/resources/js/base/base.js

@@ -797,39 +797,6 @@ function inputsInRange(fromSource, toSource) {
 	to.change(compare);
 }
 
-var sorting = {
-	asc: "&#11205",
-	desc: "&#11206",
-	/**테이블 헤더에 정렬을 적용한 상태를 표시한다.
-	 * @param headers th 목록
-	 * @param sorter 데이터셋이 반환한 정렬 후 상태
-	 */
-	setHeaders: (headers, sorter) => {
-		document.querySelectorAll("th[data-field]").forEach(th => {
-			let inner = th.innerHTML;
-			
-			inner = inner.replace(/ ⯅/gi, "").replace(/ ⯆/gi, "");
-			if (th.getAttribute("data-field") == sorter.by)
-				inner += " " + sorting[sorter.order] || "";
-			th.innerHTML = inner;
-		});
-	}
-/*
-	asc: {style: "sorting_asc", attr: "ascending"},
-	desc: {style: "sorting_desc", attr: "descending"},
-	setHeaders: (headers, sorter) => {
-		headers.forEach(th => {
-			th.classList.remove("sorting_asc", "sorting_desc");
-			th.removeAttribute("aria-sort");
-			if (th.getAttribute("data-field") != sorter.by) return;
-			
-			th.classList.add(sorting[sorter.order].style);
-			th.setAttribute("aria-sort", sorting[sorter.order].attr);
-		});
-	}	
-*/
-};
-
 function ignore() {
 	console.log.apply(console, arguments);
 }

src/main/webapp/resources/js/base/dataset.js

@@ -1731,3 +1731,60 @@ var dataBinder = {
 		return obj;
 	},
 };
+
+
+/**<table../>로 표시되는 데이터셋의 데이터를 정렬하고 UI에 반영되도록 설정한다.
+ * @param ctrl {DatasetControl} DatasetControl
+ * @param selector 테이블 헤더에 대한 selector 
+ */
+function tableSorter(ctrl, selector) {
+	let obj = {
+		asc: "&#11205",
+		desc: "&#11206",
+		
+		ctrl: ctrl,
+		
+		headers: () => ctrl.querySelectorAll(selector),
+		sort: (evt) => {
+			let th = evt.target;
+			ctrl.sort(th.getAttribute("data-field"));
+		}
+	};
+
+	obj.setHeaders = (sorter) => {
+		obj.headers().forEach(th => { 
+			let inner = th.innerHTML;
+			
+			inner = inner.replace(/ ⯅/gi, "").replace(/ ⯆/gi, "");
+			if (th.getAttribute("data-field") == sorter.by)
+				inner += " " + obj[sorter.order] || "";
+			th.innerHTML = inner;
+		});
+	};
+	ctrl.onSort = (sorter) => {
+		if (ctrl.renderList)
+			ctrl.renderList();	
+		obj.setHeaders(sorter);
+	};
+	
+	obj.headers().forEach(th => {
+		th.style["cursor"] = "pointer";
+		th.removeEventListener("click", obj.sort);
+		th.addEventListener("click", obj.sort);
+	});
+	return obj;
+/*
+	asc: {style: "sorting_asc", attr: "ascending"},
+	desc: {style: "sorting_desc", attr: "descending"},
+	setHeaders: (headers, sorter) => {
+		headers.forEach(th => {
+			th.classList.remove("sorting_asc", "sorting_desc");
+			th.removeAttribute("aria-sort");
+			if (th.getAttribute("data-field") != sorter.by) return;
+			
+			th.classList.add(sorting[sorter.order].style);
+			th.setAttribute("aria-sort", sorting[sorter.order].attr);
+		});
+	}	
+*/
+}