Skip to content

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.

master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

maptalks table.

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.

Feature

  1. Add interactive table for maps.
  2. Output table screenshot through "map.toDataURL()".
  3. Support drag and mouse event listener.

Installing

<script src="dist/maptalks.table.min.js">

or

npm install maptalks-table

Demo

Maptalks Table Demo

Maptalks Table Demo

Table Class

API

new maptalks.Table(options);

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.

toJSON()

myTable.toJSON();

Convert table object to JSON string.

initByJson(jsonStr)

myTable.initByJson(jsonStr);

Initialize table from JSON string.

addTo(layer)

myTable.addTo(layer);

Add table to maptalks's layer.

hide()

myTable.hide;

Hide table.

show()

myTable.show();

Display table.

remove()

myTable.remove();

Remove table from layer.

setCoordinates(coordiante)

myTable.setCoordinates({
    'x': 121.489935,
    'y': 31.24432
});

Setting the position where table display.

setStartNum(num)

myTable.setStartNum(6);

Setting table start number。

animate(style, options, callback)

myTable.animate(style, options, callback);

Setting table animate show or hide effect.

getMap()

myTable.getMap();

Get this map which table add to.

getLayer()

myTable.getLayer();

Get this layer which table add to.

getCenter()

myTable.getCenter();

Get table coordinate.

setTableStyle(attr, value, isGlobal)

myTable.setTableStyle('markerFill', '#00ff00', true);

Change table style.

addRow(rowNum, data, below)

myTable.addRow(1, {name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'}, true);

Add new row.

updateRow(rowNum, data)

myTable.addRow(1, {name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'});

Update row.

removeRow(rowNum)

myTable.addRow(1);

Remove row.

moveRow(rowNum, direction)

myTable.addRow(1, 'down');

Move row up or down.

addCol(colNum, data, right)

myTable.addCol(1, {header:'Name', dataIndex: 'name', type: 'string'}, true);

Add new column.

removeCol(colNum)

myTable.removeCol(1);

Remove column.

moveCol(colnum, direction)

myTable.moveCol(1, 'left');

Move column left or right.

Events

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.

About

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.

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.