বিকল্পের জন্য উপাদান

URL-এ ID ব্যবহার করার পরিবর্তে আপনি তালিকা থেকে একটি দেশ নির্বাচন করার ক্ষমতা সহ বিশেষ Select উপাদান ব্যবহার করে ফিল্টারিং তৈরি করতে পছন্দ করতে পারেন। পূর্বে, আমরা ইতিমধ্যেই Relselect উপাদানটি ব্যবহার করেছি, এবং এর কাজের যুক্তিটি খুবই অনুরূপ, কিন্তু Select ধন্যবাদ, আমরা কেবলমাত্র সমস্ত উপলব্ধ দেশ থেকে একটি পছন্দ অফার করতে পারি না কিন্তু আমাদের নিজস্ব বিকল্পগুলিও যোগ করতে পারি।

উপাদান Select

আসুন Select সেটিংটি দেখি, যে পছন্দটি নির্ধারণ করবে কোন শহরগুলি থেকে কোন দেশগুলি টেবিলে থাকা উচিত এবং সাধারণভাবে সমস্ত উপলব্ধ শহরগুলি দেখানোর ক্ষমতা যোগ করা হয়েছে৷

একটি Select কম্পোনেন্ট তৈরি করার সময়, এটি অবশ্যই এমন বিকল্প দিয়ে পূর্ণ করতে হবে যেখান থেকে নির্বাচন করা হবে। এটি করার জন্য, Relselect , আপনাকে দেশের একটি সাধারণ তালিকা পেতে হবে। কিন্তু তারপরে আমরা এই তালিকাটি সরাসরি Select পাঠাই না বরং এটিকে উপলভ্য বিকল্পগুলিতে রূপান্তর করি, যার প্রতিটি একটি Select Option মডেল হিসাবে উপস্থাপন করা হয়। অতএব, আমরা Select Options অ্যারেটিকে একটি পরিবর্তনশীল হিসাবে ঘোষণা করি এবং একটি লুপে প্রয়োজনীয় ডেটা দিয়ে এটি পূরণ করি।

এই উদাহরণে, আমাদের জন্য অপরিহার্য Select Options ক্ষেত্রগুলি হবে Label (প্রস্তাবিত বিকল্পের পাঠ্য) এবং Value (এর সংখ্যাসূচক শনাক্তকারী)। এই মানগুলি দেশের নাম এবং তার আইডিতে সেট করুন।

লুপটি সম্পূর্ণ হলে আমাদের আরও একটি বিকল্প তৈরি করা উচিত এবং যুক্ত করা উচিত যা দেশগুলির দ্বারা ফিল্টার না করে সমস্ত উপলব্ধ শহরগুলিকে দেখাবে৷ Label = World এবং Value = 0 সেট করা যাক।

আপনি যখন কোনো বিকল্প নির্বাচন করেন, Select onChange ট্রিগার ফায়ার হবে। আসুন নির্বাচিত বিকল্পটি খুঁজে বের করার জন্য এটি ব্যবহার করি এবং নির্বাচিত নতুন বৈশ্বিক পরিবর্তনশীল Country selected এটি লিখি। এই ক্ষেত্রে, এটি একটি অতিরিক্ত চেক করা প্রয়োজন, এবং যদি শেষ বিকল্প (সমস্ত উপলব্ধ শহর) নির্বাচন করা হয়, তাহলে এই ভেরিয়েবলের মানটি খালি ( null ) এ সেট করা উচিত।

এই ব্যবসায়িক প্রক্রিয়ার শেষ কাজটি হল Refresh বোতামে ক্লিক করা শুরু করা, যা টেবিলের ডেটা রিফ্রেশ করে। একটি নতুন ভেরিয়েবলের আবির্ভাব বিবেচনায় নিতে এর ব্যবসায়িক প্রক্রিয়াটিকেও কিছুটা পরিবর্তন করতে হবে।

এখন আমরা টেবিলে কোন দেশ থেকে কোন শহরগুলি দেখানো উচিত তা চয়ন করতে পারি।

Dropdown উপাদান

এবং অবশেষে, আসুন অন্য একটি উপাদান দেখি যা আপনাকে বিভিন্ন বিকল্প বেছে নিতে দেয় - Dropdown । এর মূল পার্থক্য হল যে একটি নির্দিষ্ট বিকল্প নির্বাচন করা শুধুমাত্র নির্বাচিত বিকল্পটি মনে রাখার পরিবর্তে অবিলম্বে কিছু ক্রিয়াকলাপ ট্রিগার করা উচিত। এটিকে বর্ধিত কার্যকারিতা সহ একটি বোতাম বলা যেতে পারে।

উদাহরণস্বরূপ, টেবিলে দেশ মুছে ফেলা বোতামের পরিবর্তে Dropdown ব্যবহার করা যাক। এখন এটি ডাটাবেসের এন্ট্রিটি অবিলম্বে মুছে ফেলবে না তবে অতিরিক্ত বিকল্পগুলিকে কল করবে যেখানে আপনি মুছে ফেলার বিষয়টি নিশ্চিত করতে পারেন বা এটি বাতিল করতে পারেন৷

কম্পোনেন্টের সাধারণ কনফিগারেশন দিয়ে শুরু করা যাক। এর চেহারা এবং উপলব্ধ বিকল্প নির্বাচন করা যাক.

এর পরে, আমরা ব্যবসা প্রক্রিয়া নিজেই তৈরি করব। এবং এটিতে প্রথম কাজটি হবে যে রেকর্ডটির জন্য Dropdown ক্লিক করা হয়েছিল তা নির্ধারণ করা। সাধারণ বোতামগুলির জন্য, এই মানটি একটি Record ID হিসাবে পাস করা হয়, তবে এই ক্ষেত্রে, এমনকি Dropdown চাপা হবে না, তবে পছন্দসই বিকল্পের সাথে এর চাইল্ড কম্পোনেন্ট। অতএব, এন্ট্রি আইডি পাওয়া একটু বেশি জটিল।

সারণী উপাদানের পুনরাবৃত্তির জন্য, Component ID দুটি অংশ নিয়ে গঠিত, একটি "-" চিহ্ন দ্বারা পৃথক করা হয়। প্রথম অংশটি স্ট্যান্ডার্ড কম্পোনেন্ট আইডি। কিন্তু দ্বিতীয় অংশটি শুধুমাত্র রেকর্ড আইডি, যার সংযোজন পুনরাবৃত্তিকারী উপাদানগুলির সনাক্তকারীকে অনন্য করে তোলে।

এটা জেনে, আমাদের শুধু এই আইডি পেতে হবে। অতএব, আমরা স্ট্রিংটিকে অংশে বিভক্ত করব ( Split string ) এবং দ্বিতীয় অংশের মান খুঁজে বের করব ( index = 1 )

পরবর্তী পদক্ষেপ হিসাবে আমাদের খুঁজে বের করতে হবে কোন বিকল্পটি নির্বাচন করা হয়েছে।

যদি এটি সত্যিই মুছে ফেলা নিশ্চিত করার একটি বিকল্প হয়, তাহলে উপযুক্ত কমান্ডটি চালান। অন্যথায়, আপনি কিছুই করতে পারবেন না কারণ কিছু পদক্ষেপের প্রয়োজন নেই।

এখন ডেটাবেস থেকে রেকর্ড মুছে ফেলা দুর্ঘটনাজনিত ক্লিক থেকে সুরক্ষিত।