您的位置：首页 > Web前端 > JQuery

jQuery插件开发-table插件开发

2018-02-17 14:47 183 查看

使用过bootstarp-table插件的人都知道bootstrap给我们提供了一个非常好看的表格渲染插件，我基于此，也模拟开发了一个比较简单的表格渲染插件。
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件</title>
<link rel="stylesheet" type="text/css" href="future.table.css"/>
<script src="./jquery-1.11.0.min.js"></script>
<script src="future.table.data.js"></script>
<script src="test.js"></script>
<style>
.one{color:red;}
.two{color:green;}
.live{color:blue;}
</style>
</head>
<body class="">
jQuery插件学习
<div id="demo"></div>
</body>
</html>test.js（插件调用）
//插件调用
$(function(){
var data = [
{col1:1111,col2:2222,col3:3333,col4:4444,col5:5555},
{col1:1111,col2:2222,col3:3333,col4:4444,col5:5555},
{col1:1111,col2:2222,col3:3333,col4:4444,col5:5555},
{col1:1111,col2:2222,col3:3333,col4:4444,col5:5555},
{col1:1111,col2:2222,col3:3333,col4:4444,col5:5555},
{col1:1111,col2:2222,col3:3333,col4:4444,col5:5555}
];
    $("#demo").ftTData({
    data:data,
    cols:[{th:"col1",thName:"col1列名",fColor:"red",fWeight:"bolder"},
          {th:"col2"},
          {th:"col3"},
          {th:"col4"},
          {th:"col5"}]
    });
});future.table.data.js(渲染数据插件)(function($){
$.extend(
{ftSay:function(option){
alert(option)}
});

$.fn.extend({
ftDivClear:function(){
this.html("11111");
//$(this).html("");
}
});

$.fn.extend({
ftTData:function(options){
            //要被渲染的对象，this指向调用该函数的dom对象
            $(this).html("");

var tableCols = options.cols;
var tableData = options.data;

var _html = "<table class='fttable_body'>";
$.each(tableData,function(dataIndex,data){
_html += "<tr>";
$.each(tableCols,function(colIndex,col){

_html += "<td style = '";
if(col.fColor != undefined){
_html += "color:" + col.fColor + ";";
}
if(col.fWeight != undefined){
_html += "font-weight:" + col.fWeight + ";";
}

_html += "'>";
_html += data[col.th];
_html += "</td>";
});
_html += "</tr>";
});

_html += "</table>";
$(this).html(_htm
4000
l);
}
});
})(jQuery);到此为止，运行，结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航