Question

我想创建一个看起来像这样的网格：

----------------------------------
| 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的文档。

Answer 1

任何表都可以通过colspan属性设置。

所以...例子是巨人：

＆＃13;

 dojo.require("dijit.dijit");
 dojo.require("dojox.layout.TableContainer");
 dojo.require("dijit.form.TextBox");
 dojo.require("dijit.form.CheckBox");
 dojo.require("dijit.form.Textarea");

＆＃13;

.labelsAndValues-labelCell {
  background-color: lightgrey;
  padding-left: 5px;
}
.labelsAndValues-valueCell {
  padding-left: 20px;
  background-color: lightblue;
}

＆＃13;

<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>

＆＃13;

更新：它也可以用dojo编程生成的内容与观察一起应用，该属性应该写成colSpan：

＆＃13;

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;

＆＃13;

<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>

＆＃13;

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

1 个答案: