zoukankan      html  css  js  c++  java
  • [Bootstrap-Table] 中的事件用例

    [Bootstrap-Table] 中的事件

    --------------------------------------------------

    <div class="alert alert-success" id="events-result" data-es="Aquí se muestra el resultado del evento">
         Here is the result of event. 
    </div>
    <table id="events-table" data-url="data2.json" data-height="299" data-search="true" data-pagination="true" data-show-columns="true">
         <thead>
              <tr>
                       <th data-field="state" data-checkbox="true"></th>
                       <th data-field="id" data-sortable="true">Item ID</th>
                       <th data-field="name" data-sortable="true">Item Name</th>
                       <th data-field="price" data-sortable="true">Item Price</th>
               </tr>
           </thead>
    </table>
    View Code


    --------------------------------------------------

     1 <script>
     2      $(function () {
     3          $('#basic-events-table').next().click(function () {
     4              $(this).hide();
     5              var $result = $('#events-result');
     6              $('#events-table').bootstrapTable({
     7                  /*
     8                      onAll: function (name, args) {
     9                          console.log('Event: onAll, data: ', args);
    10                      }
    11                      onClickRow: function (row) {
    12                          $result.text('Event: onClickRow, data: ' + JSON.stringify(row));
    13                      },
    14                      onDblClickRow: function (row) {
    15                          $result.text('Event: onDblClickRow, data: ' + JSON.stringify(row));
    16                      },
    17                      onSort: function (name, order) {
    18                          $result.text('Event: onSort, data: ' + name + ', ' + order);
    19                      },
    20                      onCheck: function (row) {
    21                          $result.text('Event: onCheck, data: ' + JSON.stringify(row));
    22                      },
    23                      onUncheck: function (row) {
    24                          $result.text('Event: onUncheck, data: ' + JSON.stringify(row));
    25                      },
    26                      onCheckAll: function () {
    27                          $result.text('Event: onCheckAll');
    28                      },                 onUncheckAll: function () {
    29                          $result.text('Event: onUncheckAll');
    30                      },                 onLoadSuccess: function (data) {
    31                          $result.text('Event: onLoadSuccess, data: ' + data);
    32                      },                 onLoadError: function (status) {
    33                          $result.text('Event: onLoadError, data: ' + status);
    34                      },                 onColumnSwitch: function (field, checked) {
    35                          $result.text('Event: onSort, data: ' + field + ', ' + checked);
    36                      },                 onPageChange: function (number, size) {
    37                          $result.text('Event: onPageChange, data: ' + number + ', ' + size);
    38                      },                 onSearch: function (text) {
    39                          $result.text('Event: onSearch, data: ' + text);
    40                      }
    41                  */
    42              }).on('all.bs.table', function (e, name, args) {
    43                  console.log('Event:', name, ', data:', args);
    44              }).on('click-row.bs.table', function (e, row, $element) {
    45                  $result.text('Event: click-row.bs.table, data: ' + JSON.stringify(row));
    46              }).on('dbl-click-row.bs.table', function (e, row, $element) {
    47                  $result.text('Event: dbl-click-row.bs.table, data: ' + JSON.stringify(row));
    48              }).on('sort.bs.table', function (e, name, order) {
    49                  $result.text('Event: sort.bs.table, data: ' + name + ', ' + order);
    50              }).on('check.bs.table', function (e, row) {
    51                  $result.text('Event: check.bs.table, data: ' + JSON.stringify(row));
    52              }).on('uncheck.bs.table', function (e, row) {
    53                  $result.text('Event: uncheck.bs.table, data: ' + JSON.stringify(row));
    54              }).on('check-all.bs.table', function (e) {
    55                  $result.text('Event: check-all.bs.table');
    56              }).on('uncheck-all.bs.table', function (e) {
    57                  $result.text('Event: uncheck-all.bs.table');
    58              }).on('load-success.bs.table', function (e, data) {
    59                  $result.text('Event: load-success.bs.table');
    60              }).on('load-error.bs.table', function (e, status) {
    61                  $result.text('Event: load-error.bs.table, data: ' + status);
    62              }).on('column-switch.bs.table', function (e, field, checked) {
    63                  $result.text('Event: column-switch.bs.table, data: ' +
    64                      field + ', ' + checked);
    65              }).on('page-change.bs.table', function (e, size, number) {
    66                  $result.text('Event: page-change.bs.table, data: ' + number + ', ' + size);
    67              }).on('search.bs.table', function (e, text) {
    68                  $result.text('Event: search.bs.table, data: ' + text);
    69              });
    70          });
    71      });
    72  </script> 
    View Code

    --------------------------------------------------

    作者:码路工人

    公众号:码路工人有力量(Code-Power)

    欢迎关注个人微信公众号 Coder-Power

    一起学习提高吧~

  • 相关阅读:
    如何成为一名数据科学家
    暑假反思
    暑假计划(7月23日-8月21日)
    ACM数论模板
    Nelder–Mead method
    Introduction to Data Mining
    51_1037最长循环节 (miller rabin算法 pollard rho算法 原根)
    乘法逆元(转)
    51_1228 序列求和(伯努利数)(转)
    清除input中内容的简单方法
  • 原文地址:https://www.cnblogs.com/CoderMonkie/p/8349559.html
Copyright © 2011-2022 走看看