Program edytuje dane podane w wirtualnej liście za pomocą okienka modalnego (sheet)

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
axios
  .get("http://localhost/data") //pobranie danych do wirtualnej listy
  .then(response => {
    var virtualList = app.virtualList.create({ //inicjacja wirtualnej listy
      // List Element
      el: ".virtual-list",
      // Pass array with items
      items: response.data, //dane pobrane z serwera
      // Custom search function for searchbar
      searchAll: function(query, items) {
        var found = [];
        for (var i = 0; i < items.length; i++) {
          if (
            items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 ||
            query.trim() === ""
          )
            found.push(i);
        }
        return found; //return array with mathced indexes
      },
      // List item Template7 template
      itemTemplate:
        '<li data-id="{{id}}">' +
        '<a href="#" class="item-link item-content item-sheet">' +
        '<div class="item-inner">' +
        '<div class="item-title-row">' +
        '<div class="item-title">{{nazwa}}</div>' +
        "</div>" +
        '<div class="item-subtitle">{{cena}}</div>' +
        "</div>" +
        "</a>" +
        "</li>",
      // Item height
      height: app.theme === "ios" ? 63 : app.theme === "md" ? 73 : 46
    });

    $$(".virtual-list").on("click", "li", function() { //zdarzenie po kliknięciu w element listy
      let _this = this;

      var dynamicSheet = app.sheet.create({ //formularz do edycji
        content: `<div class="sheet-modal">
                        <div class="toolbar">
                        <div class="toolbar-inner">
                        <div class="left"></div>
                        <div class="right">
                        <a class="link sheet-close">Done</a>
                        </div>
                        </div>
                        </div>
                        <div class="sheet-modal-inner">
                        <div class="block">
                        <div class="list no-hairlines-md">
                        <ul>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                    <input type="text" placeholder="Tytuł" id="title">
                                    <span class="input-clear-button"></span>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                    <input type="number" placeholder="tekst" id="subtitle">
                                    <span class="input-clear-button"></span>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                    <button class="col button button-fill" id="save">Zapisz</button>
                                    <span class="input-clear-button"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        </div>
                       
                        <p><a href="#" class="link sheet-close">Close me</a></p>
                        </div>
                        </div>
                        </div>`,
        // Events
        on: {
          open: function(sheet) { //po otwarciu sheet'a
            let id = _this.dataset.id; //pobranie id klikniętego elementu listy
            let title = _this.getElementsByClassName("item-title");
            let subtitle = _this.getElementsByClassName("item-subtitle");

            let titleInput = sheet.el.querySelector("#title"); //pobranie uchwytu do inputów z otwartego sheet'a
            let subtitleInput = sheet.el.querySelector("#subtitle");

            titleInput.value = title[0].innerText; //podanie aktualnych danych do inputów
            subtitleInput.value = subtitle[0].innerText;

            let saveBtn = sheet.el.querySelector("#save");

            saveBtn.addEventListener("click", function() { //po kliknięciu w przycisk "zapisz"
              title[0].innerText = titleInput.value; //nadpisanie danych w liście
              subtitle[0].innerText = subtitleInput.value;

              //wysyłanie na serwer danych do edycji
              app.request.post(
                "http://localhost/data/update.php",
                {
                  nazwa: titleInput.value, //dane z inputa
                  cena: subtitleInput.value,
                  id: id //id wpisu w bazie danych
                },
                function(data) {
                  console.log("Load was performed", data);
                }
              );
            });
          }.bind(_this),
          opened: function(sheet) {
            console.log("Sheet opened");
          }
        }
      });
      // Open dynamic sheet
      dynamicSheet.open();
    });
  });

Szablon html wirtualnej listy

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
<div class="page" data-name="list">
    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner sliding">
            <div class="title">Virtual List</div>
            <div class="subnavbar">
                <form data-search-container=".virtual-list" data-search-item="li" data-search-in=".item-title" class="searchbar searchbar-init">
                    <div class="searchbar-inner">
                        <div class="searchbar-input-wrap">
                            <input type="search" placeholder="Search" />
                            <i class="searchbar-icon"></i>
                            <span class="input-clear-button"></span>
                        </div>
                        <span class="searchbar-disable-button if-not-aurora">Cancel</span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="searchbar-backdrop"></div>
    <div class="page-content">
        <div class="list simple-list searchbar-not-found">
            <ul>
                <li>Nothing found</li>
            </ul>
        </div>
        <div class="list virtual-list media-list searchbar-found"></div>
    </div>
</div>

Api na serwerze wystawiające json’a z bazy

1
2
3
4
5
6
7
8
9
10
<?php
$conn = new mysqli("localhost", "root", "", "virtuallist");
$conn->set_charset("utf8");
if ($result = $conn->query("SELECT * FROM produkty")) {
    $arr = [];
    while($row = $result->fetch_array(MYSQLI_ASSOC)) {
            $arr[] = $row;
    }
    echo json_encode($arr);
}

Kod na serwerze obierający dane z aplikacji

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
header('Content-Type: text/html; charset=utf-8');
if(isset($_POST["nazwa"])&&isset($_POST["cena"])&&isset($_POST["id"])) {
    $conn = new mysqli("localhost", "root", "", "virtuallist");
    $conn->set_charset("utf-8");
    $conn->query("SET NAMES utf8");

    $nazwa = $_POST["nazwa"];
    $cena = $_POST["cena"];
    $id = $_POST["id"];

    $stmt = $conn->prepare("UPDATE produkty SET nazwa=?, cena=? WHERE id=?");
    $stmt->bind_param('sii', $nazwa, $cena, $id);
    $stmt->execute();
    $result = $stmt->get_result();
}
Android, Cordova (phonegap), framework7, HTML + CSS, JavaScript

Tagged in:

, , ,