آموزش اتصال به پایگاه داده
آموزش اتصال به منبع داده در kendo UI
با استفاده از متد ()kendo.data.DataSource در Kendo UI، می توانید به منبع داده متصل شوید.
پیکربندی (Configuration) منبع داده در Kendo UI
| نام | توضیحات |
|---|---|
| aggregate | فیلدهایی را که باید توابع تجمعی (aggregate) روی آنها محاسبه شود را مشخص می کند. توابع تجمعی عبارت اند از: "average", "count", "max", "min" ,"sum" پیکربندی aggregate:
 نکته: محاسبه توابع تجمعی، سمت 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:
|
| group | پیکربندی گروه بندی آیتم های داده را مشخص می کند. نکته: DataSource، گروه بندی داده ها را، سمت client انجام می دهد، مگر اینکه گزینه serverGrouping را با مقدار true تنظیم کرده باشید. پیکربندی group:
|
| page | ایندکس یا شماره صفحه ی نشان داده شده را تنظیم می کند. |
| pageSize | تعداد ردیف های نشان داده شده در هر صفحه را مشخص می کند. |
| schema | با یک شیء تنظیم می شود. یک پیکربندی که برای تجزیه پاسخ ارسال شده ی سرور استفاده می شود. پیکربندی schema:
|
| serverAggregates | (default: false) اگر با مقدار true تنظیم شود، محاسبه توابع تجمعی (aggregate) سمت سرور انجام خواهد شد.توجه: فراموش نکنید که اگر این گزینه را با مقدار true تنظیم کردید، باید گزینه schema.aggreagates را نیز پیکربندی نمایید. |
| serverFiltering | (default: false) اگر با مقدار true تنظیم شود، پیاده سازی فیلترینگ به سرور محول خواهد شد. با توجه به مثال زیر، بصورت پیش فرض با استفاده از قرارداد jQuery زیر، فیلتر به سرور ارسال می شود: filter
{ logic: "and", filters: [
توجه: اگر می خواهید گزینه فیلتر را با فرمتی متفاوت به سرور ارسال نمایید، از گزینه parameterMap استفاده کنید. |
| serverGrouping | (default: false) اگر با مقدار true تنظیم شود، پیاده سازی گروه بندی به سرور محول خواهد شد. با توجه به مثال زیر، بصورت پیش فرض با استفاده از قرارداد jQuery زیر، فیلتر به سرور ارسال می شود: group
{ field: "category", dir: "desc" }
توجه: اگر می خواهید گزینه گروه بندی را با فرمتی متفاوت به سرور ارسال نمایید، از گزینه parameterMap استفاده کنید. |
| serverPaging | (default: false) اگر با مقدار true تنظیم شود، پیاده سازی صفحه بندی به سرور محول خواهد شد.توجه: فراموش نکنید که اگر این گزینه را با مقدار true تنظیم کردید، باید گزینه schema.total را نیز پیکربندی نمایید. زمانی که می خواهید صفحه بندی سمت سرور انجام شود، گزینه های زیر به سرور ارسال خواهد شد:
توجه: اگر می خواهید گزینه گروه بندی را با فرمتی متفاوت به سرور ارسال نمایید، از گزینه parameterMap استفاده کنید. |
| serverSorting | (default: false) اگر با مقدار true تنظیم شود، پیاده سازی مرتب سازی به سرور محول خواهد شد. با توجه به مثال زیر، بصورت پیش فرض با استفاده از قرارداد jQuery زیر، فیلتر به سرور ارسال می شود: sort
{ field: "age", dir: "desc" }
توجه: اگر می خواهید گزینه گروه بندی را با فرمتی متفاوت به سرور ارسال نمایید، از گزینه parameterMap استفاده کنید. |
| sort | تعیین کننده مرتب سازی ای است که روی آیتم های داده اعمال می شود. بصورت پیش فرض آیتم های داده مرتب نخواهند شد.نکته: DataSource، گروه بندی داده ها را، سمت client انجام می دهد، مگر اینکه گزینه serverSorting را با مقدار true تنظیم کرده باشید. پیکربندی sort:
|
| transport | پیکربندی لود و ذخیره آیتم های داده را مشخص می کند. پیکربندی transport:
|
| 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 یک درخواست سروی ایجاد خواهد کرد که:
|
| 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>
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 9376
