mytable0.2（小优化）

最新推荐文章于 2024-07-22 16:42:40 发布

PF披风

最新推荐文章于 2024-07-22 16:42:40 发布

阅读量260

点赞数

分类专栏： mytable 文章标签： table td php json js

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

版权

mytable 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

mytable0.2（小优化）

属性：

nameid : table的id；
mytableid: 主键；
data : 传到后台的数据；
keys : 以键值对的数组格式输入，[{fileName：表头” , “fileCont：表头对应的数据” , “fileFun：表格要加入的其他代码”}];
url : 获取json的地址 ;
sub : 提交方式：get/post

使用：

下列代码保存为mytable.js:

/**
 * [mytable description]
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
function mytable(obj){
    var nameid = obj['nameid'];//table的id
    var sub    = obj['sub']; //提交方式：get/post
    var data   = obj['data'];//传输的数据
    var keys   = obj['keys'];//表结构数据
    var url    = obj['url'];//数据来源
    var mytableid = obj['mytableid'];//设置主键


    $("#"+nameid).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 += newThead(keyname);
    $.ajax({
        type    : sub,
        data    : data ,
        url     : url  ,
        success : function(e){
                tdtext += "<tbody>";

                for(var i in e){
                    var checkboxid = Number(i)+1;

                    tdtext += "<tr>";
                    if((checkboxid/10)>=1){
                        tdtext += "<td><input type='checkbox' value='"+e[i][mytableid]+"'> "+checkboxid+"</td>";
                    }else{
                        tdtext += "<td><input type='checkbox' value='"+e[i][mytableid]+"'> 0"+checkboxid+"</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>";
            $("#"+nameid).html(tdtext);
        }
    });
}
/* 生成<thead> */
function newThead(keyname){
    var initxt   = "<thead><tr>";
    initxt += "<th><input type='checkbox' id='keyall'> 序号</th>";
    for(var i in keyname){
        initxt += "<th>"+keyname[i]+"</th>";
    }  

    initxt += "</tr></thead>"; 
    return initxt;
}

例子：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({
         nameid :'mytable',
         url    :'index.php',
         sub    :'get',
         keys   :[{
              fileName:'姓名', 
              fileCont:'name'
              },
              {
              fileName:'年龄',
              fileCont:'age',
              fileFun:'<a>删除</a>' 
             }]
      }); 
      });

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