2014-01-15 30 views
1

我XUL我應該捕獲什麼事件來捕獲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> 

我添加行樹與複選框dynamially的該位;他們表現得很好。但是,我認爲什麼「上......」事件讓我注意到複選框被切換? Onselect不會這樣做。

回答

1

我原本錯誤地理解你的問題....

無法事件處理程序添加到樹的行/的cols /細胞,只對<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 /細胞被標記爲editable或可能不行!