javascript - লক্ষ লক্ষ সারির জন্য জাভাস্ক্রিপ্ট ডেটা গ্রিড



জাভাস্ক্রিপ্ট শিখতে চাই (13)

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

SlickGrid এখন SlickGrid প্রয়োগ করা হয়েছে।

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

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

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

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

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

https://src-bin.com

আমি জাভাস্ক্রিপ্ট ব্যবহার করে গ্রিডে ব্যবহারকারীর একটি বৃহত সংখ্যক সারি (অর্থাৎ লক্ষ লক্ষ সারি) উপস্থাপন করতে হবে।

ব্যবহারকারী পৃষ্ঠা দেখতে না বা একযোগে তথ্য শুধুমাত্র সীমাবদ্ধ পরিমাণ দেখতে হবে।

পরিবর্তে, এটি উপস্থিত থাকা উচিত যে সমস্ত তথ্য পাওয়া যায়।

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

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

জাভাস্ক্রিপ্ট লিখিত কি তথ্য গ্রিড, এই ধরনের seamless পেজিং জন্য বিদ্যমান?


Answer #1

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

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

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

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


Answer #2

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

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

আপনি কি প্রয়োজন জন্য, আমি মনে করি আপনি একটি টেবিল ScrollEvent চান। এর এপিআই বলে

একটি নির্দিষ্ট স্ক্রোলিং ডেটা টেবিল একটি স্ক্রোল আছে যখন বহিস্কার।

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

রুপার লুপ আকার বলে

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

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

Here আপনি আমাকে দেওয়া একটি সহজ টিউটোরিয়াল দেখতে পারেন। সচেতন থাকুন অন্য কোনও DATA_TABLE প্লাগিন একই সময়ে একক এবং দ্বৈত ক্লিক সমর্থন করে। YUI DataTable আপনি পারবেন। এবং আরো, আপনি JQuery সঙ্গে এমনকি মাথা ব্যাথা ছাড়া এটি ব্যবহার করতে পারেন

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

আপনি YUI DataTable সম্পর্কে অন্য কিছু সম্পর্কে প্রশ্ন করতে বিনা দ্বিধায়।

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


Answer #3

আমার মতে শ্রেষ্ঠ গ্রিড নীচের হয়:

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



Answer #5

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

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

কিন্তু তারপর আবার, ফিল্টারিং সঙ্গে লক্ষ লক্ষ সারি করা যাবে:

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

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

যাই হোক ...



Answer #7

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

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

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


Answer #8

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

Disclaimer: আমি DHTMLX টিম থেকে এসেছি।


Answer #9

আমি বেশ ভাল নিশ্চিততার সাথে বলতে পারি যে আপনি গুরুত্ব সহকারে ব্যবহারকারীর তথ্যগুলির লক্ষ লক্ষ সারি দেখানোর প্রয়োজন নেই।

বিশ্বের এমন কোনও ব্যবহারকারী নেই যা তথ্য সেটিকে বুঝতে বা পরিচালনা করতে সক্ষম হবে, এমনকি যদি আপনি টেকনিক্যালি এটি বন্ধ করতে পরিচালনা করেন তবেও আপনি সেই ব্যবহারকারীর কোনও জ্ঞাত সমস্যা সমাধান করবেন না।

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


Answer #10

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

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

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

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

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

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

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


Answer #11

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


Answer #12

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

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

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

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

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






slickgrid