Cách chỉnh sửa tiêu đề trong chế độ xem lưới yiibooster?

Question

tôi bắt đầu sử dụng yiibooster để chỉnh sửa tại chỗ trên một đơn giản GridView thêm

$columns[] = array(
      'name' => $field->name, 
      'value' => array($this, 'cellValue'), 
      'class' => 'bootstrap.widgets.TbJEditableColumn', 
      'jEditableOptions' => array(
       'type' => 'text', 
       // very important to get the attribute to update on the server! 
       'submitdata' => array('field_id'=>$field->id), 
       'width' => '100%', 
       'placeholder' => Yii::t('sms', 'click for edit'), 
      ) 
     ); 

Làm thế nào tôi có thể chỉnh sửa tiêu đề bảng bởi cùng một cách?

EDIT: Giải pháp của tôi. Nó làm việc cho tôi. http://pastebin.com/0NzHMgEr

Answer 1

@topher, đây là giải pháp của tôi

<?php 
/** 
* XColumnWithDeleteLink 
* 
* Allows to delete column in CGridView column. 
* 
* @author Arthur Skobara <skobara.arthur@gmail.com> 
* @version 0.1 
*/ 
Yii::import('bootstrap.widgets.TbJEditableColumn'); 

class XColumnWithDeleteLink extends TbJEditableColumn 
{ 
     public $editableCssClass = 'editable-header'; 
     public $canBeDeleteCssClass = 'can-be-delete'; 

     public $deleteURL = '/phone/deletecolumn'; 

     protected $defaultOptions = array(
       'method' => 'POST', // method to use to send edited content (POST or PUT) 
       'callback' => null, // Function to run after submitting edited content 
       'name' => 'value', // POST parameter name of edited content, 
       'id' => null, // POST parameter name of edited div id (if null will be filled with htmlOptions['id'] or $this->id) 
       'submitdata' => null, // Extra parameters to send when submitting edited content 
       'type' => 'text', // text, textarea or select (or any 3rd party input type) 
       'rows' => null, // number of rows if using textarea 
       'cols' => null, // number of cols if using textarea 
       'height' => '15px', // 'auto', 'none' or height in pixels, 
       'width' => '70%', // 'auto', 'none' or width in pixels 
       'loadurl' => null, // URL to fetch input content before editing 
       'loadtype' => 'GET', // Request type for load url. Should be GET or POST. 
       'loadtext' => null, // Text to display while loading external content. 
       'loaddata' => null, // Extra parameters to pass when fetching content before editing. 
       'data' => null, // Or content given as paramameter. String or function. 
       'indicator' => null, // indicator html to show when saving (will default to assets/img/loading.gif if null) 
       'tooltip' => null, // optional tooltip text via title attribute 
       'event' => 'click', // jQuery event such as 'click' of 'dblclick' 
       'submit' => null, // submit button value, empty means no button 
       'cancel' => null, // cancel button value, empty means no button 
       'cssclass' => null, // CSS class to apply to input form. 'inherit' to copy from parent. 
       'style' => null, // Style to apply to input form 'inherit' to copy from parent. 
       'select' => false, // true or false, when true text is highlighted 
       'placeholder' => null, // Placeholder text or html to insert when element is empty. 
       'onblur' => null, // 'cancel', 'submit', 'ignore' or function 
       'onsubmit' => null, // function(settings, original) { ... } called before submit 
       'onreset' => null, // function(settings, original) { ... } called before reset 
       'onerror' => null, // function(settings, original, xhr) { ... } called on error 
       'ajaxoptions' => null, // jQuery Ajax options. See docs.jquery.com. 
       'cancelAttrs' => array('class' => 'btn'), /* custom property */ 
       'submitAttrs' => array('class' => 'btn'), /* custom property */ 
       //'mask' => '99/99/9999', /* configuration setting for masked plugin */ 
       //'dateformat' => 'yyyy/mm/dd', /* you can use this configuration when using the date plugin */ 
       //'colorformat' => 'rgb' /* rgb | hex | rgba you can use this parameter when using color picker plugin @see www.eyecon.ro/bootstrap-colorpicker/ */ 

     ); 

     public function init() 
     { 
       parent::init(); 

       if (!$this->saveURL) 
       { 
         $this->saveURL = Yii::app()->getRequest()->requestUri; 
       } 
       $this->registerCustomClientScript(); 
     } 

     public function renderHeaderCell() 
     { 
       $this->headerHtmlOptions['id']=$this->id; 
       $this->headerHtmlOptions['data-column-name']=$this->name; 
       $this->headerHtmlOptions['class']=$this->canBeDeleteCssClass; 
       echo CHtml::openTag('th',$this->headerHtmlOptions); 
       $this->renderHeaderCellContent(); 
       echo "</th>"; 
     } 

     protected function renderHeaderCellContent() 
     { 
       $sort = $this->grid->dataProvider->getSort(); 
       $label = isset($this->header) ? $this->header : $sort->resolveLabel($this->name); 

       echo "<span class=\"{$this->editableCssClass}\">". $label .'</span><i class="right icon-trash"></i>'; 
     } 

     public function registerCustomClientScript() 
     { 
       $cs = Yii::app()->getClientScript(); 
       $assetsUrl = Yii::app()->bootstrap->getAssetsUrl(); 
       $cs->registerScriptFile($assetsUrl . '/js/jquery.jeditable.js', CClientScript::POS_END); 

       $deleteURL = Yii::app()->createUrl($this->deleteURL); 

       $options = CJavaScript::encode(array_filter($this->defaultOptions)); 
       $cs->registerScript(__CLASS__ . '#' . $this->id, " 
         jQuery(document).on('{$this->event}','.{$this->editableCssClass}', function(){ 
           var self = jQuery(this); 
           var name = self.parent().attr('data-column-name'); 
           var oldValue = self.html(); 
           var options = jQuery.extend(true, {$options}, {}); 
           self.editable(function(value, settings) { 
             selectedId = $(this).attr('id'); 
             $.ajax({ 
               url:'{$this->saveURL}', 
               data:{ 
                 name:name, 
                 oldvalue:oldValue, 
                 editheader:'{$this->id}', 
                 value:value, 
               }, 
               type:'post', 
               success: function(data) { 
                 self.attr('data-column-name', data); 
                 var label = $('.inline-input-item label[name=\"'+oldValue+'\"]'); 
                 label.attr('name', value); 
                 label.html(value); 
               }, 
             }); 
             return value; 
           }, options); 
         }); 
       "); 

       $cs->registerScript(__CLASS__ . '#column-delete', " 
         $(document).on('click', '.icon-trash', function() { 
           var self = this; 
           var name = $(this).parent().attr('data-column-name'); 
           $.ajax({ 
             url:'{$deleteURL}', 
             data:{name:name}, 
             type:'post', 
             success: function(data) { 
               $.fn.yiiGridView.update('{$this->grid->id}'); 
               $('.inline-input-item').each(function(){ 
                 var self = $(this); 
                 if (self.find('label').attr('name') == name) { 
                   self.remove(); 
                 } 
               }); 
             } 
           }); 
         }); 
       "); 
     } 
}