پیشنیازهای بحث:
- «
صفحه بندی، مرتب سازی و جستجوی پویای اطلاعات به کمک Kendo UI Grid »
- «
استفاده از Kendo UI templates»
صورت مساله
میخواهیم به یک چنین تصویری برسیم؛ که دارای گروه بندی اطلاعات است، فرمت شرطی روی ستون قیمت آن اعمال شده و تاریخ نمایش داده شده در آن نیز شمسی است. همچنین برای مثال ستون قیمت آن دارای ته جمع صفحه بوده و به علاوه یک دکمهی سفارشی به نوار ابزار آن اضافه شدهاست.
مباحث قسمت سمت سرور این مثال با مطلب «
صفحه بندی، مرتب سازی و جستجوی پویای اطلاعات به کمک Kendo UI Grid» دقیقا یکی است. فقط یک خاصیت AddDate نیز در اینجا اضافه شدهاست.
تغییر نحوهی نمایش pager
اگر به قسمت pager تصویر فوق دقت کنید، یک دکمهی refresh، تعداد موارد هر صفحه و امکان وارد کردن دستی شماره صفحه، در آن پیش بینی شدهاست. این موارد را با تنظیمات ذیل میتوان فعال کرد:
$("#report-grid").kendoGrid({
// ...
pageable: {
previousNext: true, // default true
numeric: true, // default true
buttonCount: 5, // default 10
refresh: true, // default false
input: true, // default false
pageSizes: true // default false
},
بومی سازی پیغامهای گرید
پیغامهای فارسی را که در تصویر فوق مشاهده میکنید، حاصل پیوست فایل
kendo.fa-IR.js هستند:
<!--https://github.com/loudenvier/kendo-global/blob/master/lang/kendo.fa-IR.js-->
<script src="js/messages/kendo.fa-IR.js" type="text/javascript"></script>
گروه بندی اطلاعات
برای گروه بندی اطلاعات در Kendo UI Grid دو قسمت باید تغییر کنند.
ابتدا باید فیلد پیش فرض گروه بندی در قسمت data source گرید تعریف شود:
var productsDataSource = new kendo.data.DataSource({
// ...
group: { field: "IsAvailable" },
// ...
});
همین تنظیم، گروه بندی را فعال خواهد کرد. اگر علاقمند باشید که به کاربران امکان تغییر دستی گروه بندی را بدهید، خاصیت groupable را نیز true کنید.
$("#report-grid").kendoGrid({
// ...
groupable: true, // allows the user to alter what field the grid is grouped by
// ...
در این حالت با کشیدن و رها کردن یک سرستون، به نوار ابزار مرتبط با گروه بندی، گروه بندی گرید بر اساس این فیلد انتخابی به صورت خودکار انجام میشود.
اضافه کردن ته جمعهای ستونها
این ته جمعها که aggregate نام دارند باید در دو قسمت فعال شوند:
var productsDataSource = new kendo.data.DataSource({
//...
aggregate: [
{ field: "Name", aggregate: "count" },
{ field: "Price", aggregate: "sum" }
]
//...
});
ابتدا در قسمت data source مشخص میکنیم که چه تابع تجمعی قرار است به ازای یک فیلد خاص استفاده شود.
سپس این متدها را میتوان مطابق فرمت hash syntax
قالبهای Kendo UI در قسمت footerTemplate هر ستون تعریف کرد:
$("#report-grid").kendoGrid({
// ...
columns: [
{
field: "Name", title: "نام محصول",
footerTemplate: "تعداد: #=count#"
},
{
field: "Price", title: "قیمت",
footerTemplate: "جمع: #=kendo.toString(sum,'c0')#"
}
]
// ...
});
فرمت شرطی اطلاعات
در ستون قیمت، میخواهیم اگر قیمتی بیش از 2490 بود، با پس زمینهی قهوهای و رنگ زرد نمایش داده شود. برای این منظور میتوان یک قالب Kendo UI سفارشی را طراحی کرد:
<script type="text/x-kendo-template" id="priceTemplate">
#if( Price > 2490 ) {#
<span style="background:brown; color:yellow;">#=kendo.toString(Price,'c0')#</span>
#} else {#
#= kendo.toString(Price,'c0')#
#}#
</script>
سپس نحوهی استفادهی از آن به صورت ذیل خواهد بود:
$("#report-grid").kendoGrid({
//...
columns: [
{
field: "Price", title: "قیمت",
template: kendo.template($("#priceTemplate").html()),
footerTemplate: "جمع: #=kendo.toString(sum,'c0')#"
}
]
//...
});
توسط متد kendo.template امکان انتساب یک قالب سفارشی به خاصیت template یک ستون وجود دارد.
فرمت تاریخ میلادی به شمسی در حین نمایش
برای تبدیل سمت کلاینت تاریخ میلادی به شمسی از کتابخانهی
moment-jalaali.js کمک گرفته شدهاست:
<!--https://github.com/moment/moment/-->
<script src="js/cultures/moment.min.js" type="text/javascript"></script>
<!--https://github.com/jalaali/moment-jalaali-->
<script src="js/cultures/moment-jalaali.js" type="text/javascript"></script>
پس از آن تنها کافی است متد فرمت این کتابخانه را در قسمت template ستون تاریخ و توسط hash syntax قالبهای Kendo UI بکار برد:
$("#report-grid").kendoGrid({
//...
columns: [
{
field: "AddDate", title: "تاریخ ثبت",
template: "#=moment(AddDate).format('jYYYY/jMM/jDD')#"
}
]
//...
});
اضافه کردن یک دکمه به نوار ابزار گرید
نوار ابزار Kendo UI Grid را نیز میتوان توسط یک قالب سفارشی آن مقدار دهی کرد:
$("#report-grid").kendoGrid({
// ...
toolbar: [
{ template: kendo.template($("#toolbarTemplate").html()) }
]
// ...
});
برای نمونه toolbarTemplate فوق را به نحو ذیل تعریف کردهایم:
<script>
// این اطلاعات برای تهیه خروجی سمت سرور مناسب هستند
function getCurrentGridFilters() {
var dataSource = $("#report-grid").data("kendoGrid").dataSource;
var gridState = {
page: dataSource.page(),
pageSize: dataSource.pageSize(),
sort: dataSource.sort(),
group: dataSource.group(),
filter: dataSource.filter()
};
return kendo.stringify(gridState);
}
</script>
<script id="toolbarTemplate" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="alert('gridState: ' + getCurrentGridFilters());">نوار ابزار سفارشی</a>
</script>
دکمهی اضافه شده، وضعیت فیلتر data source متصل به گرید را بازگشت میدهد. برای مثال مشخص میکند که در چه صفحهای با چه تعداد رکورد قرار داریم و همچنین وضعیت مرتب سازی، فیلتر و غیره چیست. از این اطلاعات میتوان در سمت سرور برای تهیهی خروجیهای PDF یا اکسل استفاده کرد. وضعیت فیلتر اطلاعات مشخص است. بر همین مبنا کوئری گرفته و سپس میتوان نتیجهی آنرا تبدیل به منبع داده تهیه خروجی مورد نظر کرد.
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید: KendoUI05.zip