Если вы используете SQL Server 2005+, вы можете использовать функцию PIVOT
для преобразования данных из строк в столбцы.
Похоже, вам понадобится использовать динамический sql, если недели неизвестны, но вначале легче видеть правильный код с использованием жестко кодированной версии.
Сначала рассмотрим некоторые быстрые определения таблиц и данные для использования:
CREATE TABLE #yt
(
[Store] int,
[Week] int,
[xCount] int
);
INSERT INTO #yt
(
[Store],
[Week], [xCount]
)
VALUES
(102, 1, 96),
(101, 1, 138),
(105, 1, 37),
(109, 1, 59),
(101, 2, 282),
(102, 2, 212),
(105, 2, 78),
(109, 2, 97),
(105, 3, 60),
(102, 3, 123),
(101, 3, 220),
(109, 3, 87);
Если ваши значения известны, тогда вы будете жестко запрограммировать запрос:
select *
from
(
select store, week, xCount
from yt
) src
pivot
(
sum(xcount)
for week in ([1], [2], [3])
) piv;
См. SQL Demo
Затем, если вам нужно сгенерировать неделю номер динамически, ваш код будет:
DECLARE @cols AS NVARCHAR(MAX),
@query AS NVARCHAR(MAX)
select @cols = STUFF((SELECT ',' + QUOTENAME(Week)
from yt
group by Week
order by Week
FOR XML PATH(''), TYPE
).value('.', 'NVARCHAR(MAX)')
,1,1,'')
set @query = 'SELECT store,' + @cols + ' from
(
select store, week, xCount
from yt
) x
pivot
(
sum(xCount)
for week in (' + @cols + ')
) p '
execute(@query);
См. SQL Demo .
Динамическая версия генерирует список номеров week
, которые должны преобразуется в столбцы. Оба дают тот же результат:
| STORE | 1 | 2 | 3 |
---------------------------
| 101 | 138 | 282 | 220 |
| 102 | 96 | 212 | 123 |
| 105 | 37 | 78 | 60 |
| 109 | 59 | 97 | 87 |
Поскольку вы используете redux, ваш список элементов должен управляться с помощью действий / редуктора.
InfiniteScroll.js:
onScroll () {
var nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;
if (!this.props.fetching && nearBottom) {
fetchItems(); // dispatch action
}
}
render () {
var items = this.props.items.map(item => (<Component {item}/>)
return (
<ul>{ items }</ul>
)
}
componentDidMount() {
window.addEventListener("scroll", this.onScroll.bind(this), false);
}
componentWillUnmount() {
window.removeEventListener("scroll", this.onScroll.bind(this), false);
}
действия:
fetchItems () {
return dispatch => {
dispatch({
type: "FETCH_ITEMS"
});
fetch("/api/items")
.then(items => {
dispatch(itemsReceived(items));
});
}
}
itemsReceived (items) {
return {
type: "ITEMS_RECEIVED",
payload: {
items: items
}
}
}
редуктор:
case "FETCH_ITEMS":
return {
...prevState,
fetching: true
case "ITEMS_RECEIVED":
return {
...prevState,
fetching: false,
items: prevState.items.concat(items)
}
Таким образом, свиток прокручивает четко определенное действие (FETCH_ITEMS). Используя redux-thunk
, действие вызывает вызов API для извлечения новых элементов. Когда этот вызов будет завершен, вы отправите новое действие для подачи новых элементов через редуктор.
Затем редуктор обновляет состояние, в результате чего <InfiniteScroll>
переписывает обновленный список элементов.
ПРИМЕЧАНИЕ. Вы также должны установить fetchching в false в случае ошибки.
Если бы я был вами, я бы использовал библиотеку, чтобы сделать тяжелый подъем для меня.
Один из вариантов - response-infin-scroller .
Вот как может выглядеть ваш прецедент, в основном псевдокод:
<InfiniteScroll
pageStart={0}
loadMore={fetchItems} // that's your method for loading more results
hasMore={props.pageindex === preProps.pageindex + 1} // your 'has more' logic
loader={<div className="loader">Loading ...</div>}
>
{items} // <-- This is the content you want to load
</InfiniteScroll>
Для рабочего примера проверьте демонстрацию в своем репо .
Другой вариант - попытаться отладить ваш код. Но вам нужно предоставить больше контекста. Из предоставленной вами информации очень сложно сказать, что не так.
fetching
, это предотвращает запуск другого запроса. После того, как элементы получены, страница обновляется, и прокрутка снова вызывает запросы на выборку. – thedarklord47 17 July 2018 в 20:01