بارگذاری داده ها توسط scroll در Grid
دوشنبه 25 آبان 1394همانطور که می دانید، Grid یکی از کنترل های اصلی در هر داشبورد می باشد. هر شرکتی حداقل از یک کنترل Grid برای نشان دادن گزارش ها یا هر نوع داده دیگر استفاده می کند. از این رو این کاپوننت به صورت گسترده مورد استفاده قرار می گیرد. در این مقاله قصد داریم کارایی کامپوننت Grid را بهبود ببخشیم.
بارگذاری سریعتر Grid بسیار مهم است. بنابراین مسئله کارایی کنترل Grid بسیار مورد توجه می باشد. در این مقاله میخواهیم کاری انجام دهیم که کارایی Grid افزایش یابد، برای این کار می خواهیم داده را به ازای هر درخواست کاربر بارگذاری کنیم.( در نوار پیمایش -scroll). درمقاله قبلی نیز مطلب مشابهی با عنوان" بارگذاری داده توسط scroll در #C" را ارائه کردیم، پیشنهاد می شود که این موضوع را نیز مطالعه کنید.
به طور معمول چه کاری باید انجام داد؟در اینجا می خواهیم تمام داده را در head shot مربوط به Grid بارگذاری کنیم، مشکلی که در این روش وجود دارد این است که وقت زیادی را برای بارگذاری تمام داده در Grid خواهد گرفت. از این رو کاربر اپلیکیشن شما را خواهد بست و دیگر به آن بازنمی گردد. این یک نکته منفی است که واقعیت دارد، بنابراین در حال حاضر ما فعلا روی عملکرد تمرکز خواهیم کرد.
پیش زمینه
ما روی dashboard application کار می کنیم، بنابراین برای ما کارایی معیار اصلی است که باید به آن توجه شود. ما از صفحه بندی (paging) سمت سرور برای بهبود کارایی استفاده کرده ایم. و در اینجا تلاش می کنیم که داده را سمت کلاینت بر اساس تقاضا Load کنیم.
اجازه دهید، این کار را هر زمان که کاربر Scroll را پایین می برد انجام دهیم.
حالا شروع می کنیم:
استفاده از کد
برای نشان دادن این نسخه نمایشی ما از کنترل jQWidget jQX Grid استفاده می کنیم.
ابتدا می خواهیم grid را بارگذاری کنیم. برای این کار لازم است دانش اینکه چگونه grid خود را بارگذاری کنیم، داشته باشیم. مانند کد زیر:
یک صفحه HTML ایجاد کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load Data To Grid On Scroll - Sibeesh Passion</title>
</head>
<body>
<h3>Load Data To Grid On Scroll - Sibeesh Passion</h3>
<br />
<div id="jqxgrid"></div>
</body>
</html>
منابع(reference) مورد نیاز را اضافه کنید:
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxdatatable.js"></script>
<link href="/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
برای استفاده از رفرنس های بالا حتما باید jqwidgets و jquery را در قسمت جستجوی Nuget نوشته، و بعد از پیدا کردن از طریق اینترنت آنها را نصب کنید.
حالا وقت آن است که بخش اصلی قرار گیرد.
تنظیمات Gird یا مقدار دهی اولیه Grid
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = new Array();
var firstNames = ["نوشین", "سارا", "علی", "احمد", "رضا", "زهرا", "نیلوفر", "محمد", "سام", "الهام", "شادی"];
var lastNames = ["رضایی", "کرمی", "حاتمی", "علوی", "محمدی", "اصغری", "ستوده", "کنز", "شریفی", "مظلومی", "احدی"];
var productNames = ["کفش", "صندل", "شامپو", "صابون", "لوسیون", "کرم", "کیف", "ساعت", "کتاب", "موبایل", "تبلت", "لپ تاپ"];
var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "20.75", "13.25", "124.0"];
// generate sample data.
var generatedata = function (startindex, endindex) {
var data = {};
for (var i = startindex; i < endindex; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["id"] = i;
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
return data;
}
var source = {
datatype: "array",
localdata:
{},
totalrecords: 1000000
};
// load virtual data.
var rendergridrows = function (params) {
var data = generatedata(params.startindex, params.endindex);
return data;
}
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,
virtualmode: true,
rendergridrows: rendergridrows,
columns: [
{
text: 'شناسه',
datafield: 'id',
width: 100
},
{
text: 'نام',
datafield: 'firstname',
width: 120
},
{
text: 'نام خانوادگی',
datafield: 'lastname',
width: 120
},
{
text: 'محصول',
datafield: 'productname',
width: 180
},
{
text: 'مقدار',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
},
{
text: 'قیمت واحد',
datafield: 'price',
width: 90,
cellsalign: 'right',
cellsformat: 'c2'
},
{
text: ' کل',
datafield: 'total',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
});
</script>
شما می توانید در بالا ببینید که کد در حال ایجاد داده به صورت پویا است و از یک تابع اعلان با نام generatedata استفاده می کند.
اگر دقت کنید می بینید که Grid تنظیمات virtualmode معینی دارد. این بسیار مهم است. این خصوصیت به منظور استفاده برای داده های پویا در Grid می باشد. و خصوصیت دیگر که ما باید در مورد آن مطلع باشیم rendergridrows می باشد. بدین معنا که ما در حال ارائه داده های grid بر اساس درخواست می باشیم. مثل زمانی که کاربر صفحات را تغییر می دهد و یا از scroll استفاده می کند. بنابراین می خواهیم تابع generateddata خود را در rendergridrows فراخوانی کنیم. ما شاخص شروع و پایان را به تابع ارسال می کنیم بنابراین داده های پویا تکرار نخواهند شد:
var rendergridrows = function(params)
{
var data = generatedata(params.startindex, params.endindex);
return data;
}
یکبار داده آماده است و ما آن را به شیئ منبع(source object) و شیئ منبع به dataAdapter و در نهایت dataAdapter به Grid ارسال می کنیم.
خروجی به صورت زیر می شود:
وقتی scroll را به پایین می بریم اطلاعات به صورت زیر تولید می شود:
- Jquery
- 2k بازدید
- 3 تشکر