mytable-0.3
来源：互联网 发布：如何投诉淘宝平台小二 编辑：程序博客网 时间：2024/05/16 14:23
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>结果
阅读全文
0 0
- mytable-0.3
- MyTable 类
- 四、创建一个表mytable
- 基础java项目５（mytable）
- [20160407] MyTable 0.1 Beta Released on GitHub
- s1(java)项目实战（固定资产管理）（tools_ Mytable ）
- UPDATE mytable SET code = REPLACE(code, 'Nt, 'Jt)
- 自己做个js表格插件呗--mytable v0.1
- 修复数据表(mysql repair table-Can’t open file: ‘[Table]mytable.MYI’.)
- 修复数据表(mysql repair table-Can’t open file: ‘[Table]mytable.MYI’.)
- 修复数据表(mysql repair table-Can’t open file: ‘[Table]mytable.MYI’.)
- .0.3
- 0.3+0.3+0.3=？
- SuperColor 0.3
- v0.0.3
- p2psim-0.3
- websecurify 0.3
- linux3.0.3
- spring cloud config 之svn仓库配置与动态刷新（服务端）
- 计算字符串最后一个单词的长度，单词以空格隔开。
- sql注入攻击
- ros tf
- Vue实践--v-model在组件中的应用
- mytable-0.3
- notepad: 怎么在notepad里面，将字符串替换成换行
- JPA的一些注解
- python中的encode()和decode()函数
- 极光征文 | 写写文章就能赢 Filco，岂不美滋滋
- 蓝桥杯 算法训练 数字三角形
- Swift中的协议-(协议基础-3.0)
- 极光征文 | 参赛附录说明，帮你确立选题
- linux 压缩/解压缩文件的命令
