【新特性速遞】覆蓋標簽頁之前彈出確認對話框，防止用戶數據丟失！

起因

官網示例有這么一個例子：https://pro.fineui.com/#/grid/grid_newtab_sametab.aspx

可以在新的標簽頁中打開編輯頁面，並且僅打開一個標簽頁，看下動圖：

 

這個示例的關鍵代碼如下：

<f:TemplateField HeaderText="新標簽頁打開" Width="100px">
    <ItemTemplate>
        <a href="javascript:;" onclick="<%# GetEditUrl(Eval("Id"), Eval("Name")) %>">編輯</a>
    </ItemTemplate>
</f:TemplateField>

頁面模板列中調用了后台C#函數 GetEditUrl 來返回一段JavaScript腳本：

protected string GetEditUrl(object id, object name)
{
    JsObjectBuilder joBuilder = new JsObjectBuilder();
    joBuilder.AddProperty("id", "grid_newtab_sametab_edit");
    joBuilder.AddProperty("title", "編輯 - " + name);
    joBuilder.AddProperty("iframeUrl", ResolveUrl(String.Format("~/grid/grid_newtab_window.aspx?id={0}&name={1}", id, HttpUtility.UrlEncode(name.ToString()))));
    joBuilder.AddProperty("refreshWhenExist", true);
    joBuilder.AddProperty("iconFont", "pencil");

    // addExampleTab函數定義在default.aspx
    return String.Format("parent.addExampleTab({0});", joBuilder);
}

 

其中關鍵的兩個參數：

1. id：這里為每一行的鏈接都指定相同的選項卡標簽頁ID，這是關鍵所在，后面打開的標簽頁會覆蓋前面的

2. refreshWhenExist：告訴FineUIPro，如果具有相同ID的標簽頁已經存在，那么就毫不客氣的刷新它！

其中 addExampleTab 是定義在父頁面（也就是框架頁 index.aspx）的一個JavaScript 函數：

// 添加示例標簽頁
// tabOptions: 選項卡參數
// tabOptions.id： 選項卡ID
// tabOptions.iframeUrl: 選項卡IFrame地址 
// tabOptions.title： 選項卡標題
// tabOptions.icon： 選項卡圖標
// tabOptions.createToolbar： 創建選項卡前的回調函數（接受tabOptions參數）
// tabOptions.refreshWhenExist： 添加選項卡時，如果選項卡已經存在，是否刷新內部IFrame
// tabOptions.iconFont： 選項卡圖標字體
// actived: 是否激活選項卡（默認為true）
function addExampleTab(tabOptions, actived) {
    F.addMainTab(F('mainTabStrip'), tabOptions, actived);
}

 

這個邏輯實現有個潛在的問題，也是我們的一位網友發現的：

 

這個訴求也不難理解，如果頁面已經打開並且正在編輯狀態，直接覆蓋可能會丟失數據，因此在覆蓋之前提醒下用戶是合理的需求。

 

解決問題

下個版本（v5.6.0），我們會給 F.addMainTab 增加一個參數來解決這個問題，先看下更新后的代碼：

protected string GetEditUrl(object id, object name)
{
    JsObjectBuilder joBuilder = new JsObjectBuilder();
    joBuilder.AddProperty("id", "grid_newtab_sametab_edit");
    joBuilder.AddProperty("title", "編輯 - " + name);
    joBuilder.AddProperty("iframeUrl", ResolveUrl(String.Format("~/grid/grid_newtab_window.aspx?id={0}&name={1}", id, HttpUtility.UrlEncode(name.ToString()))));
    // 如果標簽頁已經打開，則提示用戶是否需要更新（refreshWhenExist=false && confirmWhenExist='提示信息'）
    joBuilder.AddProperty("refreshWhenExist", false);
    joBuilder.AddProperty("confirmWhenExist", "當前標簽頁已經打開，確認放棄修改？");
    joBuilder.AddProperty("iconFont", "pencil");

    // addExampleTab函數定義在default.aspx
    return String.Format("parent.addExampleTab({0});", joBuilder);
}

注意，和上面例子的差異有如下兩點：

1. refreshWhenExist：設為false，告訴FineUIPro遇到相同ID的標簽頁已經存在時，不要直接更新掉

2. confirmWhenExist：一個字符串，在更新標簽之前彈出確認對話框，用戶選擇【確定】則更新，選擇【取消】則不更新

看下實際運行時的效果圖：

 

是不是很happy，一個簡單的參數搞定，化繁為簡是我們的宗旨，也希望你能喜歡這次的更新。

 

本更新基礎版適用，加入知識星球下載FineUIPro/Mvc/Core的基礎版

 

注：本更新會出現在下個版本（v5.6.0）的迭代中。

 

不忘初心，砥礪前行