【website】【mapbox-vue】【杨琨】【优化table组件示例】

Author: killer1992

website/public/static/demo/vue-mapboxgl/example/vue-control/table.htm

@@ -46,6 +46,10 @@
                         v-bind:data-source="dataSource"
                         v-bind:pagination="pagination"
                         v-bind:columns="columns"
+                        v-on:pageChanged="pageChanged"
+                        v-on:sorted="sorted"
+                        v-on:fullScreen="fullScreen"
+                        v-on:originScreen="originScreen"
                         v-show="show"
                 >
                 </mapgis-base-table>
@@ -91,26 +95,68 @@
                 },
                 methods: {
                     serviceLoaded(service){
+                        //初始化服务事件
                         this.service = service;
                         this.getData();
                     },
                     getData(){
-                        this.query(0,10,undefined,undefined,true);
+                        this.query({
+                            //因为query方法中会减1，因此这里设为1，表示请求第0分页
+                            current: 1,
+                            pageSize: 10
+                        },undefined,undefined);
                     },
-                    query(pageIndex,pagination,orderBy,isAsc,initial){
+                    pageChanged(pagination,sorter){
+                        //分页事件
+                        this.query(pagination,sorter);
+                    },
+                    sorted(sorter,pagination){
+                        //排序事件
+                        this.query(pagination,sorter);
+                    },
+                    fullScreen(pageInfo,sorter){
+                        //全屏事件
+                        this.query(pageInfo,sorter,pageInfo.pageSize);
+                    },
+                    originScreen(pageInfo,sorter){
+                        //收起全屏事件
+                        this.query(pageInfo,sorter,pageInfo.pageSize);
+                    },
+                    query(pageInfo,sorter,pageSize){
+                        //设置排序规则
+                        var isAsc = false;
+                        if(!sorter){
+                            sorter = {};
+                            sorter.columnKey = "";
+                        } else if(sorter.order === "ascend"){
+                            isAsc = true;
+                        }else if(sorter.order === "") {
+                            sorter.columnKey = "";
+                        }
                         var vm = this;
+                        //设置查询参数
                         var sql = this.service.$_getSQLParameter({
+                            //查询图层id为1的图层
                             layers: "1",
-                            where: '',
-                            pageIndex: pageIndex,
-                            pagination: pagination,
-                            orderBy: orderBy,
-                            isAsc: isAsc
+                            //设置分页信息
+                            pageIndex: pageInfo.current - 1,
+                            pagination: pageInfo.pageSize,
+                            //设置排序字段
+                            orderBy: sorter.columnKey,
+                            //设置是升序(true)还是降序(false)
+                            isAsc: isAsc,
+                            //设置是否返回几何信息，false不返回
+                            IncludeGeometry: false
                         })
-                        //zondy格式
+                        //查询数据
                         vm.service.$_queryBySQL(sql,function (result) {
                             vm.dataSource = result;
+                            //设置分页信息中
                             vm.pagination.total = result.TotalCount;
+                            if(pageSize){
+                                vm.pagination.pageSize = pageSize;
+                            }
+                            //请求完成后显示表格
                             vm.show = true;
                         },function () {})
                     }