Selection နှင့်ဖျက်ခြင်း function ကိုအကောင်အထည်ဖော်ရန် ThinkPPP အပေါ်ပြည့်စုံသောသင်ခန်းစာ

ပူးတွဲရွေးချယ်ခြင်းနှင့်ဖျက်ခြင်း၏လုပ်ဆောင်ချက်များကိုမိတ်ဆက်ခြင်း

TresterPPP နှင့်တီထွင်သောအခါသင်ရွေးချယ်ခြင်းနှင့်ဖျက်ခြင်းလုပ်ငန်းများကိုအကောင်အထည်ဖော်ရန်လိုအပ်သည့်အခြေအနေများနှင့်သင်မကြာခဏကြုံတွေ့ရလေ့ရှိသည်။ Select Feature သည်အသုံးပြုသူများကိုဒေတာပစ္စည်းများအားလုံးကိုတစ်ပြိုင်နက်တည်းပယ်ဖျက်ရန် (သို့) ဖျက်သိမ်းရန်သို့မဟုတ်ပယ်ဖျက်သည့်အင်္ဂါရပ်သည်အသုံးပြုသူများကိုရွေးချယ်ထားသောဒေတာများကိုဖျက်ရန်ခွင့်ပြုသည်။ ဤလုပ်ဆောင်ချက်နှစ်ခုသည်စီမံခန့်ခွဲမှုစနစ်များတွင်အထူးသဖြင့်ဒေတာအပြောင်းအလဲနဲ့ပြုပြင်ထိန်းသိမ်းမှုတွင်အလွန်လက်တွေ့ကျသည်။

ရွေးချယ်မှုအားလုံး function ကို၏အကောင်အထည်ဖော်မှု

Select လုပ်ပါ

ပထမ ဦး စွာ Select All Button ကိုအဖြစ်စာမျက်နှာသို့ checkbox တစ်ခုထည့်ပါ။ အောက်ပါ HTML ကုဒ်ကိုသုံးနိုင်သည်။

 <span class="fun"><input type = "Checkbox" ID = "Selectall"> အားလုံးကိုရွေးချယ်ပါ</span>

အထက်ပါကုဒ်သည် Check box ကိုဖန်တီးပြီး ID attribute ကို "Selectall" သို့သတ်မှတ်သည်။ အသုံးပြုသူသည်ဤ check box ကိုနှိပ်သောအခါသူသည်အခြားဒေတာများကိုရွေးချယ်နိုင်သည်။

All-Select function ကိုအကောင်အထည်ဖော်ပြုသည့် JavaScript ကုဒ်

ထို့နောက် Selection အားလုံးကိုအောင်မြင်ရန် JavaScript ကိုကျွန်ုပ်တို့အသုံးပြုသည်။ အောက်ဖော်ပြပါသည်ယုတ္တိဗေဒကိုအကောင်အထည်ဖော်သည့်ကုဒ်ဖြစ်သည်။

 $(document).ready(function(){
    $('#selectAll').click(function(){
        var isChecked = $(this).prop('checked');
        $('input[name="items"]').prop('checked', isChecked);
    });
});

ဤကုဒ်သည်စာမျက်နှာရှိ "ပစ္စည်းများ" အမည်ရှိ check box အားလုံးကိုရွေးချယ်ပြီး, ထို့နောက် Select All ခလုတ်ကိုနှိပ်ပါ။ Select ခလုတ်ကိုနှိပ်သောအခါအားလုံး check box အားလုံး၏ရွေးချယ်ထားသော status ကိုထပ်တူပြုလိမ့်မည်။

ပယ်ဖျက်ခြင်း function ကိုအကောင်အထည်ဖော်ခြင်း

Delete ခလုတ်ကိုထည့်ပါ

Check box များနှင့်ခလုတ်များကိုစာမျက်နှာသို့ delete လုပ်သည့်အခါကုဒ်သည်အောက်ပါအတိုင်းဖြစ်နိုင်သည် -

 <input type="checkbox" name="items"> ဒေတာပစ္စည်းများ
<button class="deleteBtn">ဖျက်</button>

ဒေတာပစ္စည်းတစ်ခုစီတွင် Check box နှင့် delete ခလုတ်တစ်ခုပါရှိသည်။ Check box ၏အမည် attribute သည် "ပစ္စည်းများ" ဖြစ်ပြီး Delete ခလုတ်၏အတန်းသည် "Delettn" ဖြစ်သည်။

deletion function ကိုအကောင်အထည်ဖော်ပြုသော JavaScript ကုဒ်

ပယ်ဖျက်ခြင်း function ၏အဓိကအချက်မှာဖျက်ခြင်းခလုတ်ကိုချည်နှောင်ထားသော Click ဖြစ်ရပ်ဖြစ်သည်။ အောက်ဖော်ပြပါသည်သက်ဆိုင်ရာကုဒ်ဖြစ်သည်။

 $(".deleteBtn").click(function(){
    var isChecked = $(this).prev().prop('checked');
    if (isChecked) {
        $(this).parent().remove();
    }
});

ဤကုဒ်တွင် Click လုပ်ထားတဲ့ Delete ခလုတ်ကို JQuery မှတစ်ဆင့်လေ့လာကြည့်ရှုခြင်းနှင့်၎င်း၏ရှေ့မှောက်၌ check box ကိုရွေးချယ်ခြင်းရှိမရှိစစ်ဆေးပါ။ ရွေးချယ်ပါက DOM မှပစ္စည်းကိုဖယ်ရှားပါ။

အကျဉ်းချုပ်

အထက်ပါအဆင့်များမှတစ်ဆင့်ကျွန်ုပ်တို့သည် TerePhp Project တွင်ရွေးချယ်ခြင်းနှင့်ဖျက်ခြင်းလုပ်ငန်းများကိုအကောင်အထည်ဖော်နိုင်သည်။ ရွေးချယ်မှုအားလုံး function ကို JavaScript မှတစ်ဆင့် Check box ကိုထိန်းချုပ်သည်။ ဤလုပ်ဆောင်မှုများကိုအကောင်အထည်ဖော်ခြင်းသည်စနစ်၏လည်ပတ်မှုစွမ်းဆောင်ရည်ကိုတိုးတက်စေရုံသာမကသုံးစွဲသူအတွေ့အကြုံကိုလည်းမြှင့်တင်ပေးသည်။