我找到了一个JS小提琴,用于使用jointJS创建表格,但我无法为其添加文字。
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 600,
height: 600,
gridSize: 20,
model: graph,
linkPinning: false,
defaultLink: new joint.dia.Link({
z: 2
}),
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
var connectedView = end === 'target' ? cellViewT : cellViewS;
if (connectedView instanceof joint.dia.LinkView) return false;
if (cellViewT === cellViewS || magnetS === magnetT) return false;
return true;
}
});
joint.shapes.basic.Table = joint.shapes.basic.Generic.extend({
markup: [
'<g class="rotatable"><g class="scalable"><rect class="body"/></g>',
'<g class="ports">',
'<rect class="port11" port="11"/><rect class="port12" port="12"/><rect class="port13" port="13"/>',
'<rect class="port21" port="21"/><rect class="port22" port="22"/><rect class="port23" port="23"/>',
'<rect class="port31" port="31"/><rect class="port32" port="32"/><rect class="port33" port="33"/>',
'</g>',
'</g>'
].join(''),
defaults: joint.util.deepSupplement({
type: 'basic.Table',
z: 2,
attrs: {
'.body': {
width: 100,
height: 100,
stroke: 'blue',
fill: 'lightblue'
},
'.ports > rect': {
'ref-width': '33%',
'ref-height': '33%',
stroke: 'lightgray'
},
'.port11': {
'ref-x': 0,
'ref-y': 0,
magnet: 'passive'
},
'.port12': {
'ref-x': 0.33,
'ref-y': 0,
magnet: 'passive'
},
'.port13': {
'ref-x': 0.66,
'ref-y': 0,
magnet: 'passive'
},
'.port21': {
'ref-x': 0,
'ref-y': 0.33,
magnet: 'passive'
},
'.port22': {
'ref-x': 0.33,
'ref-y': 0.33,
magnet: 'passive'
},
'.port23': {
'ref-x': 0.66,
'ref-y': 0.33,
magnet: 'passive'
},
'.port31': {
'ref-x': 0,
'ref-y': 0.66,
magnet: 'passive'
},
'.port32': {
'ref-x': 0.33,
'ref-y': 0.66,
magnet: 'passive'
},
'.port33': {
'ref-x': 0.66,
'ref-y': 0.66,
magnet: 'passive'
}
}
}, joint.shapes.devs.Model.prototype.defaults)
});
var model = new joint.shapes.basic.Table({
size: {
width: 100,
height: 100
}
});
graph.addCell([
model.clone().position(100, 100).attr('.port31/magnet', true).attr('.port23/magnet', true),
model.clone().position(300, 200).attr('.port33/magnet', true).attr('.port11/magnet', true)
]);
jsfiddle http://jsfiddle.net/kumilingus/h6125gu7/
的链接我想实现类似下面的内容,其中可能有多个表元素,每个表元素都有不同的文本。
var model = new joint.shapes.basic.Table({
size: {
width: 100,
height: 100
}
});
graph.addCell([
model.clone().position(100, 100).attr('.port31/text', 'some text1').attr('.port23/text', 'some text2')
]);
还有其他方法我可以在jointJS中创建一个表格 显示一些统计数据?
答案 0 :(得分:1)
实际上还有另一种方法是如何使用jointjs创建表。
您可以尝试此处定义的joint.shapes.basic.Table
: