jQuery EasyUI ฟอร์ม - สร้างกล่องต้นไม้หล่นลง (ComboTree)
ต้นไม้หล่นลงกล่อง (ComboTree) เป็นกล่องแบบหล่นลงมาด้านล่างต้นไม้ (ต้นไม้) กับ (ComboBox) มันสามารถทำหน้าที่เป็นรูปแบบการใช้งานข้อมูลก็สามารถส่งไปยังเซิร์ฟเวอร์ระยะไกล
ในการกวดวิชานี้เราจะสร้างแบบฟอร์มลงทะเบียนที่มีชื่อที่อยู่เขตเมือง เขตเมืองเป็นต้นไม้หล่นลงกล่อง (ComboTree) ฟิลด์ซึ่งผู้ใช้สามารถเลื่อนลงแผงต้นไม้ (แผงต้นไม้) และเลือกเมืองที่เฉพาะเจาะจง
สร้างแบบฟอร์ม (Form)
<div id = "DLG" class = "easyui โต้ตอบ" style = "width: 500px; ความสูง: 250px; padding: 10px 30px;"
title = "สมัคร" ปุ่ม = "# DLG ปุ่ม">
<H2> ข้อมูลบัญชี </ h2>
<form id = "FF" method = "โพสต์">
<table>
<tr>
<td> ชื่อ: </ td>
<td> <ประเภทขาเข้า = "text" name = "ชื่อ" style = "width: 350px;" /> </ td>
</ tr>
<tr>
<td> ที่อยู่: </ td>
<td> <ประเภทขาเข้า = "text" ชื่อ = "ที่อยู่" style = "width: 350px;" /> </ td>
</ tr>
<tr>
<td> เมือง: </ td>
<td> <เลือก class = "easyui-combotree" URL = "ข้อมูล / city_data.json" ชื่อ = "เมือง" style = "width: 156px;" /> </ td>
</ tr>
</ table>
</ form>
</ div>
<div id = "ปุ่ม DLG">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savereg()"> ส่ง </a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"> ยกเลิก </a>
</ div>
คุณสามารถดูจากรหัสข้างต้นเราเรียกว่า 'เมือง' กล่องต้นไม้หล่นลง (ComboTree) ตั้งค่าฟิลด์ URL แอตทริบิวต์ข้อมูลนี้สามารถดึงต้นไม้ (ต้นไม้) ข้อมูลจากเซิร์ฟเวอร์ระยะไกล โปรดทราบว่าข้อมูลนี้มีรูปแบบที่เรียกว่า 'easyui-combotree' ดังนั้นเราจึงไม่จำเป็นต้องเขียนใด ๆ ต้นไม้รหัส JS กล่องแบบหล่นลง (ComboTree) เขตจะแสดงผลโดยอัตโนมัติ
