EasyUI是一款非常優秀的JavaScript前端UI組件庫。在實際開發中,我們常常使用JSON數據格式來進行數據綁定和渲染。但是,有些時候我們可能不想使用JSON格式,而是想用其他的方式來完成數據的綁定。下面,我們就來介紹一下EasyUI不用JSON的實現方式。
首先,我們需要了解一下EasyUI的數據綁定原理。EasyUI會根據我們傳入的JSON數據來進行自動渲染。所以,我們不用JSON的話,就需要自己手動進行渲染。具體方法如下:
$(function(){ // 創建EasyUI組件之前,先讓HTML元素隱藏 $("#myGrid").css("display","none"); // 手動從服務器中獲取數據 $.ajax({ url: "data/getData.php", type: "get", data: {id: "001"}, dataType: "json", success: function(result){ // 遍歷數據,手動創建表格行 for (var i=0;i<result.length;i++){ var row = <tr><td>result[i].id</td><td>result[i].name</td><td>result[i].age</td></tr>; $("#myGrid tbody").append(row); } // 手動觸發EasyUI組件的渲染 $('#myGrid').datagrid(); // 顯示EasyUI組件 $("#myGrid").css("display","block"); } }); });
這里我們通過ajax請求從服務器中獲取數據,并將其手動渲染到表格中去。在數據渲染完畢后,我們再手動觸發EasyUI組件的渲染,最后再將表格顯示出來。
除此之外,我們還可以通過自定義EasyUI組件的data屬性來進行綁定。具體方法如下:
<select id="mySelect" class="easyui-combobox" style="width:200px;" data-options="url:'data/getData.php',method:'get',height:100, valueField:'id',textField:'name',panelHeight:'auto' "></select>
我們將數據的URL、請求方式、顯示字段等信息配置到data-options屬性中,并將該屬性綁定到我們要渲染的組件中去。EasyUI會自動從服務器中獲取數據,并將其渲染到下拉框中去。這種方法不用手動渲染,簡單易懂。
上一篇vue extra