X-editable for Yii

Bundle of widgets and server-side component for creating editable elements in Yii application

Download (1.3.1)
based on X-editable 1.4.6

Overview

This extension allows you to create editable elements in Yii application.
It contains 4 widgets:

and 2 components:

Since 1.3 you can use it with YiiMongoDBSuite.

Demo

Try out demo in widgets section (you can compare different styles using dropdown in top-right corner).

Requirements

Requirements depend on core library you want to use:

  • Bootstrap
    Twitter Bootstrap 2+, Yii 1.1+.
    You can use Yii-bootstrap extension (2.0+) or include bootstrap js/css manually
  • jQuery UI
    • popup: Yii 1.1.13+ (as requires jQuery UI 1.9 for tooltip)
    • inline: Yii 1.1+
  • only jQuery
    Yii 1.1+

Setup

  1. Download and unzip to protected/extensions/x-editable
  2. If using with Bootstrap:

    • install Yii-bootstrap extension
      OR
    • include Bootstrap js and css manually:

      Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/js/bootstrap/css/bootstrap.min.css');  
      Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/js/bootstrap/js/bootstrap.min.js');
      
  3. Modify your config (e.g. protected/config/main.php):

    //assume you unzipped extension under protected/extensions/x-editable
    Yii::setPathOfAlias('editable', dirname(__FILE__).'/../extensions/x-editable');
    
    return array(
        ...
        'import'=>array(
            ...
           'editable.*' //easy include of editable classes
        ),            
    
        //application components
        'components'=>array(
            ...
            //X-editable config
            'editable' => array(
                'class'     => 'editable.EditableConfig',
                'form'      => 'bootstrap',        //form style: 'bootstrap', 'jqueryui', 'plain' 
                'mode'      => 'popup',            //mode: 'popup' or 'inline'  
                'defaults'  => array(              //default settings for all editable elements
                   'emptytext' => 'Click to edit'
                )
            ),        
        )
    );
    

That's it!
Now you can edit views and controller actions to have editable elements. Please refer to widgets section.

For any questions feel free to open issue on github.
Your feedback / contribution will be appreciated!