多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
### zhx.data.grid API | props | type | description | | --- | --- | --- | | gridData | Object | grid组件数据对象 | | scope | Object | grid所在控制器的作用域 | | columnDefs | Array | grid列配置项 | | checkModel | Boolean | 是否开启多选功能 | | sorter | Function | 如果表格有排序功能,则该Func表示排序后的回调方法 | | flexHeight | Number | 该数值表示一个冗余高度,grid的高度由页面高度减去此高度得到.设置该值后,grid会根据该值在页面上自适应高度 | | height | Number | grid的高度,设置该高度后,grid不会自适应高度 | | paginationConf | Object | grid的翻页配置项 | ___ ### API description > 以上API中有一些配置比较繁琐或需要详解的,这里列举出详细配置方法. #### scope ***每一个控制器只允许定义一个grid组件且必须将当前控制器的作用于作为参数传入grid组件***。其目的是为了保证grid的唯一性,因为grid会在当前控制的作用域下传递一些属性和方法,以供控制器和grid组件进行交互操作。如果需要定义多个grid组件,那么可以配置多个控制器或者给grid创建一个新的作用域. #### columnDefs 列对象是一组包含列对象的数组,我们约定了一些属性名称,这里会进行介绍: | name | type | description | | --- | --- | --- | | name | String | 对应数据字段的名称 | | displayName | String | 展示在页面中列的名称 | | width | Number | 设置一个列宽,如果不设置该属性,则列会自动设置一个宽度 | | enableSorting | Boolean | 该列是否可排序 | | filter | String/Object | 该列配置的过滤器或者自定义过滤,filter的使用见下面详解 | | visible | Boolean | 配置该列初始化时是否自动隐藏 | ***注意,如果你希望在组件中增加序号列,你应该在此处新增已经约定好的一个列对象,如下:*** ```js { displayName : "序号", name: "zhxRowNumber" } ``` 在列属性中,***filter***的使用完全依照AngularJS原生定义,可以传入一个String表示已经配置的过滤器的名称,其grid内部其实使用了AngularJS的`$filter`服务([具体可以参考官方文档](https://docs.angularjs.org/api/ng/filter/filter)),这里举两个例子分别对应String的方式和Object的方式: __String Model:__ ```js filter : 'formatDate' //formatDate为自定义过滤器 ``` __Object Model:__ ```js filter : { name : 'date', //过滤器的名称 params : ['YYYY-MM-DD hh:mm:ss'] //过滤器接收的参数 } ``` #### flexHeight 就像上面提到的一样,***flexHeight***属性的目的是为了让grid组件自适应高度,因为我们无法确定组件在什么条件与情况下使用,而又希望开发者能减少对前端的开发工作,所以当需要配置一个自适应高度的grid时就可以设置该属性。 当配置该属性后,grid的高度相当于 `gridHeight = clientHeight - flexHeight`; #### sorter 排序属性接收回调方法,该回调接收两个参数,如下表: | name | description | | --- | --- | | order | 排序字段 | | desc | 升序or降序 | 故,在这里,你可以将grid排序后的参数传递给后台查询参数对象或者做点其他事情; 比如: ```js //你的查询参数 $scope.param = { pageSize : 10, pageNumber : 1, orderBy : 'createTime', descOrAsc : 'desc' }; //grid配置参数 $scope.gridOptions = { ... sorter : function(order,desc){ $scope.param.orderBy = order; $scope.descOrAsc = desc; } ... } ``` 以上是一个sorter的常见用法. #### paginationConf 因为最初开发进度问题,grid并未开发一个翻页组件与之配合,所以选择了一个第三方翻页组件进行了嵌套,这里的配置项就是该组件的配置项,配置项如下: | name | type | description | | --- | --- | --- | | currentPage | Number | 当前页号 | | itemsPerPage | Number | 每页多少条数据 | | perPageOptions | Array | 可以选择每页展示多少条数据,一般情况可以配置为`[10,20,50,100]`; | | onChange | Function | 在触发翻页,修改每页多少条数据项等操作时执行该回调方法 |