Получение данных из многоколоночного listbox

Bujhm666 · №1

Что то тишина здесь, но попробую спросить.
Вот пример заполнения listbox, взят из документации по XUL:

Код:

<listbox id="theList" rows="10" width="400">
  <listhead>
    <listheader label="1ct Gem" width="240"/>
    <listheader label="Price" width="150"/>
  </listhead>
  <listcols>
    <listcol/>
    <listcol flex="1"/>
  </listcols>
</listbox>

var theList = document.getElementById('theList ');
 gems = [  {gem: "Ruby", Price: "$3,500 - $4,600"},
           {gem: "Emerald", Price: "$700 - 4,250"},
           {gem: "Blue Sapphire", Price: "$3,400 - $4,500"},
           {gem: "Diamond", Price: "$5,600 - $16,000"}  ];
for (var i = 0; i < gems.length; i++)
    {
        var row = document.createElement('listitem');
        var cell = document.createElement('listcell');
        cell.setAttribute('label', gems[i].gem);
        row.appendChild(cell);

        cell = document.createElement('listcell');
        cell.setAttribute('label',  gems[i].Price );
        row.appendChild(cell);

        theList.appendChild(row);
    }

Теперь вопрос, как сделать наоборот - из листбокса получить данные исходного вида в переменную для последующего сохранения, то есть вернуть:

Выделить код

Код:

[  {gem: "Ruby", Price: "$3,500 - $4,600"},
           {gem: "Emerald", Price: "$700 - 4,250"},
           {gem: "Blue Sapphire", Price: "$3,400 - $4,500"},
           {gem: "Diamond", Price: "$5,600 - $16,000"}  ];

Отредактировано Bujhm666 (21-09-2012 09:34:02)

Infocatcher · №2

Какие-то проблемы с getElementsByTagName() и getAttribute()?

Bujhm666 · №3

Не было бы проблем, не спрашивал бы. Новичек я, пока в голове каша из документации.
Получается getAttribute() вернет: {gem: "Ruby", Price: "$3,500 - $4,600"}, я правильно понял?

Infocatcher · №4

Так вот сразу – не вернет.
https://developer.mozilla.org/en-US/doc … sByTagName
https://developer.mozilla.org/en-US/doc … tAttribute

Выделить код

Код:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Listbox example">

<listbox id="theList" rows="10" width="400">
  <listhead>
    <listheader label="1ct Gem" width="240"/>
    <listheader label="Price" width="150"/>
  </listhead>
  <listcols>
    <listcol/>
    <listcol flex="1"/>
  </listcols>
</listbox>
<script type="application/javascript">
<![CDATA[

var theList = document.getElementById('theList');
 gems = [  {gem: "Ruby", Price: "$3,500 - $4,600"},
           {gem: "Emerald", Price: "$700 - 4,250"},
           {gem: "Blue Sapphire", Price: "$3,400 - $4,500"},
           {gem: "Diamond", Price: "$5,600 - $16,000"}  ];
for (var i = 0; i < gems.length; i++)
    {
        var row = document.createElement('listitem');
        var cell = document.createElement('listcell');
        cell.setAttribute('label', gems[i].gem);
        row.appendChild(cell);

        cell = document.createElement('listcell');
        cell.setAttribute('label',  gems[i].Price );
        row.appendChild(cell);

        theList.appendChild(row);
    }

var data = Array.map(
    theList.getElementsByTagName("listitem"),
    function(row) {
        return {
            gem:   row.firstChild.getAttribute("label"),
            Price: row.lastChild.getAttribute("label")
        };
    }
);
console.dir(data);

]]>
</script>

</window>

Только для console.dir() (Инструменты – Веб-разработка – Веб-консоль) надо открывать во вкладке и разрешить XUL для локальных файлов (Remote XUL Manager).

Bujhm666 · №5

Большое спасибо.

Полезная информация

№121-09-2012 09:32:32