用angularjs寫的一個簡單的grid table

效果圖

用到的工具

1.需要先安裝nodejs打開直接安裝就好了
2.安裝完成后使用 淘寶的源 國內速度快
安裝方法

 npm install -g cnpm --registry=https://registry.npm.taobao.org

以后直接使用cnpm 直接安裝包就可以了

開始開發

1.打開命令進入到當前目錄 然后輸入 cnpm init
按照提示一步步走就可以了
輸入完后會在當前文件夾建一個 package.json 文件
2.我們使用bower 來管理前端包
全局安裝bower cnpm install bower -g
然后執行 bower init
安裝需要使用的包來進行開發

bower install angularjs --save;
bower install bootstrap --save;
bower install angular-bootstrap --save;

bower 默認安裝位置是在當前文件夾下的 bower_components 里面 可以新建一個 .bowerrc 文件來改變安裝位置

.bowerrc文件

{
"directory":"dist/lib"
}

上面給一些不了解的同學了解一下 下面看一下代碼

先寫一個module

angular.module('kx.grid', ['kx.grid.tpls','ui.bootstrap']);

grid指令

angular.module('kx.grid').directive("grid", function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      config: '=',
      columns: '='
    },
    templateUrl: "views/grid.html",
    controller: 'gridController'
  }
});

grid模版

<div>
  <button class="btn btn-secondary" ng-click="add(config.defaultParams)">添加</button>
  <form class="form-inline pull-right">
    <div class="form-group" ng-repeat="column in columns | filter: {isSearchColumn:true}">
      <label>{{column.caption}}</label>
      <input ng-if="!column.items" type="text" ng-model="condition[column.fieldName]" class="form-control">
      <select ng-if="column.items" class="form-control" ng-model="condition[column.fieldName]" ng-options="dbType.value as dbType.name for dbType in column.items"></select>
    </div>
    <button type="submit" ng-click="search()" class="btn btn-primary">查詢</button>
  </form>

  <table class="table table-hover">
    <thead>
      <tr> 
        <th ng-repeat="column in columns | filter: {isListColumn:true}">{{column.caption}}</th>
        <th>操作</th>
      </tr>
    </thead> 
    <tbody>
      <tr ng-repeat="item in pagination.data"> 
        <td ng-repeat="column in columns">  
          <grid-cell column="column" item="item"></grid-cell>
        </td>
        <td><button type="button" class="btn btn-outline-danger btn-sm" ng-click="del(item.id)">刪除</button></td>
      </tr>
    </tbody>
    <tfoot ng-if="config.isPagination&&pagination.pageCount>1">
      <tr>
        <td colspan="{{columns.length + 1}}">
          <div ng-if="config.isPagination&&pagination.pageCount>1" class="pull-right">
            <div class="pagination-info" ng-hide="paginationInfo.tipHide"><span class="ng-binding">共有{{pagination.total}}條</span>， <span class="ng-binding">每頁顯示：10條</span></div>
            <ul class="pagination">
              <li class="page-item" ng-class="{disabled: pagination.pageIndex == 1}"><a class="page-link" ng-click="pagination.pageIndex == 1 || load(1)">首頁</a></li>
              <li class="page-item" ng-class="{disabled: pagination.pageIndex == 1}"><a class="page-link" ng-click="pagination.pageIndex == 1 || load(pagination.pageIndex-1)">上一頁</a></li>
              <li class="page-item" ng-repeat="page in pagination.pageNumbers" ng-class="{active: page == pagination.pageIndex}"><a class="page-link" ng-click="load(page)">{{page}}</a></li>
              <li class="page-item" ng-class="{disabled: pagination.pageIndex == pagination.pageCount}"><a class="page-link" ng-click="pagination.pageIndex == pagination.pageCount || load(pagination.pageIndex+1)">下一頁</a></li>
              <li class="page-item" ng-class="{disabled: pagination.pageIndex == pagination.pageCount}"><a class="page-link" ng-click="pagination.pageIndex == pagination.pageCount || load(pagination.pageCount)">尾頁</a></li>
            </ul>
          </div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

其余直接在github上面看源代碼
github源代碼地址