mytable0.2（小优化）

来源：互联网发布：视频编辑专家软件编辑：程序博客网时间：2024/06/05 07:03

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>

这里写图片描述

阅读全文

0 0