Форум

webphp · #1 (**permalink**) 12.02.2015, 08:47

Ребят помогите, не могу разобраться
Есть категории товаров, которые необходимо отсортировать и вывести списки категорий с алфавитом.
Т.е. как то так

A
    App
    Add
B
    Border
    Background
А
    Арбуз
    Ананас

Массив объектов выглядит так

[
    {"name": "Арбуз", "url": "url"},
    {"name": "Ананас", "url": "url"},
    {"name": "Background", "url": "url"},
    {"name": "Border", "url": "url"},
    {"name": "Add", "url": "url"},
    {"name": "App", "url": "url"}

]

Есть функция

function catalogSort(catalog, options) {

	var html = '', letter, j, i, obj, field = {}, item = 0, maxHeight
	, tags = {
		dl: { open:false, i: '<dl class="marks-col">', o: '</dl>'},
		dd: { open:false, i: '<dd class="marks-col-dd">', o: '</dd>'},
		ul: { open:false, i: '<ul>', o: '</ul>'},
		open:function(tag){
			if( !this[tag].open) {
				this[tag].open = true;
				html += this[tag].i;
			}
		},
		close:function(tag){
			if( this[tag].open) {
				this[tag].open = false;
				html += this[tag].o;
			}
		}
	}
	, newLetter = function(letter) {
		tags.open('dl')
		html += '<dt class="marks-col-dt">' + letter + '</dt>';
		tags.open('dd');
		tags.open('ul');
	};
	
	maxHeight = Math.ceil(catalog.length/options.columns);
	
	// разобрать в структуру  { буква:[слова,..],.. }
	for (i in catalog) {
		obj = catalog[i];
		letter = obj.name.charAt(0);
		if (field.hasOwnProperty(letter)) {
			field[letter].push(obj);
		} else {
			field[letter] = [obj];
		}
	}
	
	// формируем вывод в шаблон
	for(letter in field) {
		// сорт по алфавиту
		field[letter].sort( function(a,b){ return a.name.localeCompare(b.name)});
        
		tags.close('ul');
		tags.close('dd');
        
		for( j in field[letter]) {
			if( item  &&  item%maxHeight == 0) { // на след. столбец в той же букве 
				tags.close('ul');
				tags.close('dd');
				tags.close('dl');

				newLetter( letter);
			} else if( j==0) { // просто начало буквы
				newLetter( letter);
			}
			var url = '/catalog/' + field[letter][j].url + '/';
			
			html += '<li class="marks-col-item"><a href="' + url + '" class="marks-col-link">' + field[letter][j].name + '</a></li>';
			item++;
		}
	}
	html += '</ul></dd></dl>';

	return html;
}

Проблема в том что необходимо параграфы с русскими символами поместить в конец массива, чтобы названия на русском были в конце меню, так же как я привет в примере выше, сейчас все в перемешку получается.

рони · #2 (**permalink**) 12.02.2015, 10:35

webphp,
Вариант ... ссылки добавить не проблема

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    function sortFunction(a, b) {
        return a.name < b.name ? -1 : a.name > b.name ? 1 : 0
    }
    var arr = [
    {"name": "Арбуз", "url": "url"},
    {"name": "Ананас", "url": "url"},
    {"name": "Background", "url": "url"},
    {"name": "Border", "url": "url"},
    {"name": "Add", "url": "url"},
    {"name": "App", "url": "url"}
]
    arr.sort(sortFunction);
    var ul = $("<ul/>"),
        li, sub, obj = {},
        letter;
    $.each(arr, function(indx, el) {
        letter = el.name.charAt(0);
        if (!obj[letter]) {
            obj[letter] = true;
            li = $("<li/>", {
                "text": letter.toUpperCase()
            });
            li.appendTo(ul);
            sub = $("<ul/>").appendTo(li)
        }
        $("<li/>", {
            "text": el.name
        }).appendTo(sub)
    });
    ul.appendTo("body")
});

  </script>
</head>

<body>

</body>

</html>

webphp · #3 (**permalink**) 13.02.2015, 07:46

рони, спасибо, ток мне для серверного js надо =) Но ваш пример показал где у меня затык был!

RacCoon72 · #4 (**permalink**) 11.11.2016, 09:58

Сообщение от рони

webphp,
Вариант ... ссылки добавить не проблема

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    function sortFunction(a, b) {
        return a.name < b.name ? -1 : a.name > b.name ? 1 : 0
    }
    var arr = [
    {"name": "Арбуз", "url": "url"},
    {"name": "Ананас", "url": "url"},
    {"name": "Background", "url": "url"},
    {"name": "Border", "url": "url"},
    {"name": "Add", "url": "url"},
    {"name": "App", "url": "url"}
]
    arr.sort(sortFunction);
    var ul = $("<ul/>"),
        li, sub, obj = {},
        letter;
    $.each(arr, function(indx, el) {
        letter = el.name.charAt(0);
        if (!obj[letter]) {
            obj[letter] = true;
            li = $("<li/>", {
                "text": letter.toUpperCase()
            });
            li.appendTo(ul);
            sub = $("<ul/>").appendTo(li)
        }
        $("<li/>", {
            "text": el.name
        }).appendTo(sub)
    });
    ul.appendTo("body")
});

  </script>
</head>

<body>

</body>

</html>

А можно то же самое, только с URL для каждого города ( в массив заносится, же уже )

рони · #5 (**permalink**) 11.11.2016, 11:08

RacCoon72,

Форум

Справочник

Discord чат

Курсы javascript