パイソン - - ジャンゴSweetAlertプラグを使用します

SweetAlert Githubにします。https：//github.com/lipis/bootstrap-sweetalert

/静的/ディレクトリにダウンロードしたら

sweetalert.html：

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル> SweetAlert测试</ TITLE> 
    <リンクのrel = "スタイルシート"のhref = "/静的/ sweetalert / sweetalert.css "> 
    <リンクのrel ="スタイルシート"のhref = "/静的/ストラップ/ CSS / bootstrap.min.css"> 
    <リンクのrel = "スタイルシート"のhref =" /静的/ fontawesome / CSS / fontawesome。 min.css "> 
</ HEAD> 
<BODY> 

<DIV CLASS ="コンテナ"> 

    <DIV CLASS ="パネルパネルの主"> 
        <DIV CLASS ="パネルの見出し"> 
            <h3のクラス="パネルのタイトル」 >個人管理界面</ H3>
        </ DIV> 
        <DIV CLASS = "パネル体"> 
            <テーブルクラス= "テーブルのテーブルボーダー"> 
                <THEAD>
                <TR> 
                    <目>序号</目> 
                    <目> ID </目> 
                    <目>名前</目> 
                    <目>年齢</目> 
                    <目>操作</目> 
                </ TR> 
                </ thead要素> 
                <TBODY> 
                {人％でpの％} 
                    <TR> 
                        <TD> {{forloop.counter}} </ TD> 
                        <TD> {{p.id}} </ TD> 
                        <TD> {{P。名前}} </ TD> 
                        <TD> {{p.age}} </ TD> 
                        <TD> 
                            <ボタンクラス=」BTN-危険デル"> <Iクラス=" FA FA-ゴミ-O ">删除</ I> </ button>のBTN 
                        </ TD> 
                    </ TR> 
                {％ENDFOR％} 
                </ TBODY> 
            </テーブル> 
        </ div> 
    </ div> 
</ div> 

<スクリプトSRC = "/静的/ jqueryの- 3.3.1.js"> </ SCRIPT> 
<スクリプトSRC = "/静的/ test.js"> </スクリプト> 
<スクリプトSRC = "/静的/ストラップ/ JS / bootstrap.min.js"> </ SCRIPT> 
<スクリプトSRC = "/静的/ sweetalert / sweetalert.min.js"> </ SCRIPT> 

<SCRIPT> 
    //找到删除按钮绑定的事件
    $（」。デル"）。"（上クリックして」関数（）{ 
        VAR $ Trele = $（この）.parent（）親（）;.現在の最初の2つのレベル//イベントをクリックして、それはTRタグであります
        。VAR delId = $ trEle.children（） EQ（1）は.text（）; //子どもたちは、TDタグを取得し、テキストインデックスに作られた、EQ（1）の.text（）1。

        のSwaI（{ 
                    データ：{ "ID"：}支払われ、 
                タイトル：「あなたは必ずそれを削除したい？」、
                テキスト：「この操作は、レコードの削除します」
                タイプ： "警告"、//あなたは危険、警告、情報修正でき
                showCancelButton：、真の
                "BTN-危険"、//どこが危険を変更することができ、警告、情報：confirmButtonClass 
                confirmButtonText： "OK"、
                cancelButtonText：「キャンセルを" 
                closeOnConfirm：falseに
            }、
            関数（）{ 
                //は、バックエンドへの削除要求を送信します
                $のアヤックス（{ 
                    / /削除"、：URL " 
                    タイプ：" POST」、 
                        $ Trele。削除（）; //は、遠位のコンテンツを削除
                    }
                    成功：機能（アルギニン）{ 
                        のSwaI（argは、 "データの一部が削除されました！"、 "成功"）;
                }）; 
            }）; 
    }）
</ SCRIPT> 

</ body> 
</ HTML>

ブートストラップウェブサイト上のパネルを探します

その後、国境でのテーブルに来て

https://lipis.github.io/bootstrap-sweetalert/では、ポップのいくつかの例を見ることができます

どのようなポップアップは、直接のようにコピーしたコードを変更したいです

views.py：

django.shortcutsからレンダリング、のHttpResponseインポート
app01インポートモデルから


：DEF甘い（リクエスト）
    人物= models.Person.objects.all（） 
    ：（要求、 "sweetalert.html"、{人物"人"}）レンダリングリターン


DEF削除（リクエスト）：
    del_id = request.POST.get（ "ID"）
    models.Person.objects.filter（ID = del_id）.delete（）
    の戻りはHttpResponse（ "删除成功！"）

urls.py：

django.conf.urls URLをインポートから
app01インポートビューから


urlpatterns = [ 
    URL（R '^甘い/'、views.sweet）、
    URL（R '^ /削除'、views.delete）
]

訪問は、http：//127.0.0.1：8000 /甘いです/

「削除」をクリックします

「OK」をクリックします

正常に削除した後、「OK」をクリックしてください

データIDを削除4

しかし、正常に削除された表示に何か問題があります

右 - >チェック

甘いアラートでポップさh2タグ

次のコードを追加しますsweetalert.html

データを削除します。

パイソン - - ジャンゴSweetAlertプラグを使用します

おすすめ