কয়েক মিলিয়ন সারিগুলির জন্য জাভাস্ক্রিপ্ট ডেটা গ্রিড [বন্ধ]


225

আমাকে জাভাস্ক্রিপ্ট ব্যবহার করে গ্রিডে প্রচুর পরিমাণে সারি ডেটা (অর্থাত্ লক্ষ লক্ষ সারি) উপস্থাপন করতে হবে।

ব্যবহারকারীর পৃষ্ঠাগুলি দেখতে বা একসাথে সীমাবদ্ধ পরিমাণের ডেটা দেখতে পাওয়া উচিত নয়।

বরং এটি উপস্থিত হওয়া উচিত যে সমস্ত ডেটা উপলব্ধ।

একবারে ডেটা ডাউনলোড করার পরিবর্তে, ব্যবহারকারীরা তাদের কাছে আসার সাথে সাথে (যেমন গ্রিডের মাধ্যমে স্ক্রোল করে) ছোট অংশগুলি ডাউনলোড করা হয়।

এই সামনের প্রান্তটি দিয়ে সারিগুলি সম্পাদনা করা হবে না, সুতরাং কেবল পঠনযোগ্য গ্রিডগুলি গ্রহণযোগ্য।

জাভা স্ক্রিপ্টে লিখিত কোন ডেটা গ্রিডগুলি এ জাতীয় সীমলেস পেজিংয়ের জন্য বিদ্যমান?


1
আমি জকিগ্রিডের উত্তরটি অস্বীকার করেছি, যেহেতু এটি বড় ডেটা সেটগুলির জন্য ব্যর্থ বলে মনে হচ্ছে ... অন্য কোনও পরামর্শ? এক্সট্লাইভগ্রিড.কম সম্পর্কে কী ?
রুডিগার

6
আপনার নিজের লিখুন। আমি নিশ্চিত যে অন্যরাও দম বন্ধ করছে কারণ তারা কেবল ডিওমে যুক্ত হচ্ছে। আমি মনে করি আপনার এমন একটি সমাধানের প্রয়োজন হবে যা পর্দা থেকে স্ক্রোল করার সাথে সাথে সারিগুলি সরিয়ে ফেলবে । এটাই একমাত্র উপায়। আপনি কেবল ডিওমে একটি মিলিয়ন টেবিল সারি রাখতে পারবেন না এবং প্রতিটি ব্রাউজারের প্রতিটি পরিবেশে নির্বিঘ্নে প্রদর্শিত এবং স্ক্রোলের প্রত্যাশা করতে পারেন। যুক্তিসঙ্গত হতে.
জোশ স্টোডোলা

2
@ রডিগার: স্লিকগ্রিড এখন সীমাহীন সংখ্যক সারি দেশীয়ভাবে সমর্থন করে। Github.com/mleibman/SlickGrid/tree/unlimited-rows দেখুন । এটি পুরোপুরি পরীক্ষা হয়ে গেলে এটি প্রধান শাখায় একীভূত হবে।
টিন

10
এবং আমি দুঃখ বোধ করছি আপনি কোন দৃ firm় পক্ষে কাজ করছেন। আপনার তথ্যের জন্য, শুধুমাত্র 1 মিলিয়ন সারি প্রদর্শিত 1920x1080 পর্দা , স্ক্রোল বারের প্রতিটি পিক্সেল গতিবেগের জন্য 20 সারি লাফিয়ে উঠবে । আপনার সময় নষ্ট না করে কিছু ব্যবহারযোগ্যতার পরীক্ষা করুন।
স্লিপার স্মিথ

2
এই প্রশ্ন এবং এর শীর্ষ দুটি উত্তর (কমপক্ষে) অপরিসীম দরকারী। এটি কিছু নিম্নমানের উত্তরগুলি আকর্ষণ করতে পারে তবে কোনওভাবেই এই প্রশ্নটি বন্ধ করা উচিত নয়। এই সমস্যাটি সমাধান করার জন্য স্লিকগ্রিড ব্যবহার করা লোককে বহু ঘন্টা ঝামেলা এবং কোডিংয়ের কঠিন কোডিং বাঁচাতে পারে, যদি তারা নিজেরাই এটি পুনরায় প্রয়োগ করার চেষ্টা করে।
স্যাম ওয়াটকিন্স

উত্তর:


190

( অস্বীকৃতি: আমি স্লিকগ্রিডের লেখক )

আপডেট আপডেট এটি এখন স্লিকগ্রিডে প্রয়োগ করা হয়েছে ।

স্লিক সংখ্যক সারি দিয়ে স্লিকগ্রিডে কাজ করার বিষয়ে চলমান আলোচনার জন্য দয়া করে http://github.com/mleibman/SlickGrid/issues#issue/22 দেখুন ।

সমস্যাটি হ'ল স্লিকগ্রিড নিজেই স্ক্রোলবারটি ভার্চুয়ালাইজ করে না - স্ক্রোলযোগ্য ক্ষেত্রের উচ্চতা সমস্ত সারিগুলির মোট উচ্চতায় সেট করা আছে। ব্যবহারকারীর স্ক্রোলিং হওয়ায় সারিগুলি এখনও যোগ করা এবং সরানো হচ্ছে তবে স্ক্রোলিংটি ব্রাউজারটি নিজেই সম্পন্ন করে। এটি এটিকে খুব দ্রুত মসৃণ হতে দেয় (অনস্ক্রোল ইভেন্টগুলি কুখ্যাতভাবে ধীর)। সতর্কতাটি হ'ল ব্রাউজারগুলির সিএসএস ইঞ্জিনগুলিতে বাগ / সীমা রয়েছে যা কোনও উপাদানের সম্ভাব্য উচ্চতা সীমাবদ্ধ করে। IE এর ক্ষেত্রে এটি 0x123456 বা 1193046 পিক্সেল হয়ে থাকে। অন্যান্য ব্রাউজারগুলির জন্য এটি বেশি।

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

স্লিকগ্রিড বর্তমানে অন্যান্য বাস্তবায়নকে ধরে রাখে এমন পারফরম্যান্সের প্রান্তটি না দিয়ে আমি এখনও সীমাহীন সংখ্যক সারিগুলিতে যাওয়ার উপায় খুঁজছি।

রুডিগার, আপনি কীভাবে এটি সমাধান করেছেন তা ব্যাখ্যা করতে পারেন?


1
আমি স্লিকগ্রিডকে সবচেয়ে আবেদনময়ী হিসাবে খুঁজে পেয়েছি - বিশেষত যদি কেউ jQuery নিয়ে কাজ করে works অভিনন্দন! (উদাঃ দুর্দান্ত মনোভাব এবং
দৃistence়তার জন্য

আমি এক্সেল শিরোলেখগুলি দেখানোর জন্য স্লিকগ্রিড ব্যবহার করার চেষ্টা করছি এবং আমি দেখতে পাচ্ছি যে অনেকগুলি কলামের স্লিকগ্রিড থাকার পরে কেবল কলামগুলি নয়, সারিগুলির স্ক্রোলিং অনুকূল করা যায়। আমি আরও লক্ষ্য করেছি যে 120 টিরও বেশি কলাম বা তার বেশি থাকার পরে - স্লিকগ্রিড নতুন সারিগুলিকে একটি নতুন লাইনে রাখে। সর্বাধিক সংখ্যক সারি ফাইলগুলিতে কোথাও সেট করা যেতে পারে?
oneiros

1
স্লিকগ্রিড ভি 2.1 এ কলামগুলির পাশাপাশি সারিগুলির জন্য ভার্চুয়াল স্ক্রোলিং ব্যবহার করেছে। এছাড়াও, উপচে পড়া কলামগুলির সমস্যা সমাধান করা হয়েছে।
টিন

@ টিন - এটি আমার পদ্ধতির অনুরূপ; আমি আমার সময়ের চেয়ে বছর আগে ছিল! "ওয়েব অ্যাপ্লিকেশনগুলিতে অসীম স্ক্রোল তৈরির জন্য একটি অলস ব্লক বিন্যাস আদিম।" docs.google.com/docament/d/…
রডিগার

@ রডিগার হ্যাঁ, আমি এটি প্রায় এক মাস আগে ব্লিঙ্ক গ্রুপে দেখেছি, তবে আমি কীভাবে ছবিতে এটি ফিট করে তা সম্পর্কে নিশ্চিতভাবে নিশ্চিত নই। অলস লেআউটটি ডিওমে আসলে উপস্থিত উপাদানগুলিতে কাজ করে যা আমরা সত্যিই করতে পারি না। দয়া করে বিস্তারিত দিন :)
টিন

84

https://github.com/mleibman/SlickGrid/wiki

" স্লিকগ্রিড পারফরম্যান্সে কোনও হ্রাস ছাড়াই আপনাকে কয়েক হাজার আইটেম দিয়ে সহজেই কাজ করতে সক্ষম করতে ভার্চুয়াল রেন্ডারিং ব্যবহার করে fact বাস্তবে, 100 সারি বনাম 10 টি সারি সহ গ্রিডের সাথে কাজ করার মধ্যে পারফরম্যান্সে কোনও পার্থক্য নেই " "

কিছু হাইলাইট:

  • অভিযোজিত ভার্চুয়াল স্ক্রোলিং (কয়েক হাজার সারি হ্যান্ডেল করুন)
  • অত্যন্ত দ্রুত রেন্ডারিং গতি
  • সমৃদ্ধ কোষগুলির জন্য পটভূমি পোস্ট-রেন্ডারিং
  • কনফিগারযোগ্য এবং কাস্টমাইজযোগ্য
  • সম্পূর্ণ কীবোর্ড নেভিগেশন
  • কলামের আকার পুনরায় আকার / পুনঃক্রম / প্রদর্শন / লুকান
  • কলাম অটোসাইজিং এবং জোর-ফিট
  • প্লাজেবল সেল বিন্যাসক এবং সম্পাদক ors
  • নতুন সারি সম্পাদনা ও তৈরি করার জন্য সমর্থন। " ম্লেইবম্যান দ্বারা

এটি বিনামূল্যে (এমআইটি লাইসেন্স)। এটি jQuery ব্যবহার করে।


এটি 131,001 সারি অবধি সঠিকভাবে কাজ করে ... এটির মতো কোডের একটি লাইন রয়েছে: data.length = Math.min(131000, parseInt(resp.total));... এবং অবশ্যই এটি একটি কারণে হার্ড-কোডড রয়েছে :(
রুডিগার

6
এটি সামান্য কাজ নিয়েছে, তবে dataঅ্যারের দৈর্ঘ্যের চেয়ে গ্রিডকে স্বাধীন করতে আমি কয়েকটি পরিবর্তন করেছি । এটি একটি কুলডেজ, তবে আমার প্রতিক্রিয়াগুলি একটি bigdataঅ্যারেকে জনপ্রিয় করে তুলছে এবং অ্যারে dataথেকে আরও ছোট টান bigdata। প্রোগ্রামের বাকী অংশগুলি স্ক্রোল-বার পরিমাপ এবং আরও কয়েকটি জায়গাগুলি বাদে ছোট ডেটা অ্যারে ব্যবহার করে যা এখন প্রচুর সংখ্যক সারিগুলির জন্য সীমাহীন। সব মিলিয়ে আমার নিজের লেখার চেয়ে অনেক সহজ ছিল।
রুডিগার

8
@ রডিগার: স্লিকগ্রিড এখন সীমাহীন সংখ্যক সারি দেশীয়ভাবে সমর্থন করে। Github.com/mleibman/SlickGrid/tree/unlimited-rows দেখুন । এটি পুরোপুরি পরীক্ষা হয়ে গেলে এটি প্রধান শাখায় একীভূত হবে।
টিন

আমি এক্সেল শিরোলেখগুলি দেখানোর জন্য স্লিকগ্রিড ব্যবহার করার চেষ্টা করছি এবং আমি দেখতে পাচ্ছি যে অনেকগুলি কলামের স্লিকগ্রিড থাকার পরে কেবল কলামগুলি নয়, সারিগুলির স্ক্রোলিং অনুকূল করা যায়। আমি আরও লক্ষ্য করেছি যে 120 টিরও বেশি কলাম বা তার বেশি থাকার পরে - স্লিকগ্রিড নতুন সারিগুলিকে একটি নতুন লাইনে রাখে। সর্বাধিক সংখ্যক সারি ফাইলগুলিতে কোথাও সেট করা যেতে পারে?
oneiros

যদি আপনি সত্যিই দ্রুত কিছু চান, তবে মূল জিনিসগুলি করতে jquery ব্যবহার করা এমন কোনও কিছুর উপর নির্ভর করবেন না, বরং DOM সংযোজনের চেয়ে অভ্যন্তরীণ HTML ব্যবহার করুন। জাভাস্ক্রিপ্ট স্ক্রোলবারগুলি ধীর কম্পিউটারে ব্রাউজারের স্ক্রোলবারগুলির চেয়ে কম ধীরে ধীরে লক্ষণীয় হতে পারে, জটিল সিএসএস বিধিগুলি এড়ানো যায় এবং আপনার একটি একক সারির বিন্যাসকে সহজতর করার জন্য সময় ব্যয় করা উচিত। এই ক্ষেত্রে মাইক্রো-অপ্টিমাইজেশানগুলি তাৎপর্যপূর্ণ হতে পারে। কর্মক্ষমতা উন্নয়নের জন্য এটি কেবল সাধারণ অভ্যাস p jscreen.com আপনার বন্ধু।
ভিটিম.ইস

37

আমার মতে সেরা গ্রিডগুলি নীচে রয়েছে:

আমার সেরা 3 টি বিকল্পগুলি হল jqGrid, jqxGrid এবং ডেটা টেবিল। তারা কয়েক হাজার সারি নিয়ে কাজ করতে এবং ভার্চুয়ালাইজেশন সমর্থন করতে পারে।


1
তালিকার জন্য +1, যদিও তুলনার দিক থেকে তেমন কিছু নেই। প্রতিটি জন্য কমিটের সংখ্যা যুক্ত করা একটি ভাল শুরু হবে - এখন পর্যন্ত ফ্লেক্সিগ্রিডের জন্য 33, স্লিকগ্রিডের জন্য বনাম 491।
ড্যান ড্যাসক্লেস্কু


3
পূর্ববর্তী মন্তব্যের ভিত্তিতে, আমি এখানে প্রতি প্রকল্পের কাঁটাচামড়ার সংখ্যা অন্তর্ভুক্ত করছি: # 1 - স্লিকগ্রিড - 670 কাঁটাচামচ; # 2 - জকিউগ্রিড - 358 কাঁটাচামচ; # 3 - ফ্লেক্সিগ্রিড - 238; # 4 - ডেটা টেবিল - 216; # 5 - ইনগ্রিড - 41; # 6 - জকিউগ্রিডভিউ - 0;
ljs.dev

1
দেখে নিন ব্যবহার করার nexts.github.io/Clusterize.js
ডেনিস

আমি কি মন্তব্য করতে পারি যে স্লিকগ্রিড এখনও বেঁচে আছে এবং ভাল, তবে উপরে বর্ণিত ম্লেইবম্যান রেপো মারা গেছে। নতুন লিঙ্ক: github.com/6pac/SlickGrid (ম্লেইবম্যান তার রেপোতে একটি চূড়ান্ত নোটে এটি উল্লেখ করেছে), বা www.slickgrid.net
বেন ম্যাকিন্টায়ার

25

আমি শিখা যুদ্ধ শুরু করার অর্থ চাই না, তবে ধরে নিচ্ছি যে আপনার গবেষকরা মানব, আপনি তাদের যেমন জানেন তেমন জানেন না। কেবলমাত্র তাদের কাছে ডেটাগুলির পেটাবাইট রয়েছে বলেই তারা কোনও অর্থবহ উপায়ে কয়েক মিলিয়ন রেকর্ড দেখার পক্ষে সক্ষম করে না। তারা বলতে পারে তারা চায় কয়েক মিলিয়ন রেকর্ড দেখতে তবে এটি কেবল নির্বোধ। আপনার বুদ্ধিমান গবেষকদের কিছু প্রাথমিক গণিত করতে বলুন: ধরে নিন যে তারা প্রতিটি রেকর্ড দেখার জন্য 1 সেকেন্ড ব্যয় করে। এই হারে এটি 1000000 সেকেন্ড সময় নেবে, যা ছয় সপ্তাহেরও বেশি সময় ধরে কাজ করে (40 ঘন্টা ওয়ার্ক-সপ্তাহের মধ্যে যা খাবার বা ল্যাভেটরিতে বিরতি না দিয়ে)।

তারা (বা আপনি) গুরুত্ব সহকারে ভাবেন যে কোনও ব্যক্তি (গ্রিডের দিকে তাকানো) কী এই জাতীয় ঘনত্বকে জাগাতে পারে? তারা কি সত্যিই 1 সেকেন্ডে খুব বেশি কাজ করছে বা তারা (সম্ভবত বেশি) স্টাফগুলি ফিল্টার করছে না যা চায় না ? আমার সন্দেহ হয় যে "যুক্তিসঙ্গত আকারের" উপসেটটি দেখার পরে তারা আপনাকে এমন একটি ফিল্টার বর্ণনা করতে পারে যা স্বয়ংক্রিয়ভাবে সেই রেকর্ডগুলি ফিল্টার করে দেয়।

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


2
লক্ষ লক্ষ সারির প্রয়োজনীয়তা থাকা তাদের দেখার সবসময় নয়। কখনও কখনও ক্লায়েন্টরা তাদের নিজস্ব ডেটা বিশ্লেষণ সিস্টেমে চলার জন্য রেকর্ডগুলির একটি আংশিক ডাম্প চায়।
সিবিএমিকস

10
এটি যদি তাদের নিজস্ব বিশ্লেষণের জন্য ডেটা ডাম্প হয়, তবে এটি কোনও ওয়েবপৃষ্ঠায় একটি গ্রিডে প্রদর্শিত হবে না, তাই না?
স্টিভেন বেনিতেজ 4'13

5
আমি সব একবারে দেখতে হবে না। এটি কলাম বাছাই এবং Ctrl+Fজন্য হয়। বিকল্প (পেজিং, ওয়েব-সাইটে অনুসন্ধানের) হল অনেক খারাপ। প্রশ্ন বা উত্তরগুলির মাধ্যমে স্ক্রোল করার চেষ্টা করার সময় কেবল স্ট্যাক ওভারফ্লো দেখুন, ব্যবহারকারীর মন্তব্য ইতিহাসের মাধ্যমে স্ক্রোল করার জন্য রেডডিট। বাছাই এবং তাত্ক্ষণিক অনুসন্ধান উইন্ডোজ এক্সপ্লোরারের একটি শক্তি সরবরাহ করে তবে ওয়েব সাইটগুলির অভাব রয়েছে।
ইয়ান বয়ড

15

আমি বেশ ভাল দৃty়তার সাথে বলতে পারি যে আপনার গুরুত্ব সহকারে ব্যবহারকারীর কাছে কয়েক মিলিয়ন সারি ডেটা প্রদর্শন করার দরকার নেই।

পৃথিবীতে এমন কোনও ব্যবহারকারী নেই যা সেই ডেটা সেটটি বোঝা বা পরিচালনা করতে সক্ষম হবে তাই আপনি প্রযুক্তিগতভাবে এটিকে সরিয়ে ফেলতে পরিচালনা করলেও আপনি সেই ব্যবহারকারীর জন্য কোনও পরিচিত সমস্যা সমাধান করবেন না।

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


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

7

আমি বাফার্ড ভিউ বৈশিষ্ট্য সহ এক্সট্রা জেএস গ্রিডের প্রস্তাব দিই।

http://www.extjs.com/deploy/dev/examples/grid/buffer.html


ExtJs, প্রকৃতপক্ষে। এটি মূলত ডেটা উপস্থাপনের জন্য নির্মিত হয়েছে
কেডিজিডিভ

1
এক্সট্রিজগুলি এত ভাল যে আমি কাঁদতে চাই যে এটি jQuery শীর্ষে নির্মিত হয়নি
জেমস ওয়েস্টগেট

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

7

(অস্বীকৃতি: আমি ডাব্লু 2 এর লেখক)

আমি কীভাবে জাভাস্ক্রিপ্ট গ্রিডকে 1 মিলিয়ন রেকর্ড ( http://w2ui.com/web/blog/7/JavaScript-Grid-with- এক- মিলিয়ন- রেকর্ডস ) সহ কার্যকর করতে পারি সে সম্পর্কে একটি নিবন্ধ লিখেছি । আমি আবিষ্কার করেছি যে শেষ পর্যন্ত 3 টি বিধিনিষেধ রয়েছে যা এটিকে আরও উঁচুতে নেওয়া থেকে বাধা দেয়:

  1. ডিভের উচ্চতার একটি সীমা রয়েছে (ভার্চুয়াল স্ক্রোলিং দ্বারা কাটিয়ে উঠতে পারে)
  2. বাছাই এবং অনুসন্ধানের মতো ক্রিয়াকলাপগুলি 1 মিলিয়ন রেকর্ড বা তার পরে ধীর হতে শুরু করে
  3. র্যাম সীমাবদ্ধ কারণ ডেটা জাভাস্ক্রিপ্ট অ্যারেতে সঞ্চয় করা আছে

আমি গ্রিডটি 1 মিলিয়ন রেকর্ড (আইই বাদে) দিয়ে পরীক্ষা করেছি এবং এটি ভাল অভিনয় করে। ডেমো এবং উদাহরণগুলির জন্য নিবন্ধ দেখুন।


এই এক মিলিয়ন রেকর্ডের সাহায্যে আপনার এইচটিএমএল পৃষ্ঠার আকার 3MB আকারে রয়েছে, তবে আমি যখন আমার ডেটা লোড করি পৃষ্ঠাটি 15MB এর হয়, তখন ডাব্লু 2 কি এটি পরিচালনা করতে পারে? কিছু গণনার জন্য আমার সমস্ত ডেটা দরকার।
চেতন এস চৌধুরী চৌধুরী

6

dojox.grid.DataGrid ডেটার জন্য একটি জেএস বিমূর্তি সরবরাহ করে যাতে আপনি এটি সরবরাহকৃত dojo.data স্টোর সহ বিভিন্ন ব্যাকেন্ডে আপ করতে পারেন বা আপনার নিজের লিখতে পারেন। আপনার অবশ্যই এমন একটি প্রয়োজন হবে যা এই অনেক রেকর্ডের জন্য এলোমেলো অ্যাক্সেসকে সমর্থন করে। ডেটাগ্রিড সম্পূর্ণ অ্যাক্সেসিবিলিটি সরবরাহ করে।

সম্পাদনা করুন তাই এখানে ম্যাথিউ রাসেলের নিবন্ধটির একটি লিঙ্ক যা dojox.grid সহ কয়েক মিলিয়ন রেকর্ড দেখে আপনার প্রয়োজনের উদাহরণটি সরবরাহ করা উচিত। নোট করুন যে এটি গ্রিডের পুরানো সংস্করণ ব্যবহার করে তবে ধারণাটি একই রকম, এখানে কিছুটা বেমানান এপিআই উন্নতি ছিল।

ওহ, এবং এটি সম্পূর্ণ বিনামূল্যে উন্মুক্ত উত্স।


4

আমি jQuery গ্রিড প্লাগইন ব্যবহার করেছি , এটি দুর্দান্ত ছিল।

গণদেবতা


2
ডোজো একটি ভাল গ্রিডও সরবরাহ করে
গ্রেড

Jqgrid জন্য এখানে কাজ করে না দু: খিত ... তারা এর প্রতি সংযোগ আছে stackoverflow.com/questions/tagged/jqgrid তাদের ওয়েবসাইট থেকে trirand.net
Rudiger

4

এখানে কয়েকটি অপ্টিমাইজেশন রয়েছে যা আপনি আপনার গতি বাড়ানোর জন্য প্রয়োগ করতে পারেন। শুধু জোরে জোরে ভাবছি।

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

var data = [];
for(var i = 0; i < 20000000; i++) {
    data.push(i);
}
console.log(data.length);​

আপনি এলআরইউ বা অন্য কিছু ক্যাচিং অ্যালগরিদম ব্যবহার করতে পারেন এবং আপনি কতটা ডেটা ক্যাশে করতে ইচ্ছুক তার উপরের একটি আবদ্ধ থাকতে পারে।

নিজেরাই টেবিল কোষগুলির জন্য, আমি মনে করি DOM নোডগুলি তৈরি / ধ্বংস করা ব্যয়বহুল হতে পারে। পরিবর্তে, আপনি কেবলমাত্র X সংখ্যক কোষের পূর্ব-সংজ্ঞা দিতে পারেন, এবং যখনই ব্যবহারকারী কোনও নতুন অবস্থানে স্ক্রোল করেন, তখন এই কোষগুলিতে JSON ডেটা ইনজেক্ট করুন। পুরো ডেটাসেটকে উপস্থাপনের জন্য কত জায়গার (উচ্চতা) প্রয়োজনীয়তার সাথে স্ক্রোলবারটির কার্যত সরাসরি সম্পর্ক নেই। আপনি স্বেচ্ছায় টেবিলের ধারকটির উচ্চতা নির্ধারণ করতে, 5000px বলুন এবং সারিগুলির মোট সংখ্যায় মানচিত্র রাখতে পারেন। উদাহরণস্বরূপ, যদি ধারকগুলির উচ্চতা 5000px হয় এবং সেখানে মোট 10M সারি থাকে তবে starting row ≈ (scroll.top/5000) * 10Mযেখানে ধারকটির scroll.topশীর্ষ থেকে স্ক্রোলের দূরত্ব উপস্থাপন করে। ছোট ডেমো এখানে

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

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


4

আমি জানি এটি একটি পুরানো প্রশ্ন তবে এখনও .. dhtmlxGrid এছাড়াও লক্ষ লক্ষ সারি পরিচালনা করতে পারে। 50,000 সারি সহ একটি ডেমো রয়েছে তবে গ্রিডে লোড / প্রক্রিয়াজাত করা যায় এমন সারিগুলির সংখ্যা সীমাহীন।

দাবি অস্বীকার: আমি ডিএইচটিএমএলএক্স দল থেকে এসেছি।


আমি 10 এমবি জেসন ডেটা প্রদর্শন করতে এবং গণনায় এটি ব্যবহার করতে চাই, ডিএইচটিএমএলএস কি এটি করতে পারে, সেই ডেটা এবং এইচটিএমএল ট্যাগ সহ আমার ব্রাউজারের পৃষ্ঠাটি প্রায় 15 এমবি এর হয়। এটি কি ডিএইচটিএমএলএক্স ব্যবহার করার উপযুক্ত?
চেতন এস চৌধুরী চৌধুরী


3

অস্বীকৃতি: আমি দীর্ঘদিন ধরে মাথা ব্যথা ছাড়াই ভারী YUI ডেটাটেবল ব্যবহার করি । এটি শক্তিশালী এবং স্থিতিশীল। আপনার প্রয়োজনের জন্য, আপনি একটি স্ক্রোলিংডেটা টেবল উইচ সুপারপোর্ট ব্যবহার করতে পারেন

  • এক্স-স্ক্রলিং
  • Y-স্ক্রলিং
  • XY-স্ক্রলিং
  • একটি শক্তিশালী ইভেন্ট প্রক্রিয়া

আপনার যা প্রয়োজন, তার জন্য আমার মনে হয় আপনি একটি টেবিলস্ক্রোলইভেন্ট । এর এপিআই বলে

যখন একটি স্থির স্ক্রোলিং ডেটা টেবেলে একটি স্ক্রোল থাকে তখন ফায়ার করা হয়।

প্রতিটি ডেটাটেবল যেমন ডেটাসোর্স ব্যবহার করে, আপনি আপনার প্রয়োজনীয়তা অনুসারে আপনার স্ক্রোলিংডেটা টেবিলটি পপুল করার জন্য টেবিলস্ক্রোলইভেন্টের সাথে ল্যাপের আকারের পাশাপাশি এটির ডেটা পর্যবেক্ষণ করতে পারেন

রেন্ডার লুপের আকার বলছে

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

  • ডিফল্টরূপে রেন্ডারলুপসাইজ 0 হয়, সুতরাং সমস্ত সারি একক লুপে রেন্ডার হয়। একটি রেন্ডারলুপসাইজ> 0 ওভারহেড যুক্ত করে যাতে চিন্তাভাবনা করে ব্যবহার করুন।
  • যদি আপনার ডেটার সেটটি যথেষ্ট পরিমাণে (কলামগুলির X সংখ্যাগুলি কলামের ফর্ম্যাটিং জটিলতার সংখ্যা) হয় যা ব্যবহারকারীরা ভিজ্যুয়াল রেন্ডারিংয়ে বিলম্বিত হন এবং / অথবা এটি স্ক্রিপ্টটি স্তব্ধ করে দেয়, একটি রেন্ডারলুপসাইজ সেট করে বিবেচনা করুন
  • 50 এর কম বয়সী একটি রেন্ডারলুপসাইজ সম্ভবত এটির পক্ষে উপযুক্ত নয়। একটি রেন্ডারলুপসাইজ> 100 সম্ভবত আরও ভাল।
  • একটি ডেটা সেট সম্ভবত যথেষ্ট বড় হিসাবে বিবেচিত হবে না যদি এর মধ্যে শত এবং শত শত সারি থাকে।
  • একটি রেন্ডারলুপসাইজ> 0 এবং <মোট সারি থাকার ফলে টেবিলটি একটি লুপে রেন্ডার হয় (রেন্ডারলুপসিপ = 0 এর সমান) তবে এটি কার্যকারিতাও ট্রিগার করে যেমন পোস্ট-রেন্ডার সারি স্ট্রাইপিংকে আলাদা সেটটাইমআউট থ্রেড থেকে পরিচালনা করতে হয়।

এই ক্ষেত্রে

// Render 100 rows per loop
 var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
     renderLoopSize:100
 });

<WHERE_DOES_THE_DATA_COME_FROM> কেবলমাত্র একটি হল ডেটাউত্স । এটি একটি JSON, JSFunction, XML এবং এমনকি একটি একক এইচটিএমএল উপাদানও হতে পারে

এখানে আপনি আমার দ্বারা সরবরাহিত একটি সাধারণ টিউটোরিয়াল দেখতে পারেন। সচেতন থাকুন অন্য কোনও ডেটা_এইচএবিএਬਲ প্লাগলিন একই সময়ে একক এবং দ্বৈত ক্লিক সমর্থন করে না। YUI ডেটা টেবিল আপনাকে অনুমতি দেয়। এবং আরও, আপনি মাথা ব্যাথা ছাড়াই এমনকি জিকুয়ারি দিয়েও এটি ব্যবহার করতে পারেন

কিছু উদাহরণ, আপনি দেখতে পারেন

আপনি ইউইউআই ডেটাটেবল সম্পর্কে অন্য যে কোনও বিষয়ে প্রশ্ন করতে দ্বিধা বোধ করবেন না।

শুভেচ্ছান্তে,


3

আমি বিন্দুটি দেখতে ব্যর্থ হচ্ছি, জেকিগ্রিডের জন্য আপনি ভার্চুয়াল স্ক্রোলিং কার্যকারিতাটি ব্যবহার করতে পারেন:

http://www.trirand.net/aspnetmvc/grid/performancevirtualscrolling

তবে আবার, ফিল্টারিং সহ কয়েক মিলিয়ন সারি করা যেতে পারে:

http://www.trirand.net/aspnetmvc/grid/performancelinq

আমি যদিও "কোনও পৃষ্ঠা নেই বলে" এর বিন্দুটি দেখতে সত্যিই ব্যর্থ, যদিও আমি বলতে চাইছি ... ব্রাউজারে একবারে 1000,000 সারি প্রদর্শন করার কোনও উপায় নেই - এটি এইচটিএমএল কাঁচা 10MB, আমি দেখতে একরকম ব্যর্থ কেন ব্যবহারকারীরা পৃষ্ঠাগুলি দেখতে চান না।

যাই হোক ...


2

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


আমার কাছে এভাবেই আছে। জেএসএনে ফেরত পাঠানো সারির একটি সেটের জন্য একটি অনুরোধ করা হয়েছে ... আমি জাভাস্ক্রিপ্ট ক্লায়েন্ট সাইড রেন্ডারারের সন্ধান করছি যা এটি সমর্থন করে!
রুডিগার

কি??? "ক্লায়েন্ট সাইট রেন্ডারার" হ্যাকটি কী? যে কোনও জাভাস্ক্রিপ্টের জন্য এখনও একটি অজ্যাক্স কল করা দরকার - তাই আপনাকে এখনও কিছু পরিবহন বিন্যাসে স্থির করতে হবে। আপনি কিছু কাজ করে পালাতে পারবেন না। আমার বন্ধু কেউ আপনার জন্য এটি করবে না।
Andriy Drozdyuk

1
আমি জানি যে একটি এজেএক্স কল করতে হবে; এই অংশটি সহজ। ক্লায়েন্ট "স্টার্ট = 20 এবং সীমা = 20" এর মতো কোনও কিছুর জন্য অনুরোধ করে এবং সার্ভার থেকে 20-39 সারি পুনরুদ্ধার করে (এক্সএমএল বা জেএসএন ফর্ম্যাট)। "ক্লায়েন্ট-সাইড রেন্ডারার" (আমার পরিভাষা!) এই অনুরোধগুলি বুদ্ধিমানের সাথে করে (উদাহরণস্বরূপ, যখন ব্যবহারকারী নীচে স্ক্রোল করে), এবং ফলাফলগুলিকে সুন্দর গ্রিডে নির্বিঘ্নে রেন্ডার করে। আপনি যা বলছেন তার বিপরীতে, অন্য কেউ আমার জন্য এই কাজটি করেছেন। এই প্রশ্নের অন্যান্য সমস্ত উত্তর কি এটি।
রুডিগার

ঠিক আছে, মনে হয় এটি "অন্য কেউ" আপনার জন্য করেনি :)
অ্যান্ড্রি দ্রোজডিয়ুক

1

আমি অত্যন্ত ওপেন রিকো সুপারিশ করব । শুরুতে এটি কার্যকর করা কঠিন, তবে একবার এটি ধরলে আপনি আর পিছনে ফিরে তাকাবেন না।



0

আমি সিগমা গ্রিডের পরামর্শ দিচ্ছি, সিগমা গ্রিডে এমবেডিং বৈশিষ্ট্য রয়েছে যা কয়েক মিলিয়ন সারি সমর্থন করতে পারে। এবং এটি করার জন্য আপনার একটি রিমোট পেজিংয়ের প্রয়োজন হতে পারে। ডেমো দেখুন http://www.sigmawidgets.com / প্রোডাক্টস / সিগমা_গ্রিড ২ / ডিমেস / এক্সেসামেল_মাস্টার_ডেটেলস html


0

ডিজিগ্রেড একবার দেখুন:

https://dgrid.io/

আমি সম্মত হয়েছি যে ব্যবহারকারীরা কখনই মিলবে না, কখনও একবারে কয়েক মিলিয়ন সারি ডেটা দেখতে হবে তবে ডিজি গ্রিডগুলি সেগুলি দ্রুত প্রদর্শন করতে পারে (একসাথে স্ক্রিনফুল)।

এক কাপ চা বানানোর জন্য সমুদ্রকে সিদ্ধ করবেন না।


আপনার কাপের চা (লিঙ্ক) পাওয়া যায় নি। :)
অক্ষয়

এটির এখন নিজস্ব সাইট আছে :)
কোলেম্যানটো
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.