I started using yiibooster for in-place editing on a gridview simple add
$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'),
)
);
How can I edit table header by same way?
EDIT: My solution. It works for me. http://pastebin.com/0NzHMgEr
@topher, here is my solution
<?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();
}
});
}
});
});
");
}
}