EasyUI是一种基于jQuery的用户界面库,提供了丰富的界面组件和特效,方便网页开发。本文将讲述如何使用EasyUI弹窗显示JSON数组。
首先,我们需要准备一份JSON数组数据,例如:
[ { "name": "张三", "age": 30, "city": "北京" }, { "name": "李四", "age": 25, "city": "上海" }, { "name": "王五", "age": 28, "city": "广州" } ]
接着,我们需要在HTML页面中引入EasyUI库和样式文件:
<link rel="stylesheet" href="easyui/themes/default/easyui.css"> <script src="jquery.min.js"></script> <script src="easyui/jquery.easyui.min.js"></script>
然后,我们需要在HTML页面中定义一个隐藏的EasyUI弹窗:
<div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px;" closed="true" buttons="#dlg-buttons"> <table id="dg"></table> </div>
接下来,我们需要通过JavaScript将JSON数组数据显示在表格中,并将表格添加到弹窗内,如下:
var data = [ { "name": "张三", "age": 30, "city": "北京" }, { "name": "李四", "age": 25, "city": "上海" }, { "name": "王五", "age": 28, "city": "广州" } ]; var tableHtml = '<thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead>'; for (var i = 0; i < data.length; i++) { var item = data[i]; tableHtml += '<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.city + '</td></tr>'; } $("#dg").html(tableHtml); $("#dlg").dialog({ title: "数据", modal: true, buttons: [{ text: '关闭', handler: function () { $("#dlg").dialog('close'); } }] }).dialog('open');
最后,我们就可以在页面中看到一个EasyUI弹窗,里面显示了我们定义的JSON数组表格数据: