当先锋百科网

首页 1 2 3 4 5 6 7

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数组表格数据: