The maptalks.table.js plug-in is mainly used to create a table on the map container, which contains two types, respectively, custom tables and dynamic tables, The former manual editing data, the latter data is bound to a layer.
- Add interactive table for maps.
- Output table screenshot through "map.toDataURL()".
- Support drag and mouse event listener.
<script src="dist/maptalks.table.min.js">
or
npm install maptalks-table
var myTalbe = new maptalks.Table({
'title': 'title',
'columns': [
{header:'Name', dataIndex: 'name', type: 'string'},
{header:'Birth', dataIndex: 'birth', type: 'data'},
{header:'Age', dataIndex: 'age', type: 'number'},
{header:'Marry', dataIndex: 'marry', type: 'boolean', trueText:'Yes', falseText: 'No'}
],
'data': [
{name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'},
{name:'Peter', birth:'1985-5-1', age: 30, marry: 'true'},
{name:'Mary', birth:'2000-6-1', age: 15, marry: 'false'}
],
'headerSymbol' :{
'lineColor': '#ffffff',
'fill': '#4e98dd',
'textFaceName': 'monospace',
'textSize': 12,
'textFill': '#ebf2f9',
'textWrapWidth': 100
},
'symbol': {
'lineColor': '#ffffff',
'fill': '#4e98dd',
'textFaceName': 'monospace',
'textSize': 12,
'textFill': '#ebf2f9',
'textWrapWidth': 100
},
'position': {
'x': 121.489935,
'y': 31.24432
},
'width': 300,
'height': 300,
'draggable': true,
'editable': true,
'header': true,
'order': true,
'startNum' : 1,
'dynamic': false,
'layerId' : null
});
Create table.
myTable.toJSON();
Convert table object to JSON string.
myTable.initByJson(jsonStr);
Initialize table from JSON string.
myTable.addTo(layer);
Add table to maptalks's layer.
myTable.hide;
Hide table.
myTable.show();
Display table.
myTable.remove();
Remove table from layer.
myTable.setCoordinates({
'x': 121.489935,
'y': 31.24432
});
Setting the position where table display.
myTable.setStartNum(6);
Setting table start number。
myTable.animate(style, options, callback);
Setting table animate show or hide effect.
myTable.getMap();
Get this map which table add to.
myTable.getLayer();
Get this layer which table add to.
myTable.getCenter();
Get table coordinate.
myTable.setTableStyle('markerFill', '#00ff00', true);
Change table style.
myTable.addRow(1, {name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'}, true);
Add new row.
myTable.addRow(1, {name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'});
Update row.
myTable.addRow(1);
Remove row.
myTable.addRow(1, 'down');
Move row up or down.
myTable.addCol(1, {header:'Name', dataIndex: 'name', type: 'string'}, true);
Add new column.
myTable.removeCol(1);
Remove column.
myTable.moveCol(1, 'left');
Move column left or right.
mouseover mouseout mousedown click dblclick contextmenu hide remove dragstart dragend moving dragging symbolchange edittextstart edittextend orderchanged
myTable.on('click', function(){alert('Your click table')});
Monitor table events for event handling.