j-ListForm

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

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

autofocus {String/Boolean} се фокусира върху първия вход, string означава персонализиран селектор (предварително: false)
empty {String} празен текст (предварително: ---)
default {Boolean} изпълнява метода на DEFAULT() за обхвата на формата (предварително: true)
Контролът на required {Boolean} ще бъде "необходим" (предварително: false)
enter {Boolean} позволява използването на enter като подаване (предварително: false)
disabled {Boolean} деактивира контрола (предварително: false)
formclass {String} - клас за контейнери
itemclass {String} - клас за контейнер
create {String} връзка към функцията function(empty_object, callback(DEFAULT_ITEM_OBJECT), arr) (null стойност състави)
submit {String} връзка към функцията function(form_data, callback(NEW_DATA), arr, item_ref_in_items) (null стойност скит актуализация)
update {String} връзка към функцията function(form_data, callback(NEW_DATA), arr, item_ref_in_items) (null стойност скит актуализация)
remove {String} е връзка към функцията function(remove_item, callback(really_remove?), arr)
selector {String} jQuery селектор за персонализиран шаблон (извън компонента). custom template в Данни обвързващи
footertop {Boolean} премества стъпалото на върха на компонента (предварително: false)
move {String} е връзка към функцията function(items)
newbie {String} е име на собствеността за всеки нов елемент (то винаги ще съдържа стойност true)
plugin {String} е персонализирано име на плагина вътре в компонента (предварително: component.ID)
invalidform {Boolean} деактивира компонента на j-Validate ако j-ListForm е в режим на редактиране (предварително: false)
NEW: delay {Number} първоначално закъснение за разкриване на детайли (предварително: 1000 ms)

Съставът трябва да има дефинирани 3 шаблона, вградени в <script type="text/html">:

1 първо - с шаблон на Tangular за представяне на елемента
2 секунда - форма с компоненти (формата ще бъде вградена в изолиран обхват)
3 футер - футер с бутон за елемент create

Добре е да знаете:

Компонентът наблюдава събитие с клик върху всички бутони с атрибут name:

name="submit" извършва подаване/спасяване на данни към модела
name="update" извършва подаване/спасяване на данни към модела
name="remove" премахва текущия елемент от модела
name="cancel" премахва редактирането
name="create" създава празна форма
form съдържа клас ui-listform-new при създаване на нов елемент

Изтегляне на бутоните:

name="remove" премахва елемента
name="up" премества елемента нагоре
name="down" премества елемента надолу

Методите са:

NEW: component.add() отваря формуляр за създаване на запис

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

example.html

<style>
	.ui-listform-item { height: 26px; line-height: 26px; overflow: hidden; padding: 0 5px; }
	button { background-color: white; border-radius: 2px; border: 1px solid #E0E0E0; font-size: 12px; height: 28px; line-height: 27px; padding: 0 10px; }
	button i { margin-right: 5px; }
	button:disabled { color: gray; background-color: #F8F8F8; }
	.ui-dark button { background-color: #303030; border-color: #454545; }
	.ui-dark button:disabled { background-color: #252525; color: #404040; }
</style>

<div style="width:400px">

	<ui-component name="listform" path="users" config="autofocus:1">

		<!-- LIST RENDERING -->
		<script type="text/html">
			<div>
				<div class="pull-right">
					<button name="up"><i class="ti ti-arrow-up"></i></button>
					<button name="down"><i class="ti ti-arrow-down"></i></button>
					<button name="remove"><i class="ti ti-remove"></i></button>
				</div>
				{{ name }}
			</div>
		</script>

		<!-- FORM RENDERING -->
		<script type="text/html">
			<div class="padding">
				<ui-component name="input" path="?.name" config="required:1" default="''" class="m">Name</ui-component>
				<ui-component name="validate" path="?">
					<button name="submit"><i class="ti ti-save"></i>Save</button>
					<button name="remove">Remove</button>
					<button name="cancel">Cancel</button>
				</ui-component>
			</div>
		</script>

		<!-- FOOTER -->

		<script type="text/html">
			<div style="margin-top:10px"><button name="create"><i class="ti ti-plus-circle green"></i>Create new</button></div>
		</script>

	</ui-component>
	<hr />
	<ui-bind path="users" config="text:STRINGIFY(value)" style="font-family:monospace" class="block"></ui-bind>

</div>

<script>

	var users = [{ name: 'Total.js' }, { name: 'Flow' }, { name: 'jComponent' }];

</script>