行列互轉 D:\ireport365\ireport365.war\js\enduser\designer\vs-component-widget-grid.js 本文件 1 在設置配置面板 寫以下代碼 ~~~ p.groups.push({ name: "", title: { text: "行列置換" }, elements: [{ title: "開啟-關閉", type: "switch", bind: "col_row", on: vsLang.on, off: vsLang.off }] }); ~~~ 監聽col-row ~~~ t.$watch("component.config.col_row", function (w, u) { // console.log(w) // console.log(u) var p = o.config.chartConfig; if (w != null && w) { // console.log(p.data) // 加旋轉的css $('.test_table').attr('class','test_table vertical').find('th, td').wrapInner('<div>'); p.col_row = 'test_table vertical' console.log(p.col_row) //$('table').addClass('vertical');//數字會變垂直，不能用 // 刷新下組件 o.context.chart.setOption(p) }else{ // 去掉css $('.test_table').attr('class','test_table'); p.col_row = 'test_table' // 刷新下組件 console.log(p.col_row) o.context.chart.setOption(p) } }); ~~~ 在D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js 和D:\ireport365\ireport365.war\js\enduser\designer\vs-component-widget-grid.js 這兩個文件里分別添加 在這里添加html 前后都要加 把原來的htm 包裹著 末尾別忘記 判斷里都要加  `o.push("<div class='test_table' style='height:100%;width:100%;overflow:hidden;'>");` 末尾的 `o.push("</div>")` 添加樣式 風別在designer.css 和 design.css 里添加 ~~~ /* 轉置 */ .vertical{ -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; } .vertical th, .vertical td{ /* width: 100px; */ /* height: 14px; */ } .vertical td div{ /* width: 100px; */ -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; text-align:center; margin-top: 20px } .vertical tr div{ /* width: 100px; */ -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; text-align:center; margin-top: 20px } .vertical #header{ width:20% !important; height: 100%!important; } .vertical #body{ width:80% !important; height: 100%!important; } .vertical .gbody{ height: 100%!important; } /* end */ ~~~