JQuery JSON Form Binding 다운로드 - JQuery JSON Form Binding 소스 코드 다운로드

JQuery JSON Form Binding

기타 카테고리

1.0.0

다운로드

!!! 더 이상 유지 관리하지 않습니다 !!!

React/Vue 앱으로 옮겼습니다. 이 프로젝트를 더 이상 유지할 수 없습니다. 원하는 대로 자유롭게 포크하여 사용하세요.

JQuery-JSON-양식-필드

JSON 데이터를 양식에 바인딩하기 위한 경량 플러그인입니다. AJAX 및 필드 수가 많은 양식 작업에 유용합니다.

설치

npm i jquery-json-form-binding

또는 src 폴더에서 'jquery-json-form-bound.js'를 링크하세요.

용법

사용이 매우 간단합니다. 양식을 만들고 json 데이터와 콜백을 옵션으로 전달하는 jsonToForm 함수를 호출하세요.

간단한 형식:

	<form id="myform">
		
		<input type="" name="name">

		<input type="" name="age">

		<input type="" name="gender">

	</form>

이제 JSON 개체를 사용하여 jsonToForm을 호출합니다.

	var data = {name: "Waleed", age: 23, gender: "Male"};
	$("#myform").jsonToForm(data);

다중 선택이 포함된 양식:

	<form id="myform">
		<div class="form-field">
			<h5>
				Text Input
			</h5>
			<input type="" name="name">
		</div>

		<div class="form-field">
			<h5>
				Single Select
			</h5>
			<select name="country">
				<option value="usa">USA</option>
				<option value="uk">UK</option>
				<option value="germany">Germany</option>
			</select>
		</div>

		<div class="form-field">
			<h5>
				Multiple Select
			</h5>
			<select multiple name="skill">
				<option value="html">html</option>
				<option value="css">css</option>
				<option value="javascript">javascript</option>
				<option value="node">node</option>
			</select>
		</div>

		<div class="form-field">
			<h5>
				checkbox example
			</h5>
			<label>
				<input type="checkbox" value="english" name="language" />English</label>
			<label>
				<input type="checkbox" value="french" name="language" />French</label>
			<label>
				<input type="checkbox" value="german" name="language" />German</label>
		</div>


		<div class="form-field">
			<h5>
				Radio example
			</h5>
			<label>
				<input type="radio" value="male" name="sex" />Male</label>
			<label>
				<input type="radio" value="female" name="sex" />Female</label>
		</div>
	</form>

이제 JSON 개체를 사용하여 jsonToForm을 호출합니다.

	var json = {
		name: "Waleed",
		country: "uk",
		skill: ["html", "javascript"],
		language: ["english", "german"],
		sex: "female"
	};

	$("#myform").jsonToForm(json);
	
	console.log($("#myform").serialize());

다중 선택을 위한 데모입니다.

복잡한 형태를 가지고 있는 경우. 다음과 같이 데이터 객체에 있는 각 데이터 키에 대해 전달 콜백 함수를 사용할 수 있습니다.

 var data = {name: "Waleed", age: 23, gender: "Male"};
	$("#myform").jsonToForm(data, {
		// change the way age value will be set in the form
		age: function(value){
				$('[name="age"]').val(value+1);
		}
	});