卡卡网是专业的网站测速平台，网速测试，测试网站速度，就来卡卡网 ~
 |  |  |
 |  |  |
|
jquery.columns 是一個(gè)功能強(qiáng)大且支持 ajax 的 jQuery 插件，可將 JSON 數(shù)據(jù)轉(zhuǎn)換為可過(guò)濾、可搜索和分頁(yè)的數(shù)據(jù)網(wǎng)格。
效果圖
使用介紹
1、在頁(yè)面底部加載jQuery庫(kù)和 jquery.columns 插件。
- <!-- 注意文件路徑 -->
- <script src="resources/jquery-3.2.1.min.js"></script>
- <script src="resources/jquery.columns-1.0.min.js"></script>
2、將兩個(gè) CSS 文件包含在頁(yè)面的 <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)建一個(gè)空的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' }
- ]
- });
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源文件，你需要在你的Web服務(wù)器配置一下mime類型，否則可能因?yàn)樽x取不了json文件而導(dǎo)致失敗。
- .json application/json
IIS添加json的MIME類型
相關(guān)文章
_henghost.gif)
