用到的工具

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