以编程方式使 dojo 数据网格单元跨越多列
Posted
技术标签:
【中文标题】以编程方式使 dojo 数据网格单元跨越多列【英文标题】：Programmatically make a dojo datagrid cell span multiple columns 【发布时间】：2015-03-10 19:06:34 【问题描述】：我想创建一个看起来像这样的网格：
----------------------------------
| Header 1 | Header 2 | Header 3 |
----------------------------------
| Cell 1.1 | Cell 1.2 | Cell 1.3 |
----------------------------------
| Cell 2.1 | Cell 2.3 |
----------------------------------
| Cell 3.1 | Cell 3.2 | Cell 3.3 |
----------------------------------
我想我可以这样做：
col1Formatter = function(data,row,cell)
if (row==2)
cell.markup = "<td span=2>Cell2.1</td>";
;
col2Formatter = function(data,row,cell)
if (row==2)
cell.markup = "";
;
但我找不到任何关于如何从格式化程序中操作单元格的 DOM 的文档。
【问题讨论】：
【参考方案1】：与任何表格一样，您可以通过colspan 属性对其进行设置。
所以...例子是巨人：
dojo.require("dijit.dijit");
dojo.require("dojox.layout.TableContainer");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.Textarea");.labelsAndValues-labelCell
background-color: lightgrey;
padding-left: 5px;
.labelsAndValues-valueCell
padding-left: 20px;
background-color: lightblue;
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config="parseOnLoad:true, async:'legacyAsync'"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<script type='text/javascript' src="http://amd.egoworx.com/jsfiddle-dojo-require.js"></script>
<body class="claro">
<div data-dojo-type="dojox.layout.TableContainer" data-dojo-props="cols:6, customClass:'labelsAndValues'" id="tc1">
<div data-dojo-type="dijit.form.TextBox" title="First Name:" colspan="2" value="Tom"></div>
<div data-dojo-type="dijit.form.TextBox" title="Last Name:" colspan="2" value="Clarke"></div>
<div data-dojo-type="dijit.form.TextBox" title="Age:" colspan="2" value="35"></div>
<textarea data-dojo-type="dijit.form.Textarea" id="texteditor" style="width:100%;" colspan="4" title="Personal Details">Hi, I'm a hacker, I have no personal details to speak of, but I can write a widget in under a minute!</textarea>
<div data-dojo-type="dijit.form.CheckBox" colspan="2" title="Employed"></div>
<div data-dojo-type="dijit.form.CheckBox" colspan="2" title="Is Married"></div>
<div data-dojo-type="dijit.form.CheckBox" colspan="2" title="Has Children"></div>
<div data-dojo-type="dijit.form.CheckBox" title="Loves Dojo" colspan="2" checked="true"></div>
</div>更新：它也可以应用于带有观察的 dojo 编程生成的内容，属性应写为colSpan：
var tbl = document.getElementById("mytable");
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
row.style.backgroundColor = 'aliceblue';
var folioCell = row.insertCell(0);
var textnode = document.createTextNode("hello");
folioCell.appendChild(textnode);
folioCell.colSpan = 2;
var cell = document.getElementById("tomodify");
cell.colSpan = 2;<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config="parseOnLoad:true, async:'legacyAsync'"></script>
<table id="mytable" border="1">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td id="tomodify">1</td>
</tr>
</table>【讨论】：
谢谢，但我认为您错过了我以编程方式创建表的事实。如果你能帮我弄清楚如何访问 DOM，我可以很容易地设置 colspan。问题是我找不到要更改的元素。 对不起，我没注意到您是从 js 生成 html。所以我用一个版本更新了代码，如果这是你需要的，请考虑接受我的回答。以上是关于以编程方式使 dojo 数据网格单元跨越多列的主要内容，如果未能解决你的问题，请参考以下文章
dojo 增强网格过滤器 - 以编程方式设置列 A 大于某个数字