Добавление пустой строки в определенной позиции в неупорядоченном списке с помощью jQuery - PullRequest
Новая
       8

Добавление пустой строки в определенной позиции в неупорядоченном списке с помощью jQuery

0 голосов
/ 02 августа 2010

У меня есть UL, созданный с помощью PHP и jQuery UI, который выглядит следующим образом: 

<ul id="ml_organize">
<li id="il1" class="ui-state-default"><span id="add_hl1" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('1')";></span><span class="org_qty">1</span><span class="org_partno">MAS-NTWKBAYKIT</span><span class="org_desc">FLOOR MNTG HARDWARE KIT (NTWK)</span></li>
<li id="il13" class="ui-state-default"><span id="add_hl2" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('2')";></span><span class="org_qty">1</span><span class="org_partno">ESDSTRAP</span><span class="org_desc">ADJ ELASTIC 63070</span></li>
<li id="il12" class="ui-state-default"><span id="add_hl3" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('3')";></span><span class="org_qty">1</span><span class="org_partno">ESDLABEL</span><span class="org_desc">GREEN .75" X 1.75" ESD LABEL</span></li>
<li id="il11" class="ui-state-default"><span id="add_hl4" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('4')";></span><span class="org_qty">1</span><span class="org_partno">SPT6224</span><span class="org_desc">SPLIT TUBE 5/8" X 24" GRAY</span></li>

<li id="il10" class="ui-state-default"><span id="add_hl5" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('5')";></span><span class="org_qty">1</span><span class="org_partno">SAF2502</span><span class="org_desc">FRAMING CLIP ASSM AUX CHNL 5/8</span></li>
<li id="il9" class="ui-state-default"><span id="add_hl6" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('6')";></span><span class="org_qty">1</span><span class="org_partno">TR53</span><span class="org_desc">5/8-11 THREADED ROD X  24.0"</span></li>
<li id="il8" class="ui-state-default"><span id="add_hl7" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('7')";></span><span class="org_qty">2</span><span class="org_partno">CJB6302C</span><span class="org_desc">CLIP J-BOLT ASSM FOR 2"CR/FC</span></li>
<li id="il7" class="ui-state-default"><span id="add_hl8" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('8')";></span><span class="org_qty">2</span><span class="org_partno">RFCH702</span><span class="org_desc">HEAVY HARDWARES(PAIR) 2.0" STGR</span></li>
<li id="il6" class="ui-state-default"><span id="add_hl9" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('9')";></span><span class="org_qty">2</span><span class="org_partno">FBM26CB</span><span class="org_desc">FLR BASE MLDINGX26" (CB VINYL)</span></li>

<li id="il5" class="ui-state-default"><span id="add_hl10" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('10')";></span><span class="org_qty">2</span><span class="org_partno">AFC2202DG</span><span class="org_desc">AUX CHANNEL, 4¿</span></li>
<li id="il4" class="ui-state-default"><span id="add_hl11" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('11')";></span><span class="org_qty">1</span><span class="org_partno">601343874</span><span class="org_desc">UNI-STRUT KIT - ED8C509-50 G9 EQUIVALENT</span></li>
<li id="il3" class="ui-state-default"><span id="add_hl12" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('12')";></span><span class="org_qty">4</span><span class="org_partno">ISS888</span><span class="org_desc">INSUL STRIP FOR BAYS-42" LONG</span></li>
<li id="il2" class="ui-state-default"><span id="add_hl13" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('13')";></span><span class="org_qty">4</span><span class="org_partno">ICS775</span><span class="org_desc">INSUL CABLE RACK 1.5"STG 7.75"</span></li>
<li id="il14" class="ui-state-default"><span id="add_hl14" class="icon ui-icon ui-icon-plusthick" title="Add header line" alt="Add header line" onClick="addMLRow('14')";></span><span class="org_qty">1</span><span class="org_partno">ESD1080740001</span><span class="org_desc">ESD BANANA JACK</span></li>

</ul>

Как вы можете видеть с помощью функции onClick в каждом "li", я хочу, чтобы я нажал маленькую кнопку слева от строки и вставил новую пустую строку в это пространство, перенумеровав элементы после нее. Функция addMLRow () всегда будет проходить там, где элемент находится в списке, а также идентификатор строки, содержащей маленькую кнопку.

В пользовательском интерфейсе jQuery уже есть функция для создания массива списка элементов после его завершения, поэтому я могу передавать данные в БД и иметь номера позиций даже для черных линий.

Любая помощь будет принята с благодарностью !!!!

Ответы [ 2 ]

1 голос
/ 03 августа 2010

Боюсь, ваше решение не сработало, так как оно также делает каждую добавленную строку кликабельной, чтобы создать линию над ней.Строки заголовка, добавленные с помощью onClick, имеют другой формат, как вы можете видеть из фрагмента ниже: 

function addMLRow(rowNo) {
    var newRow = "<li id=\'li" + rowNo + "\' class=\'ui-state-default\'><span class=\'item\'>HL</span><input class=\'header_line\' maxlength=\'75\' type=\'text\' name=\'hl_text[" + rowNo + "]\' id=\'hl_text" + rowNo + "\' /></li>";
    $('#ml_organize li:eq(' + (rowNo - 1) + ')').before(newRow);
    $('#hl_text' + rowNo + '').focus(function() {
        $(this).css('background','#DDD');
    });
    $('#hl_text' + rowNo + '').blur(function() {
        $(this).css('background','#FFF');
    });
    $('#hl_text' + rowNo + '').focus();
    // renumber rows after insert
    $('#ml_organize li:gt(' + (rowNo - 1) + ')').each(function() {
        var newID = 'li' + ($(this).index() + 1);
        $(this).attr('id',newID);
    });
}

Возможно, это еще не самое элегантное решение, но оно работает!

0 голосов
/ 02 августа 2010

В вашем коде ваш диапазон и идентификаторы не совпадают. Это намеренно?

В любом случае вам не нужны все идентификаторы диапазонов и отдельные клики.

Следующее будет вставлять пустую строку перед любым LI (включая пустые LI) при каждом нажатии, без необходимости каких-либо onClicks. 

$('#ml_organize li').live('click', function() {
    $(this).before('<li class="ui-state-default"><span class="icon ui-icon ui-icon-plusthick" title="Add header line"></span><span class="org_qty">0</span><span class="org_partno"> </span><span class="org_desc"> </span></li>');

});

Я бы также посмотрел на упрощение разметки - все повторяющиеся классы кажутся немного расточительными, когда вы можете просто использовать родительский класс для стилевого оформления CSS.

...