বুটস্ট্র্যাপ 3 সহ অ্যাংুলারজেএসে গ্রিড বা টেবিল উপস্থাপনের সেরা উপায়? [বন্ধ]


284

আমি AngularJS এবং বুটস্ট্র্যাপ 3 দিয়ে একটি অ্যাপ তৈরি করছি I আমি হাজার সারি সহ একটি টেবিল / গ্রিড প্রদর্শন করতে চাই। বাছাই, অনুসন্ধান, পৃষ্ঠাসমূহ ইত্যাদির মতো বৈশিষ্ট্যগুলির সাথে অ্যাংুলার জেএস এবং বুটস্ট্র্যাপের জন্য সর্বোত্তম উপলব্ধ নিয়ন্ত্রণ কী?


6
আপনার এখানে অবশ্যই এনজি-গ্রিডের দিকে নজর দেওয়া উচিত: কৌণিক-ui.github.io/ng-grid
মাইঙ্গুয়ে

1
ইউআই বুটস্ট্র্যাপ ব্যবহার করবেন না কেন? এটি সম্প্রতি বুটস্ট্র্যাপ 3 ব্যবহারের জন্য আপডেট হয়েছে: কৌণিক-ui.github.io/bootstrap
কলামভাস

3
হাজার হাজার সারিগুলি সমস্ত ক্লায়েন্টকে প্রেরণ করা উচিত নয়। সুতরাং একটি খাঁটি জাভাস্ক্রিপ্ট সমাধান এত দুর্দান্ত কাজ করে না। পৃষ্ঠাগুলি সম্পাদনা এবং / অথবা আপনাকে অনুসন্ধান করতে সার্ভারটির প্রয়োজন।
ফ্লপ করুন

পরের বার এনজিটিস্টি টেবিল zizzamia.com/ng-tasty/directive/table এটি বুটস্ট্র্যাপ CSS টেবিলের উপর ভিত্তি করে শট দেওয়ার চেষ্টা করুন :)
জিজামিয়া

3
কৌণিকটি " ইউআই-গ্রিড " এ চলেছে যা সারণীর বৈশিষ্ট্যগুলি অন্তর্নির্মিত থাকবে। "jquery ডেটাবেটস"
ডায়রিফোলিও

উত্তর:


223

এনজিগ্রিড, এনজিটিবেল, টিআরএনজিগ্রিড এবং স্মার্ট টেবিল চেষ্টা করার পরে , আমি এই সিদ্ধান্তে পৌঁছেছি যে স্মার্ট টেবিলটি এখন পর্যন্ত অ্যাঙ্গুলারজেএস-ও বুটস্ট্র্যাপ অনুসারে সর্বোত্তম বাস্তবায়ন। এটি স্ট্যান্ডার্ড কৌণিক ব্যবহার করে নিজের, নিষ্পাপ টেবিলটি তৈরি করার ঠিক ঠিক একইভাবে তৈরি করা হয়েছে। সর্বোপরি, তারা কয়েকটি নির্দেশিকা যুক্ত করেছে যা আপনাকে বাছাই, ফিল্টারিং ইত্যাদিতে সহায়তা করে Their তাদের পন্থা এটিকে নিজেকে প্রসারিত করাও সহজ করে তোলে। তারা টেবিলগুলির জন্য নিয়মিত এইচটিএমএল ট্যাগ এবং সারিগুলির জন্য স্ট্যান্ডার্ড এনজি-রিপিট এবং ফর্ম্যাটের জন্য স্ট্যান্ডার্ড বুটস্ট্র্যাপ ব্যবহার করে তা আমার স্পষ্ট বিজয়ী করে তোলে।

তাদের জেএস কোড কৌণিকের উপর নির্ভর করে এবং আপনি চাইলে আপনার এইচটিএমএল বুটস্ট্র্যাপের উপর নির্ভর করতে পারে। জেএস কোডটি মোট 4 কেবি এবং আপনি এমনকি আরও ছোট পায়ের ছাপে পৌঁছাতে চাইলে আপনি সহজেই সেখান থেকে জিনিসগুলি বাছাই করতে পারেন।

অন্যান্য গ্রিডগুলি যেখানে আপনাকে বিভিন্ন ক্ষেত্রে ক্লাস্ট্রোফোবিয়া দেবে, সেখানে স্মার্ট টেবিলটি কেবল উন্মুক্ত এবং বিন্দুতে অনুভব করে।

আপনি যদি ইনলাইন সম্পাদনা এবং অন্যান্য উন্নত বৈশিষ্ট্যগুলির উপর খুব বেশি নির্ভর করে থাকেন তবে উদাহরণস্বরূপ আপনি এনজিটিবেলটি দিয়ে দ্রুত উঠে পড়তে পারেন। তবে আপনি স্মার্ট সারণীতে এই জাতীয় বৈশিষ্ট্যগুলি সহজেই যুক্ত করতে পারেন free

স্মার্ট টেবিল মিস করবেন না !!!

এটি নিজে ব্যবহার না করে স্মার্ট টেবিলের সাথে আমার কোনও সম্পর্ক নেই।


12
স্মার্ট সারণীতে সবেমাত্র একটি ছোট বাগ খুঁজে পেয়েছে, এটি জানিয়েছে এবং এটি কয়েক ঘন্টার মধ্যেই ঠিক হয়ে গেছে। আমি অবাক হয়েছি যে সবাই স্মার্ট টেবিল ব্যবহার করছে না - এটি অন্য সকলের চেয়ে অনেক বেশি ভাল।
রিকি হেলগসন

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

1
এনজি-গ্রিড .7.০..7 প্রকাশিত হয়েছে এবং এটি আমার পক্ষে ভাল কাজ করেছে (বর্তমানে ইউআই-গ্রিড নামে পরিচিত)
কিমবল রবিনসন

1
সমস্যাটি হ'ল: স্মার্ট টেবিলের পৃষ্ঠাগুলিটি সত্যই কুৎসিত, কোনও প্রথম পৃষ্ঠা নেই, কোনও শেষ পৃষ্ঠা নেই, এনজি-টেবিলের পৃষ্ঠাগুলিটি সত্যই আরও আধ্যাত্মিক বিষয়। বাছাইয়ের জন্য একই জিনিস, স্মার্ট-টেবিলে আমরা কেবল জানি না আমরা ক্লিক করার আগে বাছাই করতে পারি, এটি
মোটেও অর্গানিক

1
তুচ্ছ পড়ার জন্য স্মার্ট টেবিল, কেবলমাত্র সমস্ত কিছুর জন্য ইউআই-গ্রিড, বা কেবল ইউআই-গ্রিড :)
এলোমেলো ইউএস

116

আমার একই প্রয়োজনীয়তা ছিল এবং এই উপাদানগুলি ব্যবহার করে এটি সমাধান করা হয়েছে:

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

এটির মতো দেখতে কেমন একটি ধারণা দেওয়ার জন্য এখানে একটি বর্তমান প্রকল্পের একটি স্ক্রিনশট রয়েছে:

এখানে চিত্র বর্ণনা লিখুন

[জুলাই 2017 আপডেট করুন]

কয়েক বছর ধরে উত্পাদনে এনজি-গ্রিড থাকার পরেও আমি বলতে পারি যে এই উপাদানটি নিয়ে কোনও বড় সমস্যা নেই। হ্যাঁ, প্রচুর পরিমাণে ক্ষুদ্র ত্রুটিযুক্ত ত্রুটিযুক্ত ত্রুটি রয়েছে, তবে কোনও স্টোপার নেই (অন্তত আমার ব্যবহারের ক্ষেত্রে) এটি বলার পরে, আপনি যদি স্ক্র্যাচ থেকে কোনও প্রকল্প শুরু করেন তবে আমি এই উপাদানটি ব্যবহার করার বিরুদ্ধে দৃ strongly়ভাবে পরামর্শ দেব। আপনি কৌনিক জেএস ১.০.x এর সাথে আবদ্ধ হলে এই উপাদানটি একটি ভাল বিকল্প । আপনি যদি কৌণিক সংস্করণ চয়ন করতে নিখরচায় থাকেন তবে একটি নতুন উপাদানটির জন্য যান। এঙ্গুলার 4 এর সারণী উপাদানগুলির একটি তালিকা এই ব্লগে স্যাম ডিয়ারিং দ্বারা সংকলিত হয়েছিল ।


2
উইজমো দলবদ্ধকরণ, বাছাইকরণ ইত্যাদির মতো কৌণিক দিকনির্দেশনাও সরবরাহ করে আপনি এনজিগ্রিড এবং উইজমো গ্রিডের বেনমার্ক নমুনাটিও কৌনিক জেএস এর সাথে দেখতে পারেন: Demos.componalone.com/wijmo/Angular/GridBenchmark/…
আশীষ

@ লার্স বেহঙ্কে এনজি-গ্রিডে বুটস্ট্র্যাপ টেবিল স্টাইলটি কীভাবে প্রয়োগ করবেন? যতদূর আমি দেখেছি, এনজি-গ্রিড টেবিল টিআর ট্যাগ ব্যবহার করে না যা বুটস্ট্র্যাপ সিএসএসের উপর নির্ভর করে।
এলপিডেদেব

এনজি-গ্রিড উপাদানটির প্রয়োগ বুটস্ট্র্যাপের ভিত্তিতে নয়। তাই বুটস্ট্র্যাপ জিইউআই উপাদানগুলির যতটা সম্ভব নিবিড় চেহারা এবং অনুভূতি পেতে আমি এনজি-গ্রিড.বিহীনকে কাস্টমাইজ করেছি।
লার্স বেহনেকে

1
প্রকল্প এনজি-গ্রিডটি ইউআই গ্রিড হিসাবে নতুন করে লেখা হচ্ছে যা ui
grid.info-

2
২০১ statistics সালের পরিসংখ্যান দেখায় যে এনজি-টেবিল প্লাগইনটির এখনও চাহিদা রয়েছে: গিটহাব: এ। এনজি-গ্রিড: ~ 3500 কমিট করে, ~ 800 ইস্যু করে। বি স্মার্ট-টেবিল: ~ 300 কমিট করে, 40 ডলার ইস্যু করে। সি এনজি-টেবিল: ~ 500 কমিট করে, ~ 200 ইস্যু। গুগল ট্রেন্ডস কেবল তুলনা করে একই ধারণা প্রমাণিত করে: "কৌণিক স্মার্ট টেবিল", "কৌণিক ইউআই গ্রিড", "কৌণিক এনজি টেবিল"। google.com/trends/…
অ্যান্টন লাহিন

87

"হাজার হাজার সারি" দিয়ে আপনার সেরা বেটটি অবশ্যই সার্ভার সাইড পেজিং করা। আমি যখন কিছুক্ষণ আগে আলাদা আলাদা AngularJs টেবিল / গ্রিড বিকল্পগুলি সন্ধান করলাম তখন তিনটি পরিষ্কার পছন্দ ছিল:

তিনটিই ভাল, তবে ভিন্নভাবে প্রয়োগ করা হয়েছে। আপনি কোনটি বেছে নেবেন তা সম্ভবত অন্য যে কোনও কিছুর চেয়ে ব্যক্তিগত পছন্দের ভিত্তিতে বেশি হবে।

এনজি-গ্রিড সম্ভবত কৌণিক-ইউআইয়ের সাথে যুক্ত থাকার কারণে সর্বাধিক পরিচিত, তবে আমি ব্যক্তিগতভাবে এনজি-টেবিলটিকে পছন্দ করি, আমি তাদের বাস্তবায়ন পছন্দ করি এবং আপনি কীভাবে এটি ব্যবহার করেন এবং তাদের দুর্দান্ত দস্তাবেজ এবং উদাহরণ রয়েছে এবং সক্রিয়ভাবে উন্নত হচ্ছে।


7
কেউ এনজি-টেবিলের কথা উল্লেখ করে খুশি হয়েছিল। আমিও এনজি-গ্রিডের চেয়ে এনজি-টেবিলটিকেই বেশি পছন্দ করি কারণ এতে আরও ভাল স্টাইলিং রয়েছে, বিশেষত সম্পাদনা মোডে।
রব জে

2
এখানে এনজিটিবেল ব্যান্ডওয়াগনে ঝাঁপিয়ে পড়ছে। আমি একটি প্রকল্পের জন্য এনজি-গ্রিড নিয়ে গিয়েছিলাম এবং এটি বেশ ভয়ানক। আমি এনজি-গ্রিডের সাথে নিখুঁতভাবে এর কৌণিক-ইউআইয়ের সাথে যুক্ত হওয়ার কারণে গিয়েছিলাম এবং এটি গিথুবকে আরও কিছুটা সক্রিয় বলে মনে হচ্ছে। আমি মনে করি আমি এনজিটবেলে যেতে চলেছি। আশা করি এটি খুব বেশি কঠিন হবে না।
ব্রেট

10
আরে, কৌণিক বাস্তুতন্ত্রের নবাগত, আমি প্রথমে "আরও ভাল" ওয়েবসাইটের কারণে এনজি-গ্রিডের সাথে যাওয়ার চেষ্টা করেছি, তবে তাদের গভীর-নেস্টেড ডিভ কাঠামোর কারণে দ্রুত স্টাইলিং সমস্যায় পড়েছি। এখন পর্যন্ত আমি এনজি-টেবিলটি আরও ভাল পছন্দ করি কারণ এটি আসলে একটি ব্যবহার করে table। আমি কেবল বুটস্ট্র্যাপ টেবিল ক্লাস প্রয়োগ করতে পারি এবং এটি কাজ করে ...
পিয়েরে হেনরি

1
নোট করুন স্মার্ট-টেবিলের কোড এবং পদ্ধতির সংস্করণ v1.0.0 (আগস্ট 2014) এর সাথে মূল পরিবর্তন হয়েছে তাই এই তারিখের আগে করা মন্তব্যগুলি আর প্রাসঙ্গিক নয়
লরেন্ট

4
এনজি-টেবিলটি বেশিরভাগ সুপ্ত হয়ে পড়েছে কারণ এটি ইউক্রেনের একক ব্যক্তি দ্বারা রক্ষণাবেক্ষণ করা হয় এবং সেখানে আরও অনেক সমস্যা রয়েছে। এনজি-গ্রিড version.০ সংস্করণের জন্য ইউআই-গ্রিড হিসাবে পুনরায় লেখা হচ্ছে তবে এটি উত্পাদনের জন্য প্রস্তুত নয়। সুতরাং এখন সাধারণত কৌণিক সারণি বাস্তবায়ন চয়ন বা সুইচ করার জন্য ভাল সময় নয়। স্মার্ট-টেবিলটি কম বেশি একজনের দ্বারাও রক্ষণাবেক্ষণ করা হয়। আমরা বর্তমানে এনজি-টেবিল ব্যবহার করছি, তবে আমরা ইউআই-গ্রিডটি পরিণত হওয়ার সাথে সাথে স্যুইচ করার পরিকল্পনা করছি।
স্প্ল্যাক্টর

77

কৌনিক গ্রিড সমৃদ্ধ একটি বৈশিষ্ট্য হ'ল:

trNgGrid

এর কয়েকটি বৈশিষ্ট্য:

  • সরলতার কথা মাথায় রেখে নির্মিত হয়েছিল।
  • ব্রাউজারগুলি রেন্ডারিংকে অনুকূলিত করতে মেশিনে এইচটিএমএল টেবিল ব্যবহার করছে।
  • উদ্বেগের বিচ্ছিন্নতা সংরক্ষণ করে সম্পূর্ণরূপে ঘোষণামূলক, এভাবে আপনাকে আপনার কন্ট্রোলারগুলিকে গোলমাল না করে HTML এটিকে সম্পূর্ণরূপে বর্ণনা করার অনুমতি দেয় describe
  • টেমপ্লেট এবং দ্বিমুখী ডেটা বাউন্ড বৈশিষ্ট্যগুলির মাধ্যমে সম্পূর্ণ কাস্টমাইজযোগ্য।
  • টাইপস্ক্রিপ্টে কোড লিখিত থাকা বজায় রাখা সহজ।
  • নির্ভরতার খুব সংক্ষিপ্ত তালিকা রয়েছে: ularচ্ছিক বুটসওয়াচ থিম সহ অ্যাংুলারজে এবং বুটস্ট্র্যাপ সিএসএস।

trNgGrid

উপভোগ করুন। হ্যাঁ, আমি লেখক। আমি সমস্ত আঙ্গুলের গ্রিডগুলি দিয়ে বিরক্ত হয়েছি।


5
এটির আরও কিছু স্বীকৃতি দরকার। আমি দিয়ে শুরু ngGrid। আমি অনুমান করতে পারছিলাম না যে আমার কোন সংস্করণটি ব্যবহার করার কথা ছিল কারণ আমি অনুমান করি যে আমি তাদের 2.x থেকে 3.x এর মধ্যে রূপান্তর শুরু করেছি এবং আমি এমনকি টেবিলটি কাজ করতে সক্ষম হয়েছি না। তারপরে আমি ngTableকোন ধরণের কাজ করে চলেছি। সঠিকভাবে কাজ করার জন্য আমি বাছাই করতে বা পেজিং করতে পারিনি, তবে যেভাবে আমি ডেটা লোড করছি তার কারণে এটি আমার হতে পারে $http। তারপরে আমি এই trNgGridএবং পবিত্র জঞ্জাল দেখেছি ... উঠে আসা এবং চালানো খুব সহজ। আশা করি আমি এখানে আরও লিখতে পারতাম, তবে আমি সবাইকে প্রথমে এটি ব্যবহার করার পরামর্শ দিচ্ছি!
রনি 17

2
আমি @ রনির সাথে পুরোপুরি একমত এটিতে আরও মনোযোগ দেওয়া উচিত। আরও কিছুটা জটিল কিছু করার জন্য এনজি-গ্রিড / ইউআই-গ্রিডের সাথে পুরো দিন লড়াইয়ের পরে, আমি টিআরএনজিগ্রিডকে চেষ্টা করেছিলাম এবং প্রথম চেষ্টা করে কাজ করেছি।
জনি এভারসন

4
এটি দেখতে দুর্দান্ত লাগছে, যদিও স্থির শিরোনাম,
পুনরায় আকার

বুটস্ট্র্যাপ একটি কঠিন নির্ভরতা? আমি আমার গ্রিডটি কাস্টম সিএসএস ব্যবহার করতে চাই। সম্ভব?
জসদীপ সিং

এর আরও স্বীকৃতি দরকার। আমি এনজি-গ্রিডের সাথে যাওয়ার এত কাছাকাছি ছিলাম যতক্ষণ না বুঝেছিলাম এটি এমনকি এইচটিএমএল টেবিল ব্যবহার করছে না।
রায়ানউইনচেস্টার

39

এই পোস্টটি যে কেউ পড়ছেন তাদের জন্য: নিজেকে অনুগ্রহ করুন এবং এনজি-গ্রিড থেকে দূরে থাকুন। বাগগুলি পূর্ণ (সত্যিই..পরিচয়টির প্রায় প্রতিটি অংশই কোনও না কোনওভাবে ভেঙে গেছে), ডিভগুলি 3.0. এ কাজ করার জন্য 2.0.x শাখার সমর্থন ত্যাগ করেছে যা প্রস্তুত হওয়ার খুব দূরে। আপনার নিজের দ্বারা সমস্যাগুলির সমাধান করা সহজ কাজ নয়, এনজি-গ্রিড কোডটি ছোট নয় এবং সহজ নয়, যদি না আপনার প্রচুর সময় এবং সাধারণভাবে কৌণিক এবং জেএস সম্পর্কে গভীর জ্ঞান না থাকে তবে এটি একটি কঠিন কাজ হয়ে যাবে।

নীচের লাইন: বাগগুলি পূর্ণ এবং শেষ স্থিতিশীল সংস্করণটি পরিত্যাগ করা হয়েছে।

গিথুব পিআর পূর্ণ, তবে তাদের উপেক্ষা করা হচ্ছে। আপনি যদি ২.x শাখায় একটি বাগ রিপোর্ট করেন তবে এটি বন্ধ হয়ে যাবে।

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


আপনি কি এই বাগ / পরিস্থিতিগুলির কয়েকটি উদাহরণ বলতে পারেন যা আপনাকে মাথা ব্যথা করে? আমি আগ্রহী কারণ পরিচিত বিকল্পগুলির মধ্যে একটি বেছে নেওয়ার ক্ষেত্রে (এনজি-গ্রিড, টিআরএনজিগ্রিড, এনজি-টেবিল, স্মার্ট টেবিল) আমি সবে এনজি-গ্রিড দিয়ে শুরু করছি এবং আপনার পোস্টটি পড়ার পরে এবং 10 টি আপভোট দেখার পরে আমি কেবল ভয় পেয়ে গেলাম!
ক্রীড়া

1
ঠিক আছে, তাদের মধ্যে কিছু স্থির হয়ে গেছে আমার বিশ্বাস, তারা মাসখানেক ধরে বসে থাকা 20 টি অনুরোধের মতো একীভূত হয়েছিল। আমার যে সমস্যা ছিল? তাদের অনেকের গ্রিড মেকআপের জন্য তারা টেবিলের পরিবর্তে ডিভগুলি ব্যবহার করার কারণ ছিল। এছাড়াও গ্রিডগুলি যে ঘটনাগুলি প্রকাশ করে তা বগি, যা আমাকে প্রচুর সমস্যা দেয় কারণ আমি আচরণের মতো অসীম-স্ক্রোল বাস্তবায়ন করছিলাম, এমন কিছু পরিস্থিতিতে স্ক্রোল ইভেন্ট এলোমেলোভাবে গুলি চালিয়ে যাচ্ছিল না। কলামগুলি স্বতঃ-প্রস্থ মোটেই কাজ করে না।
অগল্লুক

শেষ পর্যন্ত, আপনি গ্রিডটি কীভাবে ব্যবহার করতে চান এবং আপনার প্রকল্পে প্রয়োজনীয় কাস্টমাইজেশনের স্তর নির্ভর করবে। গিথুবটি পরীক্ষা করুন, খোলা সমস্যাগুলি পড়ুন, এমন একটি ডেমো তৈরি করুন যা আপনার ব্যবহারের সমস্ত ক্ষেত্রে কভার করে এবং দেখুন এটি কীভাবে কাজ করে। তবে মনে রাখবেন, ২.x শাখা দেব পরিত্যাগ করা হয়েছে, সুতরাং ভবিষ্যতে আপনার শূন্য সমর্থন থাকবে।
Agusluc

15

টিএনএনজিগ্রিড এখনও পর্যন্ত দুর্দান্ত কাজ করছে। আমি এনজি-গ্রিডকে পছন্দ করে এবং এই উপাদানটিতে স্থানান্তরিত করার কারণগুলি এখানে

  • এটি টেবিল উপাদান তৈরি করে যাতে এটি বুটওয়্যাচ করা যায় এবং বুটস্ট্র্যাপ .css এর সমস্ত শক্তি ব্যবহার করে (এনজি-গ্রিড jQuery UI থিম ব্যবহার করে)।

  • সহজ, ডকুমেন্টেড গ্রিড অপশনগুলি।

  • সার্ভার সাইজ পেজিং কাজ করে


10

আপনার যদি জিকিউরি পটভূমি থাকে তবে কৌনিকটিতে কীভাবে ভাববেন এই প্রশ্নের উত্তরটির শেষে জোশ ডেভিড মিলার শীর্ষ পোস্টটি সংক্ষেপে বলেছে:

এমনকি jQuery ব্যবহার করবেন না। এমনকি এটি অন্তর্ভুক্ত করবেন না। এটা আপনাকে পিছনে রাখা হবে। এবং যখন আপনি এমন কোনও সমস্যার মুখোমুখি হন যা আপনি মনে করেন যে আপনি ইতিমধ্যে jQuery এ কীভাবে সমাধান করবেন জানেন, আপনি সেখানে পৌঁছানোর আগে $অ্যাংুলারজেএস-এর মধ্যে এটি কীভাবে করবেন তা চিন্তা করার চেষ্টা করুন। আপনি যদি না জানেন, জিজ্ঞাসা করুন! 20 এর মধ্যে 19 বার, এটি করার সর্বোত্তম উপায়টির জন্য jQuery প্রয়োজন হয় না এবং আপনার আরও কাজের জন্য jQuery ফলাফলের সাথে এটি সমাধান করার চেষ্টা করুন।

এখন আপনি যদি কাস্টমাইজেশনের জন্য প্রচুর সংখ্যক বৈশিষ্ট্য এবং বিকল্পগুলির একটি গ্রিড চান তবে jQuery ডেটা টেবিল অন্যতম সেরা। আমি দেখেছি কেবল কৌনিক-গ্রিডগুলি jQuery ডেটা টেবিলগুলি কী করতে পারে তার কাছে আসে না।

তবে , jQuery ডেটা টেবিলগুলি AngularJS এর ​​সাথে ভালভাবে সংহত হয় না। (বিভিন্ন প্রচেষ্টা হয়েছে, কিন্তু কোনওটি বিরামবিহীন সংহতকরণের প্রস্তাব দেয় না))

সম্ভবত এটি দুটি বিকল্পের সাথে একজন ব্যক্তিকে ছেড়ে দেয়।

প্রথমটি হ'ল খাঁটি কৌণিক গ্রিডের সাথে যেতে হবে যা ডেটাবেলগুলির সমতুল্য বৈশিষ্ট্যযুক্ত নয়। আমি @ মুনস্টম এর সাথে অন্য আঙ্গুলের গ্রিডগুলি সম্পর্কে বিরক্ত হওয়ার বিষয়ে একমত, এবং টিএনএনজিগ্রিড দেখতে সুন্দর লাগছে না।

দ্বিতীয় বিকল্পটি বলার জন্য: এটি 20 টির মধ্যে বিরল 1 টির মধ্যে একটি যেখানে আপনার jQuery ব্যবহার করা উচিত এবং jQuery ডেটাট্যাবস প্লাগ-ইন থাকা উচিত, কারণ খাঁটি কৌণিক গ্রিডের সাথে চাকাটি পুনরায় উদ্ভাবনের প্রচেষ্টা একটি ফল পেয়েছে have ডেটা টেবিলের চেয়ে কম শক্ত চাকা।

এটি অন্যথায় থাকলে ভাল হত, তবে আমি কেবল কৌণিক বাস্তুসংস্থানটি jQuery ডেটা টেবিলগুলির মতো শক্তিশালী গ্রিড নিয়ে আসতে দেখিনি, এবং এটি কোনও ভাল অ্যাপ্লিকেশনটিতে একটি ভাল ডেটা গ্রিডের মতো সুন্দর নয় : একটি ভাল গ্রিড একটি অপরিহার্য।


+1 তাই সত্য। লজ্জাজনক যে ডেটা টেবিলগুলি এখনও সংহত করা যায় নি; খুব খুব দৃly়ভাবে ডিওমে সংযুক্ত সম্ভবত।
CSSian


9

আপনি বুটস্ট্র্যাপ 3 ক্লাস ব্যবহার করতে পারেন এবং এনজি-রিপিট নির্দেশিকা ব্যবহার করে একটি টেবিল তৈরি করতে পারেন

উদাহরণ:

angular.module('App', []);

function ctrl($scope) {
    $scope.items = [
        ['A', 'B', 'C'],
        ['item1', 'item2', 'item3'],
        ['item4', 'item5', 'item6']
    ];
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="App">
  <div ng-controller="ctrl">
    
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <th ng-repeat="itemA in items[0]">{{itemA}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-repeat="itemB in items[1]">{{itemB}}</td>
        </tr>
        <tr>
          <td ng-repeat="itemC in items[2]">{{itemC}}</td>
        </tr>
      </tbody>
    </table>
    
    
  </div>
</div>

সরাসরি উদাহরণ: http://jsfiddle.net/choroshin/5YDJW/5/

হালনাগাদ:

বা আপনি সর্বদা জনপ্রিয় এনজি-গ্রিড চেষ্টা করতে পারেন , এনজি-গ্রিড বাছাই, অনুসন্ধান, গোষ্ঠীকরণ ইত্যাদির জন্য ভাল তবে আমি এখনও এটি বড় স্কেলের ডেটাতে পরীক্ষা করে দেখিনি।


7
হ্যাঁ, কৌণিক ক্ষেত্রে বাছাই, পৃষ্ঠাবদ্ধকরণ, ফিল্টারিং, এজাক্স রেলোডিং ইত্যাদি ছাড়াই কোনও টেবিল তৈরি করার এটি স্ট্যান্ডার্ড উপায়। তবে হাজার হাজার সারি দিয়ে এটি কোনও প্রয়োগকে গ্রাইন্ডিং স্টলে নিয়ে আসবে।
মাইঙ্গুয়

এটি একটি খুব laggy UI ফলাফল হবে।
boi_echos

8

অভিযোজিত-স্ট্র্যাপ । এখানে বেহালার

এটি অত্যন্ত হালকা ওজনের এবং গতিশীল সারির উচ্চতা রয়েছে।

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>

কলামগুলির প্রস্থ পরিবর্তন করা কি সম্ভব?
টমাসজ ওয়াজকিজেক

4

অন্যান্য উত্তরে যেমন উল্লেখ করা হয়েছে: অনুসন্ধান সহ একটি টেবিলের জন্য, " এনজি-গ্রিড " নির্বাচন করুন এবং পৃষ্ঠাগুলি সেরা বিকল্প options আমি দুটি জিনিস এসেছি যা উল্লেখ করেছি যা প্রয়োগ করার সময় কার্যকর হতে পারে:

Env সেট করতে:

  1. জেএসএন ডেটা তৈরি করতে http://www.json-generator.com/ । উন্নয়নের দ্রুততর করতে আপনার নমুনা ডেটা সেট করতে এটি একটি দুর্দান্ত সরঞ্জাম tool

  2. আপনার বাস্তবায়নের জন্য আপনি এই প্লাঙ্কারটি পরীক্ষা করতে পারেন। আমি অন্তর্ভুক্ত করা সংশোধন করেছেন: অনুসন্ধান, নির্বাচন করে পত্রাঙ্কন http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

আপনি স্মার্ট টেবিল সম্পর্কে এই টিউটোরিয়ালটি যাচাই করতে পারেন, আপনার প্রয়োজনীয় সমস্ত তথ্য দেয়: http://lorenzofox3.github.io/smart-table-website/

তারপরে পরবর্তী প্রশ্নটি হ'ল bootstrap 3: এটি ঠিক নয় তবে এই টেমপ্লেটগুলি ভাল দেখাচ্ছে। - আপনি কেবল https://github.com/angular-ui/bootstrap/tree/master/template ব্যবহার করতে পারেন সমস্ত টেম্পলেট ভাল লেখা আছে।

আমি বুটস্ট্র্যাপ 3 কে কৌণিক রূপে রূপান্তর করতে পারি তবে এটি নিম্নলিখিত লিঙ্কগুলিতে ইতিমধ্যে উল্লিখিত হয়েছে:

দয়া করে নোট করুন যে স্মার্ট-টেবিল সম্পর্কিত আপনাকে এটি পরীক্ষা করতে হবে এটি আপনার কৌনিক সংস্করণের জন্য প্রস্তুত কিনা


3

কেন্ডো গ্রিড যেমন উইজমো তেমন ভাল। আমি জানি কেন্ডো তাদের ডেটাসোর্সের জন্য কৌণিক বাঁধার সাথে আসে এবং আমি মনে করি উইজমোর একটি কৌনিক প্লাগইন রয়েছে। উভয়েই নিখরচায় নয়।


3
কেনডোআইআইয়ের সাথে আমার একটি ভয়ানক অভিজ্ঞতা হয়েছে। এটি এতটাই ফুলে গেছে যে এটি কুকুরের মতো চলে এবং আরও জটিল উপাদানগুলির জন্য এটি একসাথে কুপিয়ে দেখা যায় যে "বাক্সের বাইরে" না বলে কাজ করার বৈশিষ্ট্যগুলি পাওয়া অসম্ভব না হলে এটি কঠিন। এটি তাদের সার্ভারের উপাদানগুলির সাথে কাজ করার জন্যও ভারী হয় এবং প্রান্তের ক্ষেত্রে খুব খারাপভাবে নথিভুক্ত হয়। আমি তাদের থেকে অনেক দূরে থাকতাম!
পূর্বাভাস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.