آموزش Yii سفارشی سازی دکمه های صفحه Admin کنترلرها قسمت هفتم

یکی از پرامکانات ترین صفحات در کنترلر های Yii که به صورت CRUD تولید می شوند، صفحه ی ادمین است ما ما در این آموزش می خواهیم بررسی کنیم چطور می توان این صفحه را به جذاب ترین نحو ممکن ویرایش کرد:

CGridView یکی از پرانعطاف ترین widget ها در Yii محسوب می شود که یکی از مهم ترین جنبه های انعطاف پذیری آن را می توان تغییراتی که می توان روی CButtonColumn اعمال کرد دانست.

سفارشی سازی اولیه

در حالت پیشفرض، CButtonColumn دارای سه دکمه می باشد به ترتیب {view} و {update} و {delete} که عملیات انجام شده توسط آن ها به صورت پیشفرض تعریف شده است و هرکدام رفتارهای خاص خود را دارا هستند.

ساده ترین روش سفارشی سازی رفتار و جنبه ی دیداری این دکمه ها استفاده از یک سری خصوصیات CButtonColumn می باشد، به عنوان مثال:

updateButtonImageUrl: آدرسی به تصویر دکمه آپدیت

updateButtonLabel: لیبل دکمه ی آپدیت و نوشته ی روی آن

updateButtonOptions: عملیات تعریف شده برای دکمه ی آپدیت

updateButtonUrl: مسیر ارسالی بعد از کلیک روی دکمه ی آپدیت

و همچنین خصیصه های جذاب دیگر همچون:

deleteConfirmation: که نوع آن رشته ای بوده و فقط برای دکمه ی حذف به کار می رود، می توان توسط آن پیام نمایش داده شده هنگام کلیک بر روی دکمه ی حذف را ویرایش نمود.

xxxButtonUrl: در این خصیصه می توانید از متغیر $row برای مشخص سازی شماره ردیف استفاده کنید و همچنین می توان از $data نیز برای مشخص کزدن مدل مربوطه استفاده نمود.

xxxButtonImageUrl: با صفر در نظر گرفتن مقدار این خصیصه، به جای عکس، یک دکمه همراه متن نمایش داده خواهد شد.

تغییرات پرانعطاف تر

استفاده از موارد گفته شده برای سفارشی سازی شاید کمی ناامیدانه به نظر برسد اما نگران نباشید، امکانات بیشتری در این widget برای تغییرات وجود دارد که با دیدن مثال های آن به خوبی به نحوه ی انجام این کار پی خواهید برد.

با استفاده از خصیصه ی template می توان چینش دکمه ها را عوض کرد:

array
(
    'class'=>'CButtonColumn',
    'template'=>'{delete}{update}',
)

از همین خصیصه می توان برای معرفی کردن دکمه های جدید نیز استفاده کرد:

array
(
    'class'=>'CButtonColumn',
    'template'=>'{up}{down}{delete}',
)

برای باتن های جدید شما می بایست رفتار و ظاهر جدیدی تعریف نمایید که نام هرکدام مبین رفتار و عملی است که آن خصیصه انجام می دهد:

'buttonID' => array
(
    'label'=>'...',     //Text label of the button.
    'url'=>'...',       //A PHP expression for generating the URL of the button.
    'imageUrl'=>'...',  //Image URL of the button.
    'options'=>array(), //HTML options for the button tag.
    'click'=>'...',     //A JS function to be invoked when the button is clicked.
    'visible'=>'...',   //A PHP expression for determining whether the button is visible.
)

دقت داشته باشید که مورد label فقط وقتی نمایش داده می شود که شما از تصویر استفاده نکرده باشید و یک دکمه ی بدون عکس داشته باشید.

برای ویژگی url و یا visible می توانید از عبارت های PHP شامل متغیر های $data و همچنین $row استفاده نمایید.

اگر مقدار imageUrl را یک رشته ی خالی قرار دهید، تبدیل به یک دکمه ی شامل متن خواهد شد.

و در انتها برای آشنایی بیشتر مثالی را برای شما آماده کرده ام:

array
(
    'class'=>'CButtonColumn',
    'template'=>'{email}{down}{delete}',
    'buttons'=>array
    (
        'email' => array
        (
            'label'=>'Send an e-mail to this user',
            'imageUrl'=>Yii::app()->request->baseUrl.'/images/email.png',
            'url'=>'Yii::app()->createUrl("users/email", array("id"=>$data->id))',
        ),
        'down' => array
        (
            'label'=>'[-]',
            'url'=>'"#"',
            'visible'=>'$data->score > 0',
            'click'=>'function(){alert("Going down!");}',
        ),
    ),
),

 در استفاده از علائم { و } دقت کنید چون در حال استفاده از JQuery هستیم. 

نظرات در مورد یک سری تغییرات کوچک در متن تایید نمایش داده شده هنگام حذف چیست؟

array
(
        'class'=>'CButtonColumn',
        'deleteConfirmation'=>"js:'Record with ID '+$(this).parent().parent().children(':first-child').text()+' will be deleted! Continue?'",
),

و همچنین استفاده از ntn_child برای دسترسی به مختوی دیگر ستون ها:

array
(
        'class'=>'CButtonColumn',
        'deleteConfirmation'=>"js:'Do you really want to delete record with ID '+$(this).parent().parent().children(':nth-child(2)').text()+'?'",
),

نمونه ای از تبدیل روال عادی باتن ها به Ajax:

...
'columns'=>array(
  ...
  array( 'class'=>'CButtonColumn',
   'buttons'=>array('update'=>
     array(
       'url'=> {some expression to be eval'd for each button}
       'options'=>array(  // this is the 'html' array but we specify the 'ajax' element
         'ajax'=>array(
           'type'=>'POST',
           'url'=>"js:$(this).attr('href')", // ajax post will use 'url' specified above
           'update'=>'{some div to update with ajax response}',
         ),
       ),
     ),
   ),
  ),
),

امیدوارم که از این آموزش لذت برده باشید و بتوانید از آن استفاده کنید، هندل کردن درخواست ها در سمت کلاس کنترلر نیز با شما…!

نمونه ای از آخرین کارهای ما

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت