jQueryJSON数据转换为html表插件Columns

插件特效

2026-07-26 01:20 4 次浏览 • 0 次下载 53.1KB

插件描述：Columns有一个简单的方法将JSON数据转换成HTML表并实现排序、搜索、分类、分页、过滤等功能。所以你只需要的是提供数据,其余的交给Columns来作。

Columns创建JSON数据转化为HTML方法

引用jQuery库1.7或更高版本和Columns插件文件：

1 2	`<script` `src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>` `<script` `src="js/jquery.columns-2.0.min.js"></script>`

包含一个预先构建的列或创建自己的主题

1	`<link` `rel="stylesheet"` `href="css/classic.css">`

由于动态列创建所有必需的HTML,HTML唯一需要的是一个空的HTML元素,比如< div >标记,与相应的id作为初始化使用。

1	`<div` `id="columns"></div>`

最后,初始化Columns.

<script>
  $(document).ready(function() {
    var json = [{"col1":"row1", "col2":"row1", "col3":"row1"}, {"col1":"row2", "col2":"row2", "col3":"row2"}]; 
    $('#columns').columns({data:json});
  });
</script>

Columns详细参数请查看demo