Cách sử dụng thư viện Jquery x-editable

Giới thiệu

Thư viện x-editable được phát triển bởi lập trình viên Vitaliy Potapov dựa trên nền tảng boostrap.X-Editable giúp những developer có thể tạo những form edit nhanh chóng và đẹp mắt.Phiên bản mới nhất là bản v1.5.1.1

địa chỉ github của Vitaliy Potapov: https://github.com/vitalets

Demo: https://vitalets.github.io/x-editable/demo-bs3.html

Cách sử dụng

Để sử dụng Editable cần phải include vào trang của bạn 2 thư viện js và css sau.

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

Các setting trong editable()

Trong html viết

<a href="#" id="buildEditable" class="current" data-toogle="tooltip" title="<%= t "items.tooltip.edit" %>" data-item-id="<%= @item.id %>" data-value="<%= @item.value %>">
   Edit number
</a>

1.mode

x-Editable cung cấp 2 mode để hiển thị form edit là kiểu "Popover" và "inline".kiểu mặc định là popover Chúng ta có thể viết ngay đầu file js

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

hoặc viết bên trong hàm $("buildEditabe").editable(){}

mode: "popover"

2.placement

Vị trí hiển thị form edit "right", "left", "bottom", "top"

placement: "right"

3.type

Loại dữ liệu edit.trong setting này cần phải phù hợp với kiểu dữ liệu trong database.X-editable cung cấp 5 setting cơ bản là:

• "text"
• "textarea"
• "select"
• "date"
• "checklist"

type: "text"

4.url

Dùng để setting đường dẫn bao gồm

• /namespace/
• id

url: "/namespace/" + $("#item").data("item-id")

5.params

Là setting dùng để gọi đến hàm update trong controller của rails. một ví dụ để gọi đến hàm update trong items_controller.rb

params: function(params) {
  params.item = {value: params.value}
  return params;
}

6.display

• "value": gía trị hiển thị hiện tại
• "sourceData" mảng nhập vào hiện tại
• "response" gía trị server trả về sau khi gọi ajax submit

display: function(value, response) {
  $(this).attr("data-value", value);
}

7.ajaxOptions

Dùng để viết các hàm request và response.

• request mặc định là POST
• response là JSONresponse

ajaxOptions: {
  type: "PUT",
  dataType: "json"
}

Trong file js có thể gọi

$("buildEditable").editable({
  mode: "popover",  //Setup editable mode: inline or popup (default)
  placement: "right", //Setup editable position
  type: "text", //can be text|textarea|select|date|checklist
  pk: $("this").data("item-id"),//Setup primary key of record to be updated (ID in db)
  url: "/namespace/" + $("#item").data("item-id"),
  params: function(params) {
    params.item = {value: params.value}
    return params;
  },
  display: function(value, response) {
    $(this).attr("data-value", value);
  },
  ajaxOptions: {
    type: "PUT",
    dataType: "json"
  },
  validate: function(value) {
    // can write function to check validate free example:
    var regex = /\D/
    if (regex.test(value))
      return "input precision number";
    else if (value === "")
      return input require";
    else if (value < 0)
      return input less than zero";
  }
});

Có thể viết riêng hàm để hiển thị

$("buildEditable").on("shown", function(e, editable) {
  var value = $(this).text().replace(/,/g, "");
  editable.input.$input.val(parseInt(value));
});

Các $().editable(options) có thể tham khảo tại đây: https://vitalets.github.io/x-editable/docs.html#editable

Lời kết

X-editable sử dụng rất thích hợp trong các trường hợp muốn viết các form edit đơn giản và gọn nhẹ để edit 1 vài trường.Chúc bạn cài đặt và sử dụng X-editable thành công!