EasyUI是一款流行的基于jQuery的UI庫,它的下拉菜單組件(combo box)非常強大且易于使用。在使用EasyUI下拉菜單組件時,我們可以通過設置JSON數據來動態加載下拉菜單的內容,下面我們一起來學習一下EasyUI下拉菜單JSON的使用。
首先我們需要定義一個下拉菜單組件,比如這樣:
<input id="combobox" class="easyui-combobox" data-options="valueField:'id',textField:'text',url:'get_data.php'">
上面的代碼表示在一個id為“combobox”的input元素中創建一個下拉菜單,其數據來源于get_data.php返回的JSON數據,其中valueField表示下拉項的值字段,textField表示下拉項的文本字段。
接下來,我們需要編寫get_data.php文件來生成JSON數據,具體代碼如下:
<?php //連接數據庫 $conn = mysqli_connect("localhost", "root", "password", "my_db"); if (!$conn) { die("連接失敗: " . mysqli_connect_error()); } //查詢數據并生成JSON $sql = "SELECT id, name FROM products"; $result = mysqli_query($conn, $sql); $data = array(); while($row = mysqli_fetch_assoc($result)){ $data[] = $row; } echo json_encode($data); ?>
上面的代碼通過php連接數據庫,并查詢products表中的數據,然后將數據轉換成JSON格式返回。這里只是一個簡單的示例,實際應用時需要根據具體需求自行編寫查詢語句和返回格式。
最后,我們需要在頁面中引入jQuery和EasyUI庫,以及我們剛剛編寫的get_data.php文件。具體代碼如下:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <link rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css"> <script src="get_data.php"></script>
上面的代碼引入了jQuery和EasyUI庫以及我們剛剛編寫的get_data.php文件,這樣就可以在頁面中使用根據JSON數據動態加載的下拉菜單了。