mytable-0.3

mytable-0.3

自己做个自动生成表格的js插件
0.3更加完善了我的要求，更加方便了，恩恩不错不错

属性：

mytable({tbname,tbmkey,tbmethod,tbdata,tburl,tbinfor});

• tbname：初始化table的id；
• tbmkey：一般是数据库表的主键；
• tbmethod：提交的方式：get、post；
• tbdata：提交的数据；
• tburl：提交的网址；
• tbinfor：表结构数据，固定格式：
  [
{ fileName : 表头名 , fileCont : '对应的数据库字段' , fileFun : '自定义td' } ,
{ fileName : 表头名 , fileCont : '对应的数据库字段' , fileFun : '自定义td' } ,
{ ... }
]
  注意：后台传回来的数据格式：
  [
list : {
{ '数据库字段' : '数据' , '数据库字段' : '数据' , ... } ,
{ '数据库字段' : '数据' , '数据库字段' : '数据' , ... } ,
{...}
}
]

用法：

保存mytable-0.3.js:

$(function(){
    //点击全选    
    $("table").on("click","#keyall",function(){

        if($(this).prop('checked'))
        {
            //全部选中
            $('input:checkbox').each(function() {
                $(this).prop('checked', true);
            }); 
        }else{
            //全部取消选择
            $('input:checkbox').each(function () {
                $(this).prop('checked',false);
            });
        }
    });
});

/* 神奇递归法 */   
function pad2(num, n) {   
if ((num + "").length >= n) return num;   
return pad2("0" + num, n);   
}

/**
 * [mytable description]
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 * tbname：初始化table的id；  
 * tbmkey：一般是数据库表的主键；   
 * tbmethod：提交的方式：get、post；  
 * tbdata：提交的数据；    
 * tburl：提交的网址；  
 * tbinfor：表结构数据，固定格式：  
 * [ 
 *  { fileName : 表头名 , fileCont : '对应的数据库字段' , fileFun : '自定义td' } , 
 *  { fileName : 表头名 , fileCont : '对应的数据库字段' , fileFun : '自定义td' } , 
 *  { ... } 
 * ]
 */
function mytable(obj){
    $("#"+tbname).html("正在加载表格。。。");

    var tbname   = obj['tbname'];
    var tbmethod = obj['tbmethod'];
    var tbdata   = obj['tbdata'];
    var tbinfor  = obj['tbinfor'];
    var tburl    = obj['tburl'];
    var tbmkey   = obj['tbmkey'];

    var keyname = [];//表头
    var key     = [];//表头对应数据
    var keyfun  = [];//方法
    var tdtext  = "";



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

    tdtext += newThead(keyname);
    $.ajax({
        type    : tbmethod,
        data    : tbdata ,
        url     : tburl  ,
        success : function(msg){

                var idnum = 15;
                if(msg['pageindex']){
                    idnum = msg['pageindex']
                }
                if(msg['page']){
                    $(".pagediv").html("<p>每页："+idnum+" 总共 "+msg['count']+" 条记录</p>"+msg['page']);//分页显示、总记录
                }
                // $("#"+tbname).prepend("<caption></caption>");//

                var e    = msg['list'];//获取json
                //获取第几页
                var inum = $(".pagediv").find(".current").text();
                if(inum == ''){
                    var inum = '1';
                }

                tdtext   += "<tbody>";


                for(var i in e){
                    //计算序号
                    var checkboxid = (parseInt(inum)-1)*idnum+(parseInt(i)+1);

                    tdtext += "<tr>";

                    //遍历序号 保持三位数pad2(checkboxid,3)
                    tdtext += "<td> <input type='checkbox' value='"+e[i][tbmkey]+"'> "+pad2(checkboxid,3)+"</td>";

                    //遍历数据
                    for(var j in key){
                        if(keyfun[j] != undefined){
                            tdtext +=keyfun[j](e[i][key[j]],e[i][tbmkey]); 
                        }else{
                            tdtext +="<td>"+e[i][key[j]]+"</td>";                            
                        }
                    }
                    tdtext +="</tr>";
                }

                tdtext += "</tbody>";
            $("#"+tbname).html(tdtext);
        }
    });
}


/* 生成<thead> */
function newThead(keyname){
    var initxt   = "<thead><tr>";
    initxt += "<th style='width:80px'><input type='checkbox' id='keyall'> 序号</th>";
    for(var i in keyname){
        initxt += "<th> "+keyname[i]+" </th>";
    }  

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

html引入(先引入jquery)

<script src="jquery-1.12.4.min.js" />
<script src='mytable-0.3.js' />

例子：

mytable.html

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

    <script src="jquery-1.12.4.min.js" />
    <script src="mytable-0.3.js" />
    <script>
    $(function(){
        mytable({
            tbname   : "mytable",
            tbmkey   : "id",
            tbdata   : "page=1",
            tbmethod : "get",
            tburl    : "test.php",
            tbinfor  : [{
                fileName:'姓名',
                fileCont:'name'
            },{
                fileName:'性别',
                fileCont:'sex'
            },{
                fileName:'年龄',
                fileCont:'age',
                fileFun:setTD
            },],
        });
    });
    //value:显示的数据
    //index:主键（=tbmkey）
    function setTD(value,index){
        return "<td title='他的id是"+index+"'>"+value+"</td>";
    }
    </script>
</body>
</html>

---

结果