20251105 工號設定

這是一個很棒的個人化功能。要實現「根據工號保存設定」，我們需要將架構從「純前端 (JavaScript)」擴展為「前端 + 後端 (資料庫)」。 核心思路是： * 後端 (資料庫): 建立一個資料表，用來儲存 EmployeeID 和他勾選的欄位字串 (例如："col-pdid,col-weight,col-tam")。 * 後端 (Controller): * Index 載入時：抓取目前工號 -> 查詢資料庫 -> 取得該工號的設定字串 -> 將字串傳給 View。 * 新增一個 SavePreferences Action：接收前端傳來的設定字串 -> 存入/更新資料庫。 * 前端 (View/JavaScript): * 頁面載入時：接收 Controller 傳來的設定字串，如果字串為空（預設空白），則不勾選任何項目。如果 有字串，則解析字串並自動勾選對應欄位。 * 新增「保存設定」按鈕：點擊時，蒐集當前所有勾選的欄位，透過 AJAX 傳給後端的 SavePreferences Action。 步驟 1：資料庫 (概念) 您需要在資料庫中建立一個簡單的資料表，例如： Table: UserColumnPreferences | ColumnName | DataType | Notes | | :--- | :--- | :--- | | EmployeeID | nvarchar(50) | 主索引鍵 (Primary Key) | | VisibleColumns | nvarchar(MAX) | 儲存逗號分隔的 class 名稱 | 步驟 2：Controller (VB.NET) 假設您已經有方法可以取得「目前登入者的工號」(例如 Session("EmployeeID") 或 User.Identity.Name)。 ' 假設您使用 Entity Framework 或 ADO.NET ' Public db As New MyDbContext() Public Class HomeController Inherits Controller ' GET: Home Public Function Index() As ActionResult Dim employeeID As String = "EMP001" ' 範例：您需要替換成真實的工號取得方式 ' 1. 取得產品資料 (與之前相同) Dim products As New List(Of Product) From { ... } ' 您的產品資料 ' 2. 查詢使用者的欄位偏好設定 ' ----------------------------------------------------- Dim savedPrefs As String = "" ' 預設為空白 ' *** 假設您有一個資料庫服務來抓取資料 *** ' Dim preferenceEntry = db.UserColumnPreferences.Find(employeeID) ' If preferenceEntry IsNot Nothing Then ' savedPrefs = preferenceEntry.VisibleColumns ' End If ' ----------------------------------------------------- ' 3. 將設定傳遞給 View ViewBag.SavedPreferences = savedPrefs Return View(products) End Function ' POST: Home/SavePreferences <HttpPost> Public Function SavePreferences(preferences As String) As ActionResult Dim employeeID As String = "EMP001" ' 範例：您需要替換成真實的工號取得方式 ' *** 儲存到資料庫 (UPSERT 邏輯) *** ' ----------------------------------------------------- ' Dim preferenceEntry = db.UserColumnPreferences.Find(employeeID) ' If preferenceEntry IsNot Nothing Then ' ' 更新 ' preferenceEntry.VisibleColumns = preferences ' Else ' ' 新增 ' db.UserColumnPreferences.Add(New UserColumnPreferences With { ' .EmployeeID = employeeID, ' .VisibleColumns = preferences ' }) ' End If ' db.SaveChanges() ' ----------------------------------------------------- ' 回傳成功訊息給 AJAX Return Json(New With {.success = True, .message = "設定已保存"}) End Function End Class 步驟 3：View (Index.vbhtml) 這是變更的關鍵。我們需要： * 移除所有 Checkbox 上的預設 checked 屬性 (以符合「預設為空白」)。 * 新增「保存設定」按鈕。 * 大幅修改 JavaScript 邏輯。 <!-- end list --> @ModelType IEnumerable(Of MvcVbApp.Product) ' 替換成你的專案命名空間 <h2>產品列表</h2> <div class="panel panel-default" style="margin-bottom: 20px;"> <div class="panel-heading"> <strong>顯示欄位</strong> </div> <div class="panel-body"> <div class="checkbox"> <label> <input type="checkbox" id="checkAll" /> <strong>全部選取</strong> </label> </div> <hr style="margin-top: 10px; margin-bottom: 20px;"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="checkbox"> <label> <input type="checkbox" class="column-toggle" data-column="col-pdid" /> PDID </label> </div> </div> <div class="col-md-3 col-sm-6"> <div class="checkbox"> <label> <input type="checkbox" class="column-toggle" data-column="col-qty" /> QTY </label> </div> </div> </div> <hr style="margin-top: 20px; margin-bottom: 10px;"> <button id="btnSavePrefs" class="btn btn-primary"> <span class="glyphicon glyphicon-floppy-disk"></span> 保存我的勾選 </button> <span id="saveStatus" style="margin-left: 10px; color: green;"></span> </div> </div> <table class="table table-bordered table-striped" id="productTable"> </table> @Section Scripts <script> $(document).ready(function () { // ------------------------------------------------- // 函式 1: 根據子項目，更新 "全部選取" 的狀態 // ------------------------------------------------- function updateCheckAllState() { var allChecked = $(".column-toggle:checked").length === $(".column-toggle").length; $("#checkAll").prop("checked", allChecked); } // ------------------------------------------------- // 函式 2: 根據勾選狀態，切換欄位顯示/隱藏 // ------------------------------------------------- function toggleColumn(columnClass, isChecked) { $("." + columnClass).toggle(isChecked); } // ------------------------------------------------- // 頁面載入時：套用保存的設定 // ------------------------------------------------- var savedPrefs = "@(ViewBag.SavedPreferences)"; if (savedPrefs) { // 如果有保存設定 var prefList = savedPrefs.split(','); $(".column-toggle").each(function () { var col = $(this).data("column"); if (prefList.includes(col)) { $(this).prop("checked", true); } }); } // 如果 savedPrefs 為空 (預設空白)，則不執行任何操作，保持全部未勾選 // 載入後，立即根據 "預設勾選" (來自DB) 執行一次欄位隱藏 $(".column-toggle").each(function () { toggleColumn($(this).data("column"), $(this).prop("checked")); }); updateCheckAllState(); // 更新 "全部選取" 按鈕狀態 // ------------------------------------------------- // 事件綁定 1: "全部選取" // ------------------------------------------------- $("#checkAll").click(function () { var isChecked = $(this).prop("checked"); $(".column-toggle").prop("checked", isChecked); // 觸發 change (會執行下面的 toggleColumn) $(".column-toggle").trigger("change"); }); // ------------------------------------------------- // 事件綁定 2: "單一欄位勾選" // ------------------------------------------------- $(".column-toggle").change(function () { var columnClass = $(this).data("column"); var isChecked = $(this).prop("checked"); toggleColumn(columnClass, isChecked); updateCheckAllState(); // 更新 "全部選取" }); // ------------------------------------------------- // 事件綁定 3: "保存設定" 按鈕 (AJAX) // ------------------------------------------------- $("#btnSavePrefs").click(function () { var selectedCols = []; // 蒐集所有 "已勾選" 的欄位 $(".column-toggle:checked").each(function () { selectedCols.push($(this).data("column")); }); // 將陣列轉為字串 var prefsString = selectedCols.join(','); $("#saveStatus").text("保存中..."); // 使用 AJAX 傳送到 Controller $.ajax({ url: "@Url.Action("SavePreferences", "Home")", type: "POST", data: { preferences: prefsString }, success: function (response) { if (response.success) { $("#saveStatus").text(response.message).fadeIn().delay(3000).fadeOut(); } }, error: function () { $("#saveStatus").text("保存失敗").css("color", "red").fadeIn().delay(3000).fadeOut(); } }); }); }); </script> End Section