Inline edit with x-editable

Mở đầu

Khi làm các chức năng thêm sửa xoá cho model, bạn thường phải tách riêng các trang edit nội dung và trang show, index. Việc này khiến cho người dùng mỗi khi muốn sửa lại thông tin một record đều phải mở riêng ra trang edit của record đó. Để rút gọn và đơn giản hoá quá trình sửa này, đã có một thư viện rất tiện lợi là x-editable giúp bạn. Với x-editable, bạn có thể sửa nội dung ngay tại trang show (hoặc index). Tất nhiên chúng ta hoàn toàn có thể tự viết được tính năng này nhưng sẽ mất tương đối nhiều thời gian so với việc sử dụng một thư viện sẵn có và đã được kiểm chứng về khả năng như x-editable.

Cách sử dụng

1. Chọn một trong những core library sau mà bạn muốn sử dụng:

   • Bootstrap
   • jQuery UI
   • only jQuery

   Ví dụ bạn sử dụng Bootstrap, hãy thêm thư viện của bootstrap vào trang của bạn.

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

1. Download bản build x-editable tương ứng và đưa vào trang của bạn

    <link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
    <script src="bootstrap-editable/js/bootstrap-editable.js"></script>

1. Bây giờ bạn đã có thể sử dụng x-editable được rồi Thông thường ta thường đưa editable vào trong tag a và thêm attributes "data-*" vào.

    <a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter user name">superuser</a>

Các attributes chính thường được định nghĩa là:

- `type`: kiểu input (text,textarea, select, vv...)
- `url`: url tới script của server-side để thực hiện việc submit value (ví dụ: /post, post.php, vv...)
- `pk`: primary key của record cần update (ID trong cơ sở dữ liệu)
- `id` hoặc `name`: tên của trường cần được update (cột trong cơ sở dữ liệu).
- `value`: Giá trị ban đầu.

1. Thiết lập editable mode: inline hoặc popup (mặc định)

   $.fn.editable.defaults.mode = 'inline';

2. Apply editable() method vào các element

   $(document).ready(function() {$('#username').editable();});

   Hoặc, một cách khác là bạn có thể sẽ tất cả các option thông qua javascript chứ không phải set trực tiếp trên html tag nữa.

    <a href="#" id="username">superuser</a>

    $('#username').editable({
    type: 'text',
      pk: 1,
      url: '/post',
      title: 'Enter username'
    });

1. Frontend như vậy là đã xong.

   Bạn có thể xem ở đây

   Mở trang web của bạn ra và ấn vào mục màu xanh. Nhập giá trị mới và ấn nút gửi. Nó sẽ gửi một request ajax với giá trị mới tới đường dẫn /post. Request bao gồm name, value, pk của record sẽ được update.

    POST /post
    {
        name:  'username',  //name of field (column in db)
        pk:    1            //primary key (record id)
        value: 'superuser!' //new value
    }

1. Viết backend:

   Bạn có thể viết server side bằng ngôn ngữ nào cũng đều có thể sử dụng được với x-editable.

   Chú ý, request method mặc định của x-editable alf POST, tuy nhiên bạn có thể sửa nó thông qua defaults config.

    $.fn.editable.defaults.ajaxOptions = {type: "PUT"};

Các loại Option và Input của X-Editable

1. Options

   • ajaxOptions
   • anim
   • autotext
   • defautValue
   • disabled
   • display
   • emptyclass
   • emptytext
   • error
   • highlight
   • mode
   • name
   • onblur
   • params
   • pk
   • placement
   • savenochange
   • selector
   • send
   • showbuttons
   • success
   • toggle
   • type
   • unsavedclass
   • url
   • validate
   • value

2. Input

   • text
   • textare
   • select
   • date
   • datetime
   • dateui
   • combodate
   • html5types
   • checklist
   • wysihtml5
   • typeahead
   • typeaheadjs
   • select2

Chi tiết về từng loại option bạn có thể xem trên document của x-editable.

Gem bootstrap-x-editable-rails

Bạn biết rails nhưng không rõ về jQuery, bạn muốn sử dụng x-editable ? Không sao, đã có gem bootstrap-x-editable-rails.

Chỉ việc thêm gem vào, chạy bundle install vào là xong