2.3K 81 71

Đã đăng vào thg 6 26, 2016 12:46 SA 5 phút đọc

834

Inline edit with x-editable

Bài đăng này đã không được cập nhật trong 8 năm

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

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>

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>

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.

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

$.fn.editable.defaults.mode = 'inline';
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'
    });

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
    }

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

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
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

Trước hết bạn xem hướng dẫn sử dụng gem tại đây.

Cách sử dụng

Cài đặt gem

Thêm dòng sau vào Gemfile rồi chạy bundle install

        gem 'bootstrap-x-editable-rails'

Thêm X-editable cho Bootstrap Thêm dòng sau vào app/assets/javascripts/application.js

    //= require bootstrap-editable/bootstrap-editable

Thêm dòng sau vào `app/assets/stylesheets/application.css`

    *= require bootstrap-editable/bootstrap-editable

Chú sử dụng @import nếu bạn dùng scss

Nếu bạn sử dụng Bootstrap 3 thì hãy chuyển sang sử dụng thư viện tương ứng:
Thêm dòng sau vào `app/assets/javascripts/application.js`

    //= require bootstrap3-editable/bootstrap-editable

Thêm dòng sau vào `app/assets/stylesheets/application.css`

    *= require bootstrap3-editable/bootstrap-editable

Thêm attributes cho tag html

Sau khi đã cài gem và include thư viện vào, bạn chỉ việc viết tag html như sau. Ví dụ: bạn muốn inline edit trường name của model post, record có id=1. Bạn sẽ viết như sau:

    <td>
      <a href="#" data-xeditable="true" data-pk=<%= post.id %> data-model="post" data-name="name" data-url=<%= post_url(post) %> data-title="Enter name" class="editable editable-click"><%= post.name %></a>
    </td>

Chỉ cần như vậy là bạn đã có thể sử dụng editable. Rất đơn giản phải không.

Lời kết

Để tăng trải nghiệm người dùng, ta có thể sử dụng tính năng inline edit bằng cách dùng library x-editable. Chúc bạn thành công.

Tham khảo

jQuery Bootstrap

Mở đầu

Cách sử dụng

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

Gem bootstrap-x-editable-rails

Cách sử dụng

Lời kết

Tham khảo

Mục lục