Menu - Button

Column AColumn BColumn CColumn D
abcd 
<table id="table1">
  <thead>
  <tr>
    <th></th>
    <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      <input type="checkbox" name="row.id" value="1"/>
    </td>
    <td>a</td><td>b</td><td>c</td><td>d</td>
  </tr>
  </tbody>
</table>
<script>
  $(function () {

    var $table = $("#table1");

    var showSelectedRows = function () {
      alert('Selected rows: ' + JSON.stringify($table.semiAutoTable('getSelectedRows')));
    }

    $table.semiAutoTable({
      pageOption: false,
      menus: [
        {
          title: 'Simple',
          callback: showSelectedRows
        },
        {
          title: 'With Icon',
          icon: 'fa fa-calendar',
          callback: showSelectedRows
        },
        {
          title: 'Styled',
          btnClass: 'btn-success',
          callback: showSelectedRows
        },
        {
          title: 'With tooltip',
          tooltip: 'Tip Tip',
          callback: showSelectedRows
        },
        {
          title: 'All feature',
          icon: 'fa fa-calendar',
          btnClass: 'btn-danger',
          tooltip: 'Tip Tip',
          callback: showSelectedRows
        }
      ],
      useDataTable: false
    })



  });
</script>

Menu - Button dropdown

Column AColumn BColumn CColumn D
abcd 
<table id="table2">
  <thead>
  <tr>
    <th></th>
    <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      <input type="checkbox" name="row.id" value="1"/>
    </td>
    <td>a</td><td>b</td><td>c</td><td>d</td>
  </tr>
  </tbody>
</table>
<script>
  $(function () {
    var $table = $("#table2");

    var showSelectedRows = function () {
      alert('Selected rows: ' + JSON.stringify($table.semiAutoTable('getSelectedRows')));
    }

    $table.semiAutoTable({
      pageOption: false,
      menus: [
        {
          title: 'Simple',
          dropdowns: [
            {
              title: 'Simple sub-menu',
              callback: showSelectedRows
            },
            'divider',
            {
              title: 'Icon sub-menu',
              icon: 'fa fa-pagelines',
              callback: showSelectedRows
            },
          ]
        },
        {
          title: 'With icon',
          icon: 'fa fa-calendar',
          dropdowns: [
            {
              title: 'Simple sub-menu',
              callback: showSelectedRows
            }
          ]
        },
        {
          title: 'Styled',
          btnClass: 'btn-info',
          dropdowns: [
            {
              title: 'Simple sub-menu',
              callback: showSelectedRows
            }
          ]
        },
        {
          title: 'With tooltip',
          tooltip: 'tooltip',
          dropdowns: [
            {
              title: 'Simple sub-menu',
              callback: showSelectedRows
            }
          ]
        },
        {
          title: 'Full feature',
          btnClass: 'btn-success',
          tooltip: 'tooltip',
          icon: 'fa fa-calendar',
          dropdowns: [
            {
              title: 'Simple sub-menu',
              callback: showSelectedRows
            }
          ]
        }
      ],
      useDataTable: false
    });
  });
</script>

Menu - Simple 有dropdowns, callback的菜单

Column AColumn BColumn CColumn D
abcd 
<table id="table4">
  <thead>
  <tr>
    <th></th>
    <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      <input type="checkbox" name="row.id" value="1"/>
    </td>
    <td>a</td><td>b</td><td>c</td><td>d</td>
  </tr>
  </tbody>
</table>
<script>
  $(function () {
    var $table = $("#table4");

    var showSelectedRows = function () {
      console.log('Selected rows: ' + JSON.stringify($table.semiAutoTable('getSelectedRows')));
    }

    $table.semiAutoTable({
      pageOption: false,
      menus: [
        {
          title: 'Simple',
          callback: showSelectedRows,
          dropdowns: [
            {
              title: 'Simple sub-menu',
              callback: showSelectedRows
            },
            'divider',
            {
              title: 'Icon sub-menu',
              icon: 'fa fa-pagelines',
              callback: showSelectedRows
            },
          ]
        },
        {
          title: 'With icon',
          callback: showSelectedRows,
          icon: 'fa fa-calendar',
          dropdowns: [
            {
              title: 'Simple sub-menu',
              callback: showSelectedRows
            }
          ]
        },
        {
          title: 'Styled',
          callback: showSelectedRows,
          btnClass: 'btn-info',
          dropdowns: [
            {
              title: 'Simple sub-menu',
              callback: showSelectedRows
            }
          ]
        },
        {
          title: 'With tooltip',
          callback: showSelectedRows,
          tooltip: 'tooltip',
          dropdowns: [
            {
              title: 'Simple sub-menu',
              callback: showSelectedRows
            }
          ]
        },
        {
          title: 'Full featured',
          callback: showSelectedRows,
          btnClass: 'btn-success',
          tooltip: 'tooltip',
          icon: 'fa fa-calendar',
          dropdowns: [
            {
              title: 'Simple sub-menu',
              callback: showSelectedRows
            }
          ]
        },
      ],
      useDataTable: false
    })
  });
</script>

Menu - 菜单组 将多个菜单放在一个数组里

菜单组可以和其他菜单的定义并列

Column AColumn BColumn CColumn D
abcd 
<table id="table3">
  <thead>
  <tr>
    <th></th>
    <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      <input type="checkbox" name="row.id" value="1"/>
    </td>
    <td>a</td><td>b</td><td>c</td><td>d</td>
  </tr>
  </tbody>
</table>
<script>
  $(function () {
    var $table = $("#table3");

    var showSelectedRows = function () {
      alert('Selected rows: ' + JSON.stringify($table.semiAutoTable('getSelectedRows')));
    }

    $table.semiAutoTable({
      pageOption: false,
      menus: [
        {
          title: 'Simple',
          icon: 'fa fa-calendar',
          callback: showSelectedRows
        },
        [
          {
            title: 'Simple',
            icon: 'fa fa-calendar',
            callback: showSelectedRows
          },
          {
            title: 'Simple',
            dropdowns: [
              {
                title: '子Menu1',
                icon: 'fa fa-pagelines',
                callback: showSelectedRows
              }
            ]
          }
        ]
      ],
      useDataTable: false
    })
  });
</script>

Menu - Tag

给menu加标签

Column AColumn BColumn CColumn D
abcd 
<table id="table5">
  <thead>
  <tr>
    <th></th>
    <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      <input type="checkbox" name="row.id" value="1"/>
    </td>
    <td>a</td><td>b</td><td>c</td><td>d</td>
  </tr>
  </tbody>
</table>
<script>
  $(function () {

    var $table = $("#table5");

    var showSelectedRows = function () {
      alert('Selected rows: ' + JSON.stringify($table.semiAutoTable('getSelectedRows')));
    }

    $table.semiAutoTable({
      pageOption: false,
      menus: [
        {
          id: 1,
          title: 'Simple',
          callback: showSelectedRows,
          tag: '20'
        },
        {
          title: 'With Icon',
          icon: 'fa fa-calendar',
          callback: showSelectedRows
        },
        {
          id: 3,
          title: 'Styled',
          btnClass: 'btn-success',
          callback: showSelectedRows
        }
      ],
      useDataTable: false
    })

    $table.semiAutoTable('renderButtonTag', [{id:3, tag: '11'}]);

  });
</script>