j-Kanban

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Конфигуриране:

parent {String} Контейнер с фиксирана височина, може да бъде windowДефинирана стойност: parent Елементът
margin {Number} Върховен / долната марж заедно (дефолт: 0)
padding {Number} Връзка между панелите (предварително: 10)
style {Number} стил, 1 (предварително): кутии ще имат пълна височина, 2 кутии да имат max-height
move {String} Пътят към метода function(group, target)Извършва се, ако потребителят премества елемента в друга група
remove {String} Пътят към метода function(group)Извършва се, ако потребителят премахне елемент в групата
dblclick {String} Пътят към метода function(group)Извършва се, ако потребителят прави двойно кликване

Методи:

component.remove(id) може да премахне елемент в група
component.findgroup(id) връща групата

Important: всеки елемент се нуждае от свой идентификатор {String}, вижте примера.

Използвайте го с <ui-component name="kanban">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

example.html

<style>
	.caption { line-height: 50px; border-bottom: 1px solid #E0E0E0; padding: 0 10px; font-weight: bold; }
	.ui-dark .caption { border-bottom-color: #404040; }
</style>

<ui-component name="kanban" path="items" config="parent:window;move:onmoveitem;margin:50">

	<!-- Group header rendering -->
	<script type="text/html">
		<div class="caption">{{ name }}</div>
	</script>

	<!-- Item rendering -->
	<script type="text/html">
		<div>{{ name }}</div>
	</script>
</ui-component>

<script>

	var items = [];
	items.push({ id: '1', name: 'In progress', items: [{ id: '11', name: 'Better life Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea culpa voluptatem asperiores aspernatur doloremque cupiditate error, qui sit est quas.' }] });
	items.push({ id: '2', name: 'Pending', items: [{ id: '21', name: 'Improve j-ChunkyScroll' }] });
	items.push({ id: '3', name: 'Done', items: [{ id: '31', name: 'Fix scrollbars j-DataGrid' }, { id: '32', name: 'Improve performace' }] });

	function onmoveitem(group, target) {
		console.log('MOVEMENT:', group, target);
	}

</script>