用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源代码地址