README

本包提供为 angular-smart-table 服务器端处理数据的服务

安装

1. 通过 composer 安装

       composer require mikelmi/mks-theme:dev-master
   

2. 在 config/app.php 的 providers 中添加服务提供者

       Mikelmi\SmartTable\Providers\SmartTableServiceProvider::class,

3. 发布资源

       php artisan vendor:publish --provider="Mikelmi\SmartTable\Providers\SmartTableServiceProvider"
   

使用方法

服务器端

创建处理 smart-table-request 的路由

在路由内部

1. 创建数据源。可以是查询构建器（Eloquent/Database）或集合

   //Query Builder
   $source = \App\User::select(['id', 'name', 'email', 'created_at']);
   
   //or Collection
   $source = collect([
       ['id' => '1', 'name' => 'John Smith'],
       ['id' => '2', 'name' => 'Mister X'],
       //...
   ]);

2. 创建 SmartTable 引擎实例

   $engine = app(\Mikelmi\SmartTable\SmartTable::class)->make($source);
   
   //optionaly set columns for general search
   $engine->setSearchColumns(['name', 'email'])

3. 应用请求

   $engine->apply();
   
   //optionaly apply advanced method for your source, e.g. default sorting
   $engine->orderBy('created_at', 'desc');

4. 返回响应

   return $engine->response();

客户端

1. 包含 JavaScript 文件。本包包含三个 JavaScript 文件

   • mks-smart-table.js - 仅包含基本功能，不包含任何库
   • mks-smart-table-st.js - 包含 angular-smart-table
   • mks-smart-table-full.js - 包含所有必需依赖（angular 1.x 和 angular-smart-table）

   例如（在模板中）

      ...
      <script src="path/to/angular.js"></script>
      <script src="{{asset('vendor/mikelmi/mks-smart-table/js/mks-smart-table-st.js')}}"></script>
      <!-- Your another js -->
   </body>

2. 将 mks-smart-table 依赖添加到您的 angular 应用程序中。例如

   var app = angular.module('myApp', ['mks-smart-table']);

3. 初始化控制器 TableCtrl

   <div ng-controller="TableCtrl as grid" ng-init="grid.init('{{url('/url/to/handler')}}')">

4. 输出表格

   <table class="table" st-pipe="grid.pipeServer" st-table="grid.rows">
      <tbody>
          <tr ng-repeat="row in grid.rows">
              <td>{[{row.id}]}</td>
              <td>{[{row.name}]}</td>
              <td>{[{row.email}]}</td>
              <td>{[{row.created_at}]}</td>
          </tr>
      </tbody>
   </table>

5. 高级功能

   • 全局搜索

     您可以在表格外部添加一些输入用于过滤结果

     <input type="search" ng-model="gridQuery">

     然后向表格头部添加 mst-watch-query 指令

     <thead mst-watch-query="gridQuery">

   • 选择行

       <tbody>
           <tr ng-repeat="row in grid.rows">
               <td mst-select-row="row"></td>

   • '全选' 复选框

     <thead>
         <tr>
             <th mst-select-all-rows="grid.rows"> </th>

   • TableCtrl 函数

     • removeLocalRow(row) - 不进行服务器端操作删除行
     • removeRow(row, url, confirmText) - 通过 URL 进行服务器端操作后删除行
     • removeSelected(url, confirmText) - 通过 URL 进行服务器端操作后删除所选行
     • getSelected() - 获取所选行
     • updateRow(row, url, confirmText) - 通过 URL 发送行并使用返回的数据更新它
     • updateSelected(url, confirmText) - 与 updateRow 相同，但适用于所选行的数组

附加信息

本包中没有表格样式。您可以使用 Twitter Bootstrap 进行样式设计。

在此 https://github.com/mikelmi/mks-smart-table/tree/master/example 您可以查看本包的使用示例。

有关客户端实现的更多信息，请访问 angular-smart-table 网站 - https://lorenzofox3.github.io/smart-table-website/