以编程方式使 dojo 数据网格单元跨越多列答案

【问题标题】：Programmatically make a dojo datagrid cell span multiple columns以编程方式使 dojo 数据网格单元跨越多列
【发布时间】：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 的文档。

【问题讨论】：

标签： javascript html datagrid dojo html-table

【解决方案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。所以我用一个版本更新了代码，如果这是你需要的，请考虑接受我的回答。