سبد خرید (0)

آموزش اتصال به پایگاه داده

آموزش اتصال به منبع داده در kendo UI

با استفاده از متد ()kendo.data.DataSource در Kendo UI، می توانید به منبع داده متصل شوید.

پیکربندی (Configuration) منبع داده در Kendo UI

نامتوضیحات
aggregate فیلدهایی را که باید توابع تجمعی (aggregate) روی آنها محاسبه شود را مشخص می کند.
توابع تجمعی عبارت اند از: "average", "count", "max", "min" ,"sum"
پیکربندی aggregate:
  • aggregate: نام تابع تجمعی را مشخص می کند. ("average", "count", "max", "min" ,"sum")
  • field: نام فیلدی که قرار است محاسبه روی آن انجام شود را مشخص می کند.
نکته: محاسبه توابع تجمعی، سمت client انجام می شود، مگر اینکه گزینه serverAggregate را با مقدار true تنظیم کرده باشید.
autoSync (Default: false) اگر با مقدار true تنظیم شود، DataSource بطور اتوماتیک هر تغییری که در آیتم های داده صورت گیرد آنرا با صدا زدن متد sync ذخیره می کند. بصورت پیش فرض، تغییرات بصورت اتوماتیک ذخیره نمی شوند.
batch (Default: false) اگر با مقدار true تنظیم شود، DataSource درخواست های مربوط به چهار عمل اصلی (Create - Read - Update - Delete) را در یک بسته (batch) قرار می دهد و به سرور ارسال می کند.
برای مثال، ویرایش دو ردیف آیتم داده، باعث ایجاد یک درخواست HTTP بجای دو درخواست خواهد شد.
نکته: بصورت پیش فرض، تغییرات آیتم های داده بشکلی که در model مشخص کرده اید ارسال خواهد شد. می توانید این پیش فرض را با استفاده از گزینه parameterMap تغییر دهید.
data با آرایه ای از آیتم های داده تنظیم می شود و مشخص کننده داده های مورد نیاز DataSource است.
DataSource، آیتم ها را به شکلی که در kendo.data.ObservableObject یا kendo.data.Model مشخص کرده اید نشان خواهد داد. (اگر گزینه schema.model تنظیم شده باشد)
اگر گزینه schema.type با مقدار "xml" تنظیم شده باشد این خصوصیت با یک مقدار رشته ای تنظیم می شود.
filter فیلتر یا فیلترهایی که روی آیتم های داده بکار برده می شود را مشخص می کند.
نکته: DataSource، فیلتر کردن داده ها را، سمت client انجام می دهد، مگر اینکه گزینه serverFiltering را با مقدار true تنظیم کرده باشید.
پیکربندی filter:
  • field: نام فیلدی که قرار است فیلتر روی آن عمل کند.
  • filters: برای مشخص کردن چندین فیلتر تودرتو بکار می رود.
  • logic: زمانی که گزینه filter.filters تنظیم شده باشد منطق بین عملیات ها را مشخص می کند. ("and" و "or")
  • operator: عملگر فیلتر یا نحوه مقایسه را مشخص می کند. با یکی از مقادیر زیر تنظیم می شود:
    "eq" (equal to), "neq" (not equal to), "lt" (less than), "lte" (less than or equal to), "gt" (greater than), "gte" (greater than or equal to), "startswith", "endswith", "contains"
  • value: مقداری را که فیلد مورد نظر باید با آن مقایسه شود را مشخص می کند.
group پیکربندی گروه بندی آیتم های داده را مشخص می کند.
نکته: DataSource، گروه بندی داده ها را، سمت client انجام می دهد، مگر اینکه گزینه serverGrouping را با مقدار true تنظیم کرده باشید.
پیکربندی group:
  • aggregates: با یک آرایه تنظیم می شود و شامل گزینه های "aggregate" و "field" است.
  • dir: جهت مرتب سازی را مشخص می کند و با یکی از مقادیر "desc" و "asc" تنظیم می شود.
  • field: نام فیلدی که قرار است گروه بندی براساس آن انجام شود.
page ایندکس یا شماره صفحه ی نشان داده شده را تنظیم می کند.
pageSize تعداد ردیف های نشان داده شده در هر صفحه را مشخص می کند.
schema با یک شیء تنظیم می شود.
یک پیکربندی که برای تجزیه پاسخ ارسال شده ی سرور استفاده می شود.
پیکربندی schema:
  • aggregates: با فیلدی از پاسخ سرور تنظیم می شود که شامل نتیجه تابع تجمعی (aggregate) است. این خصوصیت زمانی استفاده می شود که گزینه ی serverAggregates با مقدار true تنظیم شده باشد.
  • data: با فیلدی از پاسخ سرور تنظیم می شود که شامل آیتم های داده است.
  • error: با فیلدی از پاسخ سرور تنظیم می شود که شامل خطاهای سمت سرور است.
  • group: با فیلدی از پاسخ سرور تنظیم می شود که شامل نتیجه گروه بندی است. این خصوصیت زمانی استفاده می شود که گزینه ی serverGrouping با مقدار true تنظیم شده باشد.
  • model: پیکربندی یا مدل آیتم های داده را مشخص می کند. اگر با یک شیء تنظیم شود، برای مقداردهی اولیه (initialize) مدل DataSource، از متد Model.define استفاده خواهد شد. اگر با یک نمونه موجود kendo.data.Model تنظیم شود، DataSource از همان نمونه استفاده خواهد کرد و نمونه جدیدی initialize نخواهد شد.
  • pars: با یک تابع تنظیم می شود و قبل از اینکه پاسخ سرور استفاده بشود، اجرا خواهد شد. با استفاده از این تابع می توان، پاسخ سرور را پردازش کرد.
  • total: با فیلدی از پاسخ سرور تنظیم می شود که شامل تعداد کل آیتم های داده است. اگر گزینه ی serverPaging با مقدار true تنظیم شده باشد، باید گزینه total را تنظیم نمایید.
  • type: نوع پاسخ ارسال شده را تعیین می کند. مقدار پیش فرض "json" است. نوع دیگری که می توانید تنظیم نمایید، "xml" است.
serverAggregates (default: false) اگر با مقدار true تنظیم شود، محاسبه توابع تجمعی (aggregate) سمت سرور انجام خواهد شد.
توجه: فراموش نکنید که اگر این گزینه را با مقدار true تنظیم کردید، باید گزینه schema.aggreagates را نیز پیکربندی نمایید.
serverFiltering (default: false) اگر با مقدار true تنظیم شود، پیاده سازی فیلترینگ به سرور محول خواهد شد.
با توجه به مثال زیر، بصورت پیش فرض با استفاده از قرارداد jQuery زیر، فیلتر به سرور ارسال می شود:
filter { logic: "and", filters: [
{ field: "name", operator: "startswith", value: "Jane" }
] }
  • filter[logic]: and
  • filter[filters][0][field]: name
  • filter[filters][0][operator]: startswith
  • filter[filters][0][value]: Jane
توجه: اگر می خواهید گزینه فیلتر را با فرمتی متفاوت به سرور ارسال نمایید، از گزینه parameterMap استفاده کنید.
serverGrouping (default: false) اگر با مقدار true تنظیم شود، پیاده سازی گروه بندی به سرور محول خواهد شد.
با توجه به مثال زیر، بصورت پیش فرض با استفاده از قرارداد jQuery زیر، فیلتر به سرور ارسال می شود:
group { field: "category", dir: "desc" }
  • group[0][field]: category
  • group[0][dir]: desc
توجه: اگر می خواهید گزینه گروه بندی را با فرمتی متفاوت به سرور ارسال نمایید، از گزینه parameterMap استفاده کنید.
serverPaging (default: false) اگر با مقدار true تنظیم شود، پیاده سازی صفحه بندی به سرور محول خواهد شد.
توجه: فراموش نکنید که اگر این گزینه را با مقدار true تنظیم کردید، باید گزینه schema.total را نیز پیکربندی نمایید.
زمانی که می خواهید صفحه بندی سمت سرور انجام شود، گزینه های زیر به سرور ارسال خواهد شد:
  • page - تعیین شماره صفحه ای که می خواهید هنگام برگشت داده ها روی آن تنظیم باشد (1 یعنی صفحه اول)
  • pageSize - تعیین تعداد ردیف ها در یک صفحه
  • skip - چه تعداد آیتم داده را از قلم بیاندازد (skip)
  • take - تعداد آیتم های داده برگشتی (شبیه pageSize)
توجه: اگر می خواهید گزینه گروه بندی را با فرمتی متفاوت به سرور ارسال نمایید، از گزینه parameterMap استفاده کنید.
serverSorting (default: false) اگر با مقدار true تنظیم شود، پیاده سازی مرتب سازی به سرور محول خواهد شد.
با توجه به مثال زیر، بصورت پیش فرض با استفاده از قرارداد jQuery زیر، فیلتر به سرور ارسال می شود:
sort { field: "age", dir: "desc" }
  • sort[0][field]: age
  • sort[0][dir]: desc
توجه: اگر می خواهید گزینه گروه بندی را با فرمتی متفاوت به سرور ارسال نمایید، از گزینه parameterMap استفاده کنید.
sort تعیین کننده مرتب سازی ای است که روی آیتم های داده اعمال می شود. بصورت پیش فرض آیتم های داده مرتب نخواهند شد.
نکته: DataSource، گروه بندی داده ها را، سمت client انجام می دهد، مگر اینکه گزینه serverSorting را با مقدار true تنظیم کرده باشید.
پیکربندی sort:
  • dir: جهت مرتب سازی را مشخص می کند و با یکی از مقادیر "desc" و "asc" تنظیم می شود.
  • field: نام فیلدی که قرار است مرتب سازی براساس آن انجام شود.
transport پیکربندی لود و ذخیره آیتم های داده را مشخص می کند.
پیکربندی transport:
  • create: تعیین کننده ی پیکربندی لازم برای ذخیره داده هایی است که اخیراً ایجاد شده اند. این داده ها از طریق متدهای add و insert اضافه شده اند. این گزینه با یک شیء، یک تابع و یا یک رشته می تواند تنظیم شود.
    DataSource برای ایجاد یک درخواست HTTP از سرور، از jQuery.ajax استفاده می کند. مقدار پیکربندی شده از طریق این گزینه (create) به jQuery.ajax  پاس داده می شود. این یعنی اینکه شما می توانید تمام گزینه های پشتیبانی شده توسط jQuery.ajax را از طریق گزینه create تنظیم نمایید. (بجز success و error)
    اگر با رشته تنظیم شود، DataSource از آن بعنوان URL سرویس راه دور استفاده می کند.
    اگر با یک تابع تنظیم شود، DataSource آن تابع را بجای jQuery.ajax  فراخوانی می کند.
    توجه: سرور باید آیتم داده ایجاد شده را برگرداند و فیلدی که بعنوان id پیکربندی شده است باید با شناسه آیتم جدید تنظیم شده باشد. بعنوان مثال اگر id آیتم های داده "ProductID" است پاسخ ارسال شده از سرور می تواند بصورت [{ "ProductID": 79 }]باشد.
    پیکربندی create:
    • cashe - اگر با مقدار false تنظیم شود پاسخ ارسال شده از سرور بوسیله مرورگر cashe نخواهد شد.
    • contentType - نوع محتوای ارسال شده به سرور را تعیین می کند. مقدار پیش فرض: "application/x-www-form-urlencoded" برای محتوای JSON از مقدار "application/json" استفاده نمایید.
    • data - پارامترهای اضافی که می خواهید به سرور ارسال کنید را مشخص می کند.
    • dataType - نوع داده ای که انتظار دارید از سرور ارسال شود را تعیین می کند. مقادیر معمول "json" و "jsonp" است.
    • type - نوع درخواست ایجاد شده را تعیین می کند ("POST", "GET", "PUT" or "DELETE") مقدار پیش فرض "GET" است. توجه داشته باشید که اگر گزینه datatype را با مقدار "jsnonp" تنظیم نمایید، این گزینه در نظر گرفته نخواهد شد. بخاطر اینکه JSNOP همیشه از GET استفاده می کند.
    • URL - آدرسی که درخواست به آن ارسال می شود.
  • destroy: : تعیین کننده ی پیکربندی لازم برای حذف آیتم های داده است. این آیتم ها از طریق متد remove حذف شده اند. این گزینه با یک شیء، یک تابع و یا یک رشته تنظیم می شود. (پیکربندی این گزینه مانند create است)
  • parameterMap: با یک تابع تنظیم می شود و وظیفه این تابع این است که پارامترهای درخواست ارسال شده به سرور را به فرمتی مناسب تبدیل کند. بصورت پیش فرض، DataSource با استفاده از قراردادهای jQuery پارامترها را ارسال می کند.
  • push
  • read: تعیین کننده ی پیکربندی لازم برای بارگذاری (load) آیتم های داده است. این گزینه با یک شیء، یک تابع و یا یک رشته تنظیم می شود. (پیکربندی این گزینه مانند create است)
  • signalr: زمانی که گزینه type با مقدار "signalr" تنظیم شده باشد استفاده می شود.
  • update: تعیین کننده ی پیکربندی لازم برای ذخیره آیتم های داده ویرایش شده است. این گزینه با یک شیء، یک تابع و یا یک رشته تنظیم می شود. (پیکربندی این گزینه مانند create است)
type اگر این گزینه را تنظیم نمایید، DataSource برای پیکربندی translate و یا schema از یک پیکربندی پیش ساخته استفاده خواهد کرد.
مقادیری که می توانید تنظیم نمایید، "odata" و "signal" است.

 در مثال زیر، نحوه استفاده از DataSource نشان داده شده است:

<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<meta charset="utf-8">
<link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="/../../../styles/kendo.default.min.css" rel="stylesheet">

<script src="/../../../js/jquery.min.js"></script>
<script src="/../../../js/kendo.web.min.js"></script>
<script src="/../../content/shared/js/console.js"></script>
<script>

</script>


</head>
<body>

<div id="example" class="k-content">
<div class="demo-section">

<table id="movies" class="metrotable">
<thead>
<tr>
<th>Rank</th>
<th>Rating</th>
<th>Title</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4"></td>
</tr>
</tbody>
</table>

</div>

<script id="template" type="text/x-kendo-template">
<tr>
<td>#= rank #</td>
<td>#= rating #</td>
<td>#= title #</td>
<td>#= year #</td>
</tr>
</script>

<script>
$(document).ready(function() {
// با استفاده از تعریف بالا، یک قالب تعریف می کنیم
var template = kendo.template($("#template").html());

var movies = [
{ "rank": 1, "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption" },
{ "rank": 2, "rating": 9.2, "year": 1972, "title": "The Godfather" },
{ "rank": 3, "rating": 9, "year": 1974, "title": "The Godfather: Part II" },
{ "rank": 4, "rating": 8.9, "year": 1966, "title": "Il buono, il brutto, il cattivo." },
{ "rank": 5, "rating": 8.9, "year": 1994, "title": "Pulp Fiction" },
{ "rank": 6, "rating": 8.9, "year": 1957, "title": "12 Angry Men" },
{ "rank": 7, "rating": 8.9, "year": 1993, "title": "Schindler's List" },
{ "rank": 8, "rating": 8.8, "year": 1975, "title": "One Flew Over the Cuckoo's Nest" },
{ "rank": 9, "rating": 8.8, "year": 2010, "title": "Inception" },
{ "rank": 10, "rating": 8.8, "year": 2008, "title": "The Dark Knight" }
];

var dataSource = new kendo.data.DataSource({
data: movies,
change: function() {
$("#movies tbody").html(kendo.render(template, this.view())); // populate the table
}
});

// خواندن داده ها از آرایه بالا
dataSource.read();
});
</script>
</div>
</body>
</html>
اجرای مثال »

رویدادهای DataSource در Kendo UI

 در جدول زیر تمام رویدادهای DataSource، لیست شده است:

نامتوضیحات
change زمانی که داده از سرور یا یک آرایه جاوا اسکریبتی، تحویل DataSource می شود و یا زمان ایجاد، ویرایش و حذف و یا زمانی که صفحه بندی، مرتب سازی، فیلترینگ و گروه بندی اعمال می شود، اتفاق می افتد.
error زمانی که یک درخواست سروری با شکست مواجه می شود (fail)، اتفاق می افتد.
توجه: اگر گزینه schema.errors تنظیم شده باشد و پاسخ ارسال شده از سرور حاوی آن field باشد، رویداد error اتفاق خواهد افتاد. این پارامتر حاوی خطایی است که توسط سرور گزاش شده است.
push زمانی که DataSource یک اخطار push دریافت کند و یا زمانی که یکی از متدهای pushCreate و یا pushUpdate و یا pushDelete فراخوانی شوند، اتفاق خواهد افتاد.
requestEnd زمانی که یک درخواست سروری پایان یابد، اتفاق می افتد.
requestStart زمانی که یک درخواست سروری ایجاد می شود، اتفاق می افتد.
sync قبل از اینکه DataSource آیتم ها داده تغییر یافته را ذخیره کند، اتفاق می افتد.
DataSource زمانی آیتم های داده تغییر یافته را ذخیره می کند که متد sync فراخوانی شود.

متدهای DataSource در Kendo UI

  در جدول زیر تمام متدهای DataSource، لیست شده است:

نامتوضیحات
add(object) آیتم های داده را به منبع داده اضافه می کند.
aggregate(object)
aggregate(JsArray)
پیکربندی توابع تجمعی (aggregate) را تنظیم یا برمی گرداند.
توابع تجمعی عبارت اند از: "average", "count", "max", "min" ,"sum"
aggregates() نتیجه محاسبه توابع تجمعی را برمی گرداند.
at(JsNumber) آیتم داده ای که شماره آن را مشخص کرده اید برمی گرداند. (شماره ی ردیف ها از صفر شروع می شود)
cancelChanges()
cancelChanges(Model)
هر تغییری که روی منبع داده معلق است را لغو می کند.
آیتم های داده حذف شده را برمی گرداند، داده های ایجاد شده را حذف می کند و آنها که ویرایش شده اند را به حالت اول برمی گرداند.
data(JsArray) داده های منبع داده را تنظیم یا برمی گرداند.
اگر DataSource به داده های راه دور (سرور) متصل شده باشد. (از طریق گزینه transport) این متد پاسخ سرور را برخواهد گرداند.
اگر DataSource به داده های یک آرایه جاوا اسکریبتی متصل شده باشد. (از طریق گزینه data) این متد داده های آن آرایه را برخواهد گرداند.
اگر داده های DataSource گروه بندی شده باشد. (از طریق گزینه group یا متد group) و گزینه serverGrouping با مقدار true تنظیم شده باشد این متد آیتم های گروه را برخواهد گرداند.
fetch(JsAction) آیتم های داده را از یک سرور راه دور (اگر گزینه transport تنظیم شده باشد) یا یک آرایه جاوا اسکریبتی (اگر گزینه data تنظیم شده باشد) می خواند.
توجه: این متد تنها بار اول که فراخوانی می شود یک درخواست سروری می سازد.
filter(object)
filter(JsArray)
فیلتر جاری که اعمال شده است را برمی گرداند و یا پیکربندی لازم را تنظیم می نماید.
get(JsNumber) مدل آیتم داده با id مشخص شده را برمی گرداند.
getByUid(JsString) مدل آیتم داده با uid مشخص شده را برمی گرداند.
group(object)
group(JsArray)
گروه بندی جاری که اعمال شده است را برمی گرداند و یا پیکربندی لازم را تنظیم می نماید.
hasChange(Boolean) چک می کند که آیا آیتم های داده تغییر یافته اند یا خیر.
indexOf() آیتم داده مشخص شده را برمی گرداند.
insert(JsNumber, object) یک آیتم داده جدید با ایندکس مشخص شده، در منبع داده درج می کند.
page(JsNumber) page جاری را تنظیم یا برمی گرداند.
pageSize(JsNumber) اندازه ردیف ها در یک page را تنظیم یا برمی گرداند.
pushCreate(object)
pushCreate(JsArray)
آیتم یا آیتم های داده مشخص شده را به DataSource اضافه می کند بدون اینکه آنها را بعنوان "new" در نظر بگیرد.
تفاوت بین این متد و متد add این است که در متد add آیتم های داده اضافه شده با سرور انطباق (sync) دارند.
pushDestroy() مانند متد pushCreate
pushUpdate() مانند متد pushCreate
query(KendoObjectOptions) query مشخص شده را روی آیتم های داده اجرا می کند. اگر به داده های سرور متصل شده باشید یک درخواست HTTP ایجاد خواهد شد.
read() آیتم های داده را از یک سرور راه دور (اگر گزینه transport تنظیم شده باشد) یا یک آرایه جاوا اسکریبتی (اگر گزینه data تنظیم شده باشد) می خواند.
توجه: این متد همیشه یک درخواست سروری می سازد.( برخلاف متد fetch که فقط بار اول که فراخوانی می شود یک درخواست سروری می سازد)
remove(object) آیتم داده مشخص شده را از منبع داده حذف می کند.
sort(object)
sort(JsArray)
مرتب سازی جاری که اعمال شده است را برمی گرداند و یا پیکربندی لازم را تنظیم می نماید.
sync() هر تغییری که روی آیتم های داده اعمال شده است را ذخیره می کند.
در صورتی متد sync یک درخواست سروی ایجاد خواهد کرد که:
  1. گزینه transport.create تنظیم شده باشد و DataSource شامل یک یا چند آیتم داده جدید باشد.
  2. گزینه transport.destroy تنظیم شده باشد و آیتم های داده از DataSource حذف شده باشند.
  3. گزینه transport.update تنظیم شده باشد و آیتم های داده ویرایش شده باشند.
total() تعداد کل ردیف های داده را برمی گرداند. اگر گزینه transport.read تنظیم شده است از schema.total استفاده نمایید.
totalPages() تعداد کل pageها قابل دسترس را برمی گرداند.
view() آیتم های داده که با شماره صفحه جاری و پیکربندی فیلترینگ و مرتب سازی و گروه بندی متناظر هستند را برمی گرداند.
برای تضمین داده های قابل دسترس این متد، باید آنرا داخل رویداد change یا متد fetch استفاده نمایید.

مثال(API)

 <script>
    $(document).ready(function() {
        // create a template using the above definition
        var template = kendo.template($("#template").html());

        var dataSource = new kendo.data.DataSource({
            pageSize: 10,
            data: createRandomData(500),
            change: function() { // subscribe to the CHANGE event of the data source
                // update the max attribute of the "page" input
                $("#page").attr("max", this.totalPages());

                $("#people tbody").html(kendo.render(template, this.view()));
            }
        });

        // read the data
        dataSource.read();

        $("#apply").click(function() {
            var page = parseInt($("#page").val(), 10);

            // validate the page - it must be a number within the allowed range
            if (isNaN(page) || page < 1 || page > dataSource.totalPages()) {
                alert(kendo.format("Page must be a number between 1 and {0}", dataSource.totalPages()));
                return;
            }

            // query the remote service
            dataSource.query({
                page: page,
                pageSize: 10,
                sort: {
                    field: $("#order").val(),
                    dir:$("#dir").val()
                }
            });
        });

        //initialize dropdownlist components
        $("#order").kendoDropDownList();
        $("#dir").kendoDropDownList();
    });
</script>
اجرای مثال »