jQuery插件开发-table插件开发

独行侠_阿涛

于 2018-02-17 14:47:44 发布

阅读量506

点赞数

分类专栏： # 前端问题文章标签： jQuery插件

本文链接：https://blog.csdn.net/wltsysterm/article/details/79332255

版权

前端问题专栏收录该内容

45 篇文章 1 订阅

订阅专栏

使用过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(_html);
        }
    });
})(jQuery);

到此为止，运行，结果如下：