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

原由

官網示例有這麼一個例子：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）的迭代中。

 

不忘初心，砥礪前行