GoJS滚动表格的使用
2024-04-29 23:58:34
1、GOJS的浏览器兼容问题
Chrome 3+ Firefox2+ Safari3.2+ Opera9+ IE5.5+
2、 版权
gojs是一款基于canvas的图形库，是由Northwoods公司开发的商用javascript插件，可以基于项目的不同需求实现具有交互性的各类图表，比如流程图，树图，关系图，力导图等等。
（1）解决画布水印问题
参考链接：（https://blog.csdn.net/affordlove/article/details/115549765）
//搜索 String.fromCharCode(a.charCodeAt(g)^b[(b[c]+b[d])%256])，这段代码后面会有个return f//在return f 前添加如下代码，则成功去除水印。
if(f.indexOf('GoJS 2.1 evaluation')>-1 || f.indexOf('(c) 1998-2021 Northwoods Software')>-1|| f.indexOf('Not for distribution or production use')>-1|| f.indexOf('gojs.net')>-1){return '';}else{return f}3、滚动表格的样式修改
最终效果图如下：
代码如下：
可以实现动态显示表格的内容，通过后端接口去获得值，将值分别赋值给两个表格的item,数据格式可以参考下例中的itm1和item2；
<body style="background-color: #deecfc"><div id="sample"><divstyle="width: 50%;height: 520px;background-color: #fff;margin: 0 auto;border: 1px solid #fff;"><!--先准备一个容器--><divid="myDiagramDiv"style="width: 98%;height: 500px;background-color: #deecfc;margin: 10px auto;"></div></div><div><div style="width: 50%; height: 520px; margin: 0 auto"><button id="SaveButton" onclick="save()">Save</button><button onclick="load()">Load</button></div></div></div><!-- * * * * * * * * * * * * * --><!--引入GoJS插件包里的release/go.js--><script src="./go.js"></script><!--引入滚动表格的JS--><script src="./ScrollingTable.js"></script><script id="code">//测试：定义数组item1,将变量item1赋值给表格1的itemsvar item1 = [//设置表头，不给id值就可以实现不能拉线的效果{name: "参数名称",value: "模式",type: "数据类型",color: "#bcccdf",figure: "Ellipse",},{id: "123",name: "参数一参数名称参数名称参数名称参数名称参数名称参数名称",value: 1,type: "File",color: "#0561ca",figure: "Ellipse",},{id: "456",name: "参数二",value: 2,type: "File",color: "#0561ca",figure: "Ellipse",},{id: "789",name: "参数三",value: 3,type: "Date",color: "#0561ca",figure: "Ellipse",},{id: "147",name: "参数四",value: 4,type: "File",color: "#0561ca",figure: "Ellipse",},{id: "258",name: "参数五",value: 5,type: "Date",color: "#0561ca",figure: "Ellipse",},];var item2 = [{name: "参数名称",value: "模式",type: "数据类型",color: "#bcccdf",figure: "Ellipse",},{id: "asd",name: "参数Aa",value: 1,type: "Date",color: "#0561ca",figure: "Ellipse",},{id: "qwe",name: "参数Bb",value: 2,type: "File",color: "#0561ca",figure: "Ellipse",},{id: "zxc",name: "参数Cc",value: 3,type: "Number",color: "#0561ca",figure: "Ellipse",},{id: "rty",name: "参数Dd",value: 4,type: "File",color: "#0561ca",figure: "Ellipse",},{id: "dfg",name: "参数Ee",value: 5,type: "Number",color: "#0561ca",figure: "Ellipse",},];function init() {// init for these samplesvar $ = go.GraphObject.make; //构建GoJS对象myDiagram = $(go.Diagram, "myDiagramDiv", {// 允许使用撤回和redo"undoManager.isEnabled": true,//不允许使用复制allowCopy: false,//不允许移动对象allowMove: false,allowZoom: false,//不允许水平滚动allowHorizontalScroll: true,//不允许垂直滚动allowVerticalScroll: false,//不允许放大缩小，需要按住ctrl键allowZoom: false,PartResized: function (e) {var node = e.subject;var scroller = node.findObject("SCROLLER");if (scroller !== null)scroller._updateScrollBar(scroller.findObject("TABLE"));},});myDiagram.nodeTemplate = $(go.Node,"Vertical",{selectionObjectName: "SCROLLER",resizable: true,resizeObjectName: "SCROLLER",portSpreading: go.Node.SpreadingNone,},new go.Binding("location").makeTwoWay(),$(go.Panel,"Auto",$(go.Shape, { fill: "white" }),//节点形状和背景颜色的设置$("ScrollingTable",{name: "SCROLLER",desiredSize: new go.Size(NaN, 80), // fixed widthstretch: go.GraphObject.Fill, // but stretches verticallydefaultColumnSeparatorStroke: "#e6e6e6",defaultColumnSeparatorStrokeWidth: 0.5,},new go.Binding("TABLE.itemArray", "items"),new go.Binding("TABLE.column", "left", function (left) {return left ? 2 : 0;}),new go.Binding("desiredSize", "size").makeTwoWay(),{"TABLE.itemTemplate": $(go.Panel,"TableRow",{defaultStretch: go.GraphObject.Horizontal,fromSpot: go.Spot.LeftRightSides,toSpot: go.Spot.LeftRightSides,fromLinkable: true,toLinkable: true,},//设置动态连线通过什么连接，本示例中是通过id值连线；new go.Binding("portId", "id"),//设置第一列前面的小蓝点$(go.Shape,{width: 5,height: 5,column: 0,strokeWidth: 0,margin: 8,alignment: go.Spot.Left,// but disallow drawing links from or to this shape:fromLinkable: false,toLinkable: false,},new go.Binding("figure", "figure"),new go.Binding("fill", "color")),$(go.TextBlock, //设置文本{ column: 0 },{ stroke: "#2853b6", margin: new go.Margin(6, 0, 6, 15) },//第一列：此处的text属性和模型数据的name属性之间存在数据绑定new go.Binding("text", "name") ),$(go.TextBlock,{ column: 1 },{ stroke: "#2853b6", margin: new go.Margin(6, 0, 6, 15) },//第二列：此处的text属性和模型数据的value属性之间存在数据绑定new go.Binding("text", "value") ),$(go.TextBlock,{ column: 2 },{ stroke: "#2853b6", margin: new go.Margin(6, 0, 6, 15) },//第三列：此处的text属性和模型数据的type属性之间存在数据绑定new go.Binding("text", "type") )),//设置表格的默认边框颜色（stroke）和边框宽度（strokeWidth）"TABLE.defaultColumnSeparatorStroke": "#e6e6e6","TABLE.defaultColumnSeparatorStrokeWidth": 0.5,"TABLE.defaultRowSeparatorStroke": "#e6e6e6","TABLE.defaultRowSeparatorStrokeWidth": 0.5,"TABLE.defaultSeparatorPadding": new go.Margin(3, 3, 3, 3),})));//链接线的宽度颜色设置myDiagram.linkTemplate = $(go.Link,$(go.Shape, { strokeWidth: 1.5, stroke: "#33A7EB" }), // 线的宽度和笔画的颜色// 箭头颜色宽度设置$(go.Shape, {toArrow: "Standard",fill: "#33A7EB",stroke: "#33A7EB",}));myDiagram.model = $(go.GraphLinksModel, {linkFromPortIdProperty: "fromPort",linkToPortIdProperty: "toPort",nodeDataArray: [{key: "表格1",left: true,location: new go.Point(-300, 0),size: new go.Size(285, 300),items: item1,},{key: "表格2",location: new go.Point(150, 0),size: new go.Size(285, 300),items: item2,},],//动态连线的实现就是通过linkDataArray赋值的linkDataArray: [{from: "表格1",fromPort: "456",to: "表格2",toPort: "qwe",},{from: "表格1",fromPort: "123",to: "表格2",toPort: "asd",},{from: "表格1",fromPort: "789",to: "表格2",toPort: "asd",},],});}//添加监听线生成事件myDiagram.addDiagramListener("LinkDrawn", function (e) {console.log(e.subject.data.fromPort); //输出左边连线时的id值console.log(e.subject.data.toPort); //输出右边连线时的id值});//保存事件，保存当前画布上的修改，将值保存在window.data里function save() {window.data;window.data = myDiagram.model.toJson(); //获取当前画布的jsonmyDiagram.isModified = true;console.log(window.data);alert("保存成功");}//加载事件，将window.data值加载到当前画布上function load() {//加载json刷新画布if (window.data) {myDiagram.model = go.Model.fromJson(JSON.parse(window.data));} else {alert("还没有保存数据哦！");}}// 在dom加载完成之后调用init事件window.addEventListener("DOMContentLoaded", init);</script></body>ScrollingTable.js代码修改如下：
return $(go.Panel,"Table",{_updateScrollBar: updateScrollBar,},// this actually holds the item elements$(go.Panel,"Table",{name: tablename,column: 0,stretch: go.GraphObject.Fill,background: "#fff",rowSizing: go.RowColumnDefinition.Default,defaultAlignment: go.Spot.Top,},//设置第一行（表头）样式$(go.RowColumnDefinition, {row: 0,separatorStrokeWidth: 1.5,separatorStroke: "#aab3c1",background: "#bcccdf",separatorPadding: new go.Margin(8, 3, 5, 3),}),//设置第er行样式$(go.RowColumnDefinition, {row: 1,separatorStrokeWidth: 1.5,separatorStroke: "#f5f5f5",background: "#f5f5f5",separatorPadding: new go.Margin(8, 3, 5, 3),}),//设置第一列样式$(go.RowColumnDefinition, {column: 0,width: "100",separatorStrokeWidth: 1.5,}),//设置第二列样式$(go.RowColumnDefinition, {column: 1,width: "50",separatorStrokeWidth: 1.5,}),//设置第三列样式$(go.RowColumnDefinition, {column: 2,width: "100",separatorStrokeWidth: 1.5,})),GoJS滚动表格的使用相关推荐
- 制作滚动表格，循环列表表格内容
2022年07月25日 制作滚动表格 三个学习点:Html,CSS3,java script Html: HTML的全称为超文本标记语言,是一种标记语言.它包括一系列标签． 通过这些标签可以将网络上的 ...
- 5.让表格的标题在滚动表格时一动不动
一.冻结首行首列 处理数据量较大的表格时,向下拖动滚动条,表格的标题栏就不见了,用户在查看数据时,需要来回拖动滚动条才能看到标题,那么是否可以将表格设置成无论怎样滚动表格,标题都始终显示呢? 如果表格 ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"><table><thead><tr><th>定宽a</th>< ...
- [vue] 无缝滚动 vue-seamless-scroll 滚动表格
npm install vue-seamless-scroll --save main.js import scroll from 'vue-seamless-scroll' Vue.use(scro ...
- html自动滚动表格,Excel自动滚动按钮设置
Excel Excel 如何实现表自动循环滚屏显示 同时按Alt和F11进入宏界面,插入,模块,粘贴如下代码: Dim iFlag As Boolean Dim i As Integer Sub Mo ...
- VUE使用vue-seamless-scroll自动滚动表格数据，对表格数据排序无效的解决办法
使用vue-seamless-scroll循环表格数据,建议使用v-for,ul li 的形式便于操作属性,elemengt ui table可能不好处理兼容性问题及属性设置,尤其是一个页面添加多个表 ...
- Vue · Table：手写横向竖向滚动表格，分页、条数设置
效果: <template><div><div class="pages-tables" :style="{ height: screeHe ...
- angular ts 表格_angular表格内容滚动实现
setScroll() { this.sTab = this.table.nativeElement; // 要滚动的表 this.tbody = this.sTab.getElementsByTag ...
- 固定表格第一行(表头固定)，其他行可以上下滚动
本文来源:http://bbs.okajax.com/thread-2482-1-1.html 固定表格第一行,其他行可以上下滚动 固定 表格第一行,其他行可以上下滚动 表格.在 开发中非常有用.比如 ...
最新文章
- Linux修改文件权限为777
- 从搭建脚手架到在npm上发布react组件
- Validform 学习笔记---基础知识整理
- docker网络原理
- MySql 触发器同步备份数据表记录
- matlab曲线拟合法,MATLAB曲线拟合
- 嵩天-Python语言程序设计程序题--第八周：程序设计方法学
- 一个SAP成都研究院开发工程师 2020 年的所有文章列表
- 细学PHP 09 MySql
- android touch事件坐标原点,Android – 捏缩放ontouch事件坐标
- mysql gis index 索引原理_从原理到优化，深入浅出数据库索引
- 鸿蒙电视应用市场,任正非：鸿蒙系统已上线，未来将被应用到手机、平板、电视系列产品上...
- bosboot -a的作用
- 检测到JSON.NET错误类型的自引用循环
- Activiz 使用笔记-4 数据源(2)
- 一个对象对应多个对象如何在一个界面里实现新增_谈MDM主数据管理系统设计和实现关键点...
- python动态生成数据库表_ironpython – 如何通过python在Spotfire中动态创建数据表
- 河南计算机职称不考了,河南省评定中级工程师职称是否还要求计算机应用能..._职称英语考试_帮考网...
- 0xc0000007b
- register int 与 int 的区别