亚洲精品无码永久在线观看你懂的,亚洲无日韩码精品

技術(shù)頻道 - js技術(shù)

jQuery將JSON數(shù)據(jù)轉(zhuǎn)換為數(shù)據(jù)網(wǎng)格列表(table)

作者:admin 時間:2023-6-8 18:23:35 瀏覽:

jquery.columns 是一個功能強(qiáng)大且支持 ajax 的 jQuery 插件，可將 JSON 數(shù)據(jù)轉(zhuǎn)換為可過濾、可搜索和分頁的數(shù)據(jù)網(wǎng)格。

效果圖

jQuery將JSON數(shù)據(jù)轉(zhuǎn)換為數(shù)據(jù)網(wǎng)格列表(table)

demo download

使用介紹

1、在頁面底部加載jQuery庫和 jquery.columns 插件。

<!-- 注意文件路徑 -->
<script src="resources/jquery-3.2.1.min.js"></script> 
<script src="resources/jquery.columns-1.0.min.js"></script>

2、將兩個 CSS 文件包含在頁面的 <head></head> 部分。其中 classic.css 也可以是 clean.css ，它們是不同的兩種樣式風(fēng)格。

<!-- 注意文件路徑 -->
<link id="style" href="resources/classic.css" rel="stylesheet" media="screen">
<link href="resources/jquerysctipttop.css" rel="stylesheet" type="text/css">

3、創(chuàng)建一個空的div容器。

<div id="example1"></div>

4、jQuery用JSON字符串生成數(shù)據(jù)網(wǎng)格。

$('#example1').columns({
data: [
{'Emp. Number': 00001, 'First Name':'John', 'Last Name':'Smith' },
{'Emp. Number': 00002, 'First Name':'Jane', 'Last Name':'Doe' },
{'Emp. Number': 00003, 'First Name':'Ted', 'Last Name':'Johnson' },
{'Emp. Number': 00004, 'First Name':'Betty', 'Last Name':'Smith' },
{'Emp. Number': 00005, 'First Name':'Susan', 'Last Name':'Wilson' },
{'Emp. Number': 00006, 'First Name':'John', 'Last Name':'Doe' },
{'Emp. Number': 00007, 'First Name':'Bill', 'Last Name':'Watson' },
{'Emp. Number': 00008, 'First Name':'Walter', 'Last Name':'Wright' }
]
});

jQuery將JSON數(shù)據(jù)轉(zhuǎn)換為數(shù)據(jù)網(wǎng)格列表(table)

5、可從外部JSON文件源加載數(shù)據(jù)。

$.ajax({
url:'data.json',
dataType: 'json', 
success: function(json) { 
example3 = $('#example3').columns({
data:json,
schema: [
{"header":"ID", "key":"id", "template":"000{{id}}"},
{"header":"Name", "key":"name"},
{"header":"Email", "key":"email", "template":'<a href="mailto:{{email}}">{{email}}</a>'}
{"header":"Gender", "key":"gender"}
]

}); 
}
});

從外部JSON文件源加載數(shù)據(jù)