Question

这是我的framework7数据表

我要选中带复选框的行，然后按一下“添加”按钮旁边的复选按钮

我可以获取行数据。

当我阅读完 https://framework7.io/docs/checkbox.html 和 https://framework7.io/docs/data-table.html#data-table-app-methods（带有行操作的备用标头）

我只有一个主意：app.dataTable.get（el）

，不要做下一步。有人可以指导我完成此任务吗？

$$(document).on(‘page:init’, ‘.page[data-name=“home_employee”]’, function(e) {
console.log(‘this is page employee’);

var sqlget = 'SELECT * FROM `customers`';
//this is select the data from customers [emplotee_table (home_employee.html)]
connection.query(sqlget, function(error, results, fields) {

    for (i = 0; i < results.length; i++) {

        $$(document).find('#employee_table').append($$('<tr> ' +
            '<td class="checkbox-cell">' +
            '<label class="checkbox">' +
            '<input type="checkbox">' +
            '<i class="icon-checkbox"></i>' +
            '</label>' +
            '</td>' +
            ' <td style="font-family:Poppins-Medium;" class="label-cell"> ' + results[i].name + ' </td>' +
            ' <td class="numeric-cell">' + results[i].telephone + '</td> ' +
            ' <td class="numeric-cell">' + results[i].order_num + '</td> ' +
            '<td class="numeric-cell">' + results[i].juice1_num + '</td> ' +
            '<td class="numeric-cell">' + results[i].juice2_num + '</td> ' +
            '<td class="numeric-cell">' + results[i].juice3_num + '</td> ' +
            '<td class="numeric-cell">' + results[i].date + '</td> ' +
            '</tr>'));
    }
});
});

这是我的html

 <div class="block block-strong">
        <div class="data-table search-content-list data-table-init card">
            <div class="card-header">
                <!-- Table links/actions -->
                <div class="data-table-links">
                    <!--ADD products button is at here-->

                    <a class="link dynamic-popup icon-only" id="products_add">
                        <i style="height: 25px;width:25px;" class="icon material-icons md-only">add_round</i>
                    </a>

                    <!--out products button is at here-->
                    <a class="link icon-only" id="product_out">
                        <i style="height: 25px;width:25px;" class="icon material-icons md-only">check_round</i>
                    </a>

                </div>


            </div>
            <div style="overflow-y:scroll; height:320px;" class="card-content">
                <table>
                    <thead>
                        <tr>
                            <th class="checkbox-cell">
                                <label class="checkbox">
                                        <input type="checkbox">
                                        <i class="icon-checkbox"></i>
                                      </label>
                            </th>

                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="label-cell">Customer Name</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Customer Numbers</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Orders Numbers</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Juice 1</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Juice2</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Juice 3</th>
                            <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="employee_table">
                        <!--this is data from data_process.js-->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

在我之后

console.log(app.dataTable.get());

它在我的控制台中返回

t {eventsParents: Array(1), eventsListeners: {…}, params: {…}, $el: Dom7, el: div.data-table.search-content-list.data-table-init.card, …}
    $el: Dom7 {0: div.data-table.search-content-list.data-table-init.card, length: 1}
    $headerEl: Dom7 {length: 0}
    $headerSelectedEl: Dom7 {length: 0}
    attachEvents: ƒ ()
    collapsible: false
    detachEvents: ƒ ()
    el: div.data-table.search-content-list.data-table-init.card
    eventsListeners: {}
    eventsParents: [t]
    params: {el: div.data-table.search-content-list.data-table-init.card}
    __proto__: t

我想从检查的每一行中获取值（因为我需要插入到另一个mysql表中）

然后我要它删除选定的行（也删除表中的数据）。

选中复选框的Framework7数据表

0 个答案: