aui-archive /auiplugin-tests/src/main/resources/restfultable/restfultable-example.js

Language Javascript Lines 97
MD5 Hash b1162d4b29954472e27f265302b4a030
Repository https://bitbucket.org/jwalton/aui-archive.git View Raw File View Project SPDX
| Open JSFiddle
 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
(function ($) {

    var EditGroupView = AJS.RestfulTable.CustomEditView.extend({
        render: function (self) {
            var $select = $("<select name='group' class='select'>" +
                    "<option value='Friends'>Friends</option>" +
                    "<option value='Family'>Family</option>" +
                    "<option value='Work'>Work</option>" +
                    "</select>");

            $select.val(self.value); // select currently selected
            return $select;
        }
    });

    var NameReadView = AJS.RestfulTable.CustomReadView.extend({
        render: function (self) {
            return $("<strong />").text(self.value);
        }
    });

    var CheckboxEditView = AJS.RestfulTable.CustomEditView.extend({
        render: function (self) {
            console.log(self);
            var $select = $("<input type='checkbox' class='ajs-restfultable-input-" + self.name + "' />" +
                "<input type='hidden' name='" + self.name + "'/>");
            return $select;
        }
    });

    var DummyReadView = AJS.RestfulTable.CustomReadView.extend({
        render: function (self) {
            return $("<strong />").text("Blah");
        }
    });

    // DOM ready
    $(function () {
        var auiEvents = ["ROW_ADDED", "REORDER_SUCCESS", "ROW_REMOVED", "EDIT_ROW"];
        _.each(auiEvents, function(eventName){
            $(AJS).one(AJS.RestfulTable.Events[eventName], function(){
                AJS.messages.info("#message-area", {
                    id: eventName,
                    title: "test",
                    body: eventName + " fired on AJS. Used for testing AJS events."
                });
            });
        });

        var url = AJS.contextPath() + "/rest/contacts/1.0/contacts",
            $contactsTable = $("#contacts-table"),
            $contactsAddPositionBottomTable = $("#contacts-table-addPositionBottom");;

        new AJS.RestfulTable({
            el: $contactsTable, // <table>
            autofocus: true, // auto focus first field of create row
            columns: [
                {id: "name", header: "Name", readView: NameReadView}, // id is the mapping of the rest property to render
                {id: "group", header: "Group", editView: EditGroupView}, // header is the text in the <th>
                {id: "number", header: "Number"},
                {id: "checkbox", header: "Checkbox", readView: DummyReadView, editView: CheckboxEditView}
            ],
            resources: {
                all: url, // resource to get all contacts
                self: url // resource to get single contact url/{id}
            },
            noEntriesMsg: "You have no contacts. Loner!", // message to be displayed when table is empty
            allowReorder: true, // drag and drop reordering
            fieldFocusSelector: function(name) {
                return ":input[type!=hidden][name=" + name + "], #" + name + ", .ajs-restfultable-input-" + name;
            }
        });

        // duplicate of the first table but with the addPosition: "bottom" option applied.
        new AJS.RestfulTable({
            el: $contactsAddPositionBottomTable, // <table>
            autofocus: true, // auto focus first field of create row
            columns: [
                {id: "name", header: "Name", readView: NameReadView}, // id is the mapping of the rest property to render
                {id: "group", header: "Group", editView: EditGroupView}, // header is the text in the <th>
                {id: "number", header: "Number"},
                {id: "checkbox", header: "Checkbox", readView: DummyReadView, editView: CheckboxEditView}
            ],
            resources: {
                all: url, // resource to get all contacts
                self: url // resource to get single contact url/{id}
            },
            noEntriesMsg: "You have no contacts. Loner!", // message to be displayed when table is empty
            allowReorder: true, // drag and drop reordering
            fieldFocusSelector: function(name) {
                return ":input[type!=hidden][name=" + name + "], #" + name + ", .ajs-restfultable-input-" + name;
            },
            addPosition: "bottom"
        });
    });

})(AJS.$);
Back to Top