Question

我有一点XUL

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-report-customizer/skin/options.css"?>
<!DOCTYPE window SYSTEM "chrome://zotero-report-customizer/locale/zotero-report-customizer.dtd">
<prefwindow id="zotero-report-customizer-perf" title="&zotero-report-customizer.name;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="initializePrefs();">
  <stringbundleset id="stringbundleset">
    <stringbundle id="zotero-report-customizer-options" src="chrome://zotero-report-customizer/locale/options.properties" />
    <stringbundle id="zotero-options" src="chrome://zotero/locale/zotero.properties" />
  </stringbundleset>
  <prefpane label="&zotero-report-customizer.remove;" id="zotero-report-customizer-perfpane">
    <preferences id="preferences"/>
    <groupbox>
      <caption label="&zotero-report-customizer.remove;" />
      <tree flex="1" id="treeCollection" seltype="single" hidecolumnpicker="true" height="400" editable="true" onselect="togglePref(this);">
        <treecols>
          <treecol id="show" primary="true" type="checkbox" label="Show" editable="true" width="40"/>
          <treecol id="field" label="Field" editable="false" flex="1"/>
        </treecols>
        <treechildren id="itemTypes"/>
      </tree>
    </groupbox>
  </prefpane>
  <script src="chrome://zotero/content/include.js" />
  <script src="chrome://zotero-report-customizer/content/include.js" />
  <script src="options.js" />
</prefwindow>

我动态添加带有复选框的树行;他们表现得很好。但是什么“on ....”事件我注意到要注意切换复选框？ Onselect没有这样做。

Answer 1

我最初误解了你的问题......

您无法将事件处理程序添加到树的行/列/单元格中，只能添加到<tree>本身。例如：您可以在树上检测到“点击”事件 - 然后您需要弄清楚点击了什么，最后，您应该对此做些什么。

MDN snippet，用于从鼠标点击事件中获取<treecell>：

XUL：

<tree id="my-tree" onclick="onTreeClicked(event)">

JavaScript的：

function onTreeClicked(event){
  var tree = document.getElementById("my-tree");
  var tbo = tree.treeBoxObject;

  // get the row, col and child element at the point
  var row = { }, col = { }, child = { };
  tbo.getCellAt(event.clientX, event.clientY, row, col, child);

  var cellText = tree.view.getCellText(row.value, col.value);
  alert(cellText);
}

此时，您应该检查cellText（在treeCell模式下）是否已选中，而不是警告checkbox，而是采取相应行动。

来自MDN上<tree> documentation的释义：

var cellChecked = tree.view.getCellValue(row.value, col.value) == 'true';

编辑：确保cols / cells标记为editable或者这可能不起作用！

我应该捕获什么事件以捕获XUL树中的复选框更改？

1 个答案: