自己做个js表格插件呗--mytable v0.1

最新推荐文章于 2024-05-11 14:22:31 发布

置顶 PF披风

最新推荐文章于 2024-05-11 14:22:31 发布

阅读量2.7k

点赞数 3

分类专栏： mytable 文章标签： javascript 表格控件 json-解析 table插件

本文链接：https://blog.csdn.net/fengzi1995/article/details/78673660

版权

mytable 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

mytable 0.1

由来：

在开发中试用了很多表格插件，发现太复杂了，而我只想要把数据应用在表格上而已。
为什么是0.1版本开始，因为她就只有0.1的功能啊。

设计思想：

通过后台传来的json数据使用js生成表格，我只要调用方法mytable(url,data,keys);就可以实现自动生成表格的功能了。

属性：

url ：获取json的地址
data ：传给后台的数据，如：“id=1”
keys ：以键值对的数组格式输入，[{fileName：表头” , “fileCont：表头对应的数据” , “fileFun：表格要加入的其他代码”}]

下列代码保存为mytable.js:

function mytable(url,data,keys){
        var mytable = $("#mytable");
        mytable.html("正在加载表格。。。");
        var keyname = [];//表头
        var key     = [];//表头对应数据
        var keyfun  = [];//方法
        var tdtext  = "";

        for(var tmp in keys){
            keyname.push(keys[tmp]['fileName']);
            key.push(keys[tmp]['fileCont']);
            keyfun.push(keys[tmp]['fileFun']);
        }

        tdtext += "<thead>";
        tdtext += "<tr><th><input type='checkbox' id='keyall'> 序号</th>";
        for(var te in keyname){
            tdtext += "<th>"+keyname[te]+"</th>";
        }
        tdtext += "</tr>";
        tdtext += "</thead>";

        $.ajax({
            type    : "GET",//可以改post
            data    : data,
            url     : url,
            success : function(e){
                tdtext += "<tbody>";
                for(var i in e){

                    var ip = Number(i)+1;
                    tdtext += "<tr>";
                    tdtext += "<td><input type='checkbox' value=''> "+ip+"</td>";
                    for(var j in key){
                        if(keyfun[j] != undefined){
                            tdtext +="<td>"+keyfun[j]+e[i][key[j]]+"</td>"; 
                        }else{
                            tdtext +="<td>"+e[i][key[j]]+"</td>";                            
                        }
                    }
                    tdtext +="</tr>";
                }
                tdtext += "</tbody>";
                mytable.html(tdtext);
            }
        });
    }

例子：mytable.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
td,th{
    padding: 5px 5px 5px 5px;
    border: 1px solid #ccc;
}
</style>

</head>
<body>
     <table id="mytable"></table>//表格
     <script src ="jquery-1.12.4.min.js">//引入jquery（必须）
     <script src ="mytable.js">//引入js
   <script>
     $(function(){
     //初始化 ，后台传来的json数据是[{name:'小米',age:7},{name:'老腾',age:19}]  ，请求方式为‘get’可以在js改为post 

     mytable('index.php' , '' , [{
         fileName:'姓名', 
         fileCont:'name'
         },{
         fileName:'年龄',
         fileCont:'age',
         fileFun:'<a>删除</a>' 
         }]); 
      });

     </script>
</body>
</html>

注：可能有些缺陷，但已经满足我的需求，配上bootstrap的表格样式食用效果更佳哦

我的个人博客

PF披风

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
自己做个js表格插件呗--mytable v0.1

mytable 0.1在开发中试用了很多表格插件，发现太复杂了，而我只想要通过后台传来的json数据使用js生成表格而已。为什么是0.1版本开始，因为她就只有0.1的功能啊。
复制链接

扫一扫