Đặt vấn đề

Sử dụng kiểu dữ liệu Date và DateRange trong WAK chỉ đem đến cho ta chọn 1 thời gian cụ thể,vậy với những yêu cầu khách hàng muốn lưu theo nhiều khoảng thời gian lặp lại tùy biến theo khách hàng thì sao?. JqCron sẽ giúp bạn thực hiện điều đó.

JqCron

jqcron là gì?

  • là 1 plugin jquery cho phép sử dụng để lựa chọn nhiều khoảng thời gian khác nhau.Ở trong wak,plugin này đặt tại thư mục web/tm/jqcron.jsfile việt hóa

Kiểu dữ liệu khi lưu vào trong DATABASE

┬    ┬    ┬    ┬    ┬    ┬
│    │    │    │    │    |
│    │    │    │    │    └ day of week (0 - 7) (0 or 7 is Sun)
│    │    │    │    └───── month (1 - 12)
│    │    │    └────────── day of month (1 - 31)
│    │    └─────────────── hour (0 - 23)
│    └──────────────────── minute (0 - 59)

Tùy biến hiển thị mặc định

Bạn có thể tùy biến 1 số mặc định hiển thị tại đoạn code sau trong file web/tm/jqcron.js

var jqCronDefaultSettings = {
    texts: {},
    monthdays: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
    hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
    minutes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59],
    seconds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59],
    lang: 'vi',
    enabled_minute: true,
    enabled_hour: true,
    enabled_day: true,
    enabled_week: true,
    enabled_month: true,
    enabled_year: true,
    multiple_dom: true,
    multiple_month: true,
    multiple_mins: true,
    multiple_secs: true,
    multiple_dow: true,
    multiple_time_hours: true,
    multiple_time_minutes: true,
    multiple_time_seconds: true,
    numeric_zero_pad: false,
    default_period: 'day',
    default_value: '0 * * * * *',
    no_reset_button: true,
    disabled: false,
    bind_to: null,
    bind_method: {
        set: function($element, value) {
            $element.is(':input') ? $element.val(value) : $element.data('jqCronValue', value);
        },
        get: function($element) {
            return $element.is(':input') ? $element.val() : $element.data('jqCronValue');
        }
    }
};

//Trong đó //
  • lang: 'vi',: Chọn file ngôn ngữ
  • enabled_xxx: true, :Có cho chọn ngày,tháng,năm,phút,giây,ngày trong tuần hay không?
  • default_period: 'day', : Mặc định hiển thị ban đầu lựa chọn là gì?
  • default_value: '0 * * * * *', : Giá trị mặc định ban đầu
  • // no_reset_button: true,// : Có cho hiển thị nút reset lựa chọn hay không
  • disabled: false, Có cho sửa hay không,thuộc tính này giống thuộc tính "ReadOnly" dùng cho các Field của file dic

Hình ảnh minh họa

Lựa chọn nhiều thời gian trong file create.dic

jqcron.png

Lựa chọn nhiều thời gian trong thread

jqcron-thread-1.png

Hướng dẫn step-by-step

Tạo 1 node để hiển thị

  • Tạo 1 Field là SCHEDULE với các thông tin như sau:
Field
    Text==SCHEDULE
  • Tạo với Control và Label như sau
Layout==Table
    Label==SCHEDULE
    Control==SCHEDULE
        LayoutExtra==width="440px"
        BREAK

Viết JS bên dưới note HTML để xử lý việc trên

Html
    Footer=:
    :{
        <link rel="stylesheet" type="text/css" href="/tm/jqcron.css" />
        <style>
            .jqCron {
                display:block;
                padding:6px 8px;
                font-size:14px;
                border:1px solid #a8a8a8;
                position:relative;
            }
            .jqCron-selector
            {
                position:relative;
            }
            .jqCron-selector-list
            {
                top:100%;
                right:3px;
            }
        </style>
        <script defer type="text/javascript" src="/tm/jqcron.js"></script>
        <script defer type="text/javascript" src="/tm/jqcron.vi.js"></script>
        <script type="text/javascript">
            fs_addLoadEvent(function(){
                $('#SCHEDULE0').hide();
                $('#SCHEDULE0').jqCron();
            });
        </script>
    :}

Comment