# 表格组件
mapgis-3d-table
# 属性
# dataSource
- 类型:
Array | Object
- 侦听属性
- 描述: 表格的数据源,支持如下格式:
一:[Feature]: Feature 数组格式
使用此格式时不建议自己拼装, 而是直接调动 Feature 组件的 fromQueryResult 或 fromGeoJSON 方法返回数据, 建议如此使用:
将 Zondy.Service.QueryDocFeature.query 方法查询到的 result 转为[Feature]
let featureSet = Feature.fromQueryResult(result);
将 GEOJSON 格式的 JSON 转为[Feature]
let featureSet = Feature.fromGeoJSON(GEOJSON);
格式:
> [{geometry:"",
geometryType:"",
attributes:"",
style:"",
FID:""
},
Feature2,
Feature3
]
二:Zondy: 使用 Zondy 的 API 做查询返回的格式
{
AttStruct:{...},
SFEleArray:{...},
TotalCount:""
} - 参考:
[Feature]
in Feature
Zondy
in Zondy (opens new window)
# columns
- 类型:
Array
- 默认值: []
- 侦听属性
- 描述: 表格的字段集合,格式如下:
[ { dataIndex: 'name', key: 'name', slots: { title: 'customTitle' }, scopedSlots: { customRender: 'name' }, }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', } } ]
- 参考:
AntDesign
in AntDesign Vue table (opens new window)
# editable
- 类型:
Boolean
- 默认值:
true
- 侦听属性 ed
- 描述: 是否启用表格编辑。
# pagination
- 类型:
Object
- 侦听属性 ed
- 描述: 表格分页信息。
{
pageSize: 每页条数,
total: 所有记录数,
}
# 事件
# @edited
- 描述: 表格的编辑完成事件
- 返回值
{ dataSource }
dataSource
表格的所有数据
# @deleted
- 描述: 删除一条数据事件
- 返回值
{ record }
record
被删除的一条数据
# @click
- 描述: 单击单元格事件
- 返回值
{ record,columnKey }
record
被点击的一行数据
columnKey
被点击的单元格所在的列名
# @doubleClick
或 @doubleclick
- 描述: 双击单元格事件
- 返回值
{ rowIndex,columnKey,value,record }
rowIndex
行号,从 0 开始
columnKey
列名
value
单元格数据
record
一行的数据
# @selected
- 描述: 多选框中,选择一行事件
- 返回值
{ record,selectData,selected }
record
被选择的一行数据
selectData
已选的所有数据
selected
是否选中该行
# @selectAll
或 @selectall
- 描述: 多选框中,其中一页中的所有数据事件
- 返回值
{ selectData,selected }
selectData
已选的所有数据
selected
是否全选
# @pageChanged
或 @pagechanged
- 描述: 分页点击事件
- 返回值
{ pagination,sorter }
pagination
分页信息
sorter
排序信息
# @sorted
- 描述: 排序事件
- 返回值
{ sorter,pagination }
sorter
排序信息
pagination
分页信息
# @fullScreen
或 @fullscreen
- 描述: 全屏事件
- 返回值
{ pagination,sorter }
pagination
分页信息,其中的 pageSize 为铺满全屏的数据条数
sorter
排序信息
# @originScreen
或 @originscreen
- 描述: 还原全屏事件
- 返回值
{ pagination,sorter }
pagination
分页信息
sorter
排序信息
# 示例
<template>
<mapgis-web-scene style="height: 800px">
<mapgis-3d-igs-m3d :url="url"> </mapgis-3d-igs-m3d>
<mapgis-3d-table
:dataSource="dataSource"
:pagination="pagination"
@pageChanged="pageChanged"
@selectAll="selectAll"
@fullScreen="fullScreen"
@originScreen="originScreen"
@edited="edited"
@click="click"
@deleted="deleted"
@sorted="sorted"
@selected="selected"
></mapgis-3d-table>
</mapgis-web-scene>
</template>
<script>
import { Mapgis3dTable, Mapgis3dIgsM3d } from "@mapgis/webclient-vue-cesium";
export default {
components: {
Mapgis3dTable,
Mapgis3dIgsM3d
},
data() {
return {
url: "http://develop.smaryun.com:6163/igs/rest/g3d/ModelM3D",
dataSource: undefined,
pagination: {
total: 0,
pageSize: 10
}
};
},
mounted() {
this.getData();
},
methods: {
getData() {
let vm = this;
let inter = setInterval(function() {
if (Zondy.Catalog) {
clearInterval(inter);
vm.query("0", 10);
}
}, 20);
},
query(page, pageCount, orderField, isAsc) {
let vm = this;
//初始化参数对象
let queryParam = new Zondy.Catalog.G3DMapDoc();
//查询图层的URL路径
queryParam.gdbp =
"gdbp://MapGisLocal/示例数据/ds/三维示例/sfcls/景观_模型";
//设置查询结果结构
queryParam.structs = {
IncludeAttribute: true,
IncludeGeometry: false,
IncludeWebGraphic: false
};
//属性查询
queryParam.where = "";
//分页信息
queryParam.page = page;
queryParam.pageCount = pageCount;
//服务器的ip
queryParam.ip = "develop.smaryun.com";
queryParam.port = "6163";
//排序设置
queryParam.orderField = orderField ? orderField : "";
queryParam.isAsc = isAsc ? isAsc : false;
//查询服务
queryParam.GetFeature(
function(result) {
console.log("result", result);
vm.dataSource = result;
vm.pagination.total = result.TotalCount;
},
function(e) {
console.log("e", e);
}
);
},
pageChanged(pagination, sorter) {
//分页事件
console.log("pageChanged", pagination);
this.query(
pagination.current - 1,
pagination.pageSize,
sorter.orderField,
sorter.isAsc
);
},
selectAll(selectData) {
//全选事件
console.log("selectAll", selectData);
},
selected(selectData, allDate) {
//选择单个数据事件
console.log("selected", selectData);
console.log("allDate", allDate);
},
fullScreen(pagination, sorter) {
//全屏事件
},
originScreen(pagination, sorter) {
//还原屏幕事件
this.pagination.pageSize = pagination.pageSize;
this.query(
pagination.current - 1,
pagination.pageSize,
sorter.orderField,
sorter.isAsc
);
},
edited(result) {
//编辑完成事件
console.log("edited", result);
},
click(result, key) {
//单击事件
console.log("click", result, key);
},
deleted(result) {
//删除事件
console.log("deleted", result);
},
sorted(sorter, pagination) {
//排序事件
this.query(
pagination.current - 1,
pagination.pageSize,
sorter.orderField,
sorter.isAsc
);
}
}
};
</script>
<style lang="css">
.main {
height: 600px;
width: 100%;
}
</style>