JQuery JSON Form Binding

- ไม่บำรุงรักษาอีกต่อไป !!!

ฉันย้ายไปที่แอป React/Vue แล้ว ไม่สามารถรักษาโครงการนี้ได้อีกต่อไป รู้สึกอิสระที่จะแยกและใช้ตามที่คุณต้องการ

JQuery-JSON-แบบฟอร์ม-ฟิลด์

ปลั๊กอินน้ำหนักเบาสำหรับการเชื่อมโยงข้อมูล JSON กับแบบฟอร์ม มีประโยชน์สำหรับการทำงานกับ AJAX และแบบฟอร์มที่มีฟิลด์จำนวนมาก

การติดตั้ง

npm i jquery-json-form-binding

หรือลิงก์ 'jquery-json-form-binding.js' จากโฟลเดอร์ src

การใช้งาน

มันค่อนข้างใช้งานง่าย สร้างแบบฟอร์มและเรียกใช้ฟังก์ชัน jsonToForm โดยส่งข้อมูล json และการโทรกลับของคุณเป็นตัวเลือก

แบบฟอร์มง่ายๆ:

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

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

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

	</form>

ตอนนี้เรียก jsonToForm ด้วยวัตถุ JSON

	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>

ตอนนี้เรียก jsonToForm ด้วยวัตถุ JSON

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

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

การสาธิตการเลือกหลายรายการ

หากคุณมีรูปแบบที่ซับซ้อน คุณสามารถใช้ฟังก์ชัน pass callback สำหรับแต่ละคีย์ข้อมูลที่คุณมีในออบเจ็กต์ข้อมูลได้ดังนี้:

 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);
		}
	});

ข้อเสนอแนะและการมีส่วนร่วมจะได้รับการชื่นชม