最近一个同事需要写一个伪分业显示我也写了一个demo，代码如下：
index.js
body{ background-color: yellowgreen; } #myteb{ width: 100%; background-color: blue; border: 2px solid red; } #myteb th{ background-color: brown; } #myteb td{ height: auto; width:11%; border: 2px solid black; background-color: yellowgreen; } #myteb td input{ width:100%; border: 0px solid black; background-color: blue; } div ul{ width: 100%; } div ul li{ list-style-type: none; float: left; } div input,div select{ border:2px solid cyan ; background-color:green; }
index.js
//记录当前选中数据的数量 var ids = ""; var currentSelectNum = 0; var selectids = []; var currentusersize = 2; var usersize = 0; var pageNumber = 1; var pageSize = 2; var countPage = 1; var headData = { checkBox: "全选", id: "ID", name: "用户名", age: "年龄", email: "email", quesnums: "提问数", askAndAdopt: "回答", control: "操作" }; var bodyData = [{ id: "1", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "8", }, { id: "2", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "9", }, { id: "3", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "10", }, { id: "4", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "11", }, { id: "5", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "12", }, { id: "6", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "0", }, { id: "7", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "1", }, { id: "8", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "2", }, { id: "9", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "3", }, { id: "10", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "4", }, { id: "11", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "5", }, { id: "12", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "6", }, { id: "13", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "7", }, { id: "14", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "8", }, { id: "15", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "9", }, { id: "16", name: "张三", age: "13", email: "123@qq.com", quesnums: "12", askAndAdopt: "10", }, { id: "17", name: "张四", age: "14", email: "123@qq.com", quesnums: "12", askAndAdopt: "8", }, { id: "18", name: "张四", age: "15", email: "123@qq.com", quesnums: "12", askAndAdopt: "8", } ] $(function() { createTable(headData, bodyData); // 从隐藏表单中获取 当前列表显示的数据数量 }); function createTable(headData, bodyData) { $("#myteb").empty(); countPage = (bodyData.length / pageSize).toFixed(0); var table = $("<table class='table table-bordered'>"); // 创建表头 createHead(table, headData) // 创建数据行 createBody(table, headData, bodyData); $("#myteb").prepend(table); getpageDesc(); } function createBody(table, headData, bodyData) { for(var userIndex in bodyData) { if(userIndex >= usersize && userIndex < (usersize + pageSize)) { table.append(createTr(headData, bodyData[userIndex])); } } } // 创建表头 function createHead(table, headData) { var tr = $("<tr>"); for(var par in headData) { var th = $("<th>"); if(par == "checkBox") { th .append($("<input id='chackAll' type='checkBox' οnclick='checkAll(event)'/>")) th.append($("<label></label>").text(headData[par])); } else { th.text(headData[par]); } tr.append(th); } table.append(tr); } // 创建表体中的数据行 function createTr(headData, user) { // 创建tr标签 var tr = $("<tr id='tr" + user.id + "'></tr>"); for(var par in headData) { if(par == "checkBox") { // 创建每行第一列的复选框 var checkTd = $("<td ><input id='" + user.id + "' class='check' type='checkBox' οnclick='checkOne(event)'/></td>"); // 将复选框加入到行中 tr.append(checkTd); } else if(par == "control") { // 创建每行第一列的复选框 var controlTd = $("<td><input class='btn btn-info btn-xs' type='button' value='修改' οnclick='editeUser(" + user.id + ")'/> <input class='btn btn-danger btn-xs' type='button' value='删除' οnclick='deleteByGet(" + user.id + ")'/></td>"); // 将复选框加入到行中 tr.append(controlTd); } else { var td = $("<td>"); if(user.hasOwnProperty(par)) { td.text(user[par]); } else { td.text(""); } tr.append(td); } } // 创建操作列 return tr; } function goToPage(pagesize) { $("#myteb").empty(); pageNumber = pagesize; usersize = (Number(pageNumber) * Number(pageSize)).toFixed(0) - pageSize; countPage = Math.ceil(bodyData.length / pageSize); createTable(headData, bodyData); getpageDesc(); } function prePage() { if(pageNumber > 1) { pageNumber--; goToPage(pageNumber); } else { alert("已经是首页没有上一页"); } getpageDesc(); } function nextPage() { countPage = Math.ceil(bodyData.length / pageSize); if(pageNumber < countPage) { pageNumber++; goToPage(pageNumber); } else { alert("已经是末没有下一页"); } getpageDesc(); } function lastPage() { countPage = Math.ceil(bodyData.length / pageSize); goToPage(countPage); getpageDesc(); } function getpageDesc() { $("#pageDesc").text("第" + pageNumber + "页/共" + Math.ceil(countPage) + "页"); } function changepageNumberNum() { pageSize = Math.ceil($("#pageSize").val()); countPage = Math.ceil(bodyData.length / pageSize); $("#myteb").empty(); goToPage(1); getpageDesc(); } function checkOne(event) { // 点击某个checkBox var b = event.target.checked; // 如果是选中状态 则加1 如果是取消状态 则减1 if(b) { currentSelectNum++; } else { currentSelectNum--; } // 比较选中的个数和总 如果相等，则全选置为选中状态 否则取消选中 if(usersize == currentSelectNum && usersize != 0) { $("#chackAll").prop("checked", true); } else { $("#chackAll").prop("checked", false); } } function checkAll(event) { $(".check").each(function() { // 将全选按钮的状态 赋值给 列表中所有的checkBox this.checked = event.target.checked; if(event.target.checked) { currentSelectNum = usersize; } }); //getIds(); } function editeUser(id) { //获取选中行节点 var Tr = $("#tr" + id); Tr.empty(); for(var par in headData) { var td = $("<td>"); if(par == "checkBox") { td.append($("<input id='chackAll' type='checkBox' οnclick='checkAll(event)'/>")) td.append($("<label></label>")); } else if(par == "control") { td.append($("<input id='chackAll' type='button' value='确定' οnclick='makeSure(" + id + ")'/>")); td.append($("<input id='chackAll' type='button' value='取消' οnclick='cancel(" + id + ")'/>")); } else { td.append($("<input id='" + par + "_" + id + "' type='text' value='" +getDatabyId(id)[par]+ "'/>")); } Tr.append(td); } } //删除本行 function deleteByGet(id) { deleteusersUID(id); //刷新 createTable(headData, bodyData); } //删除id=uid的元素 function deleteusersUID(uid) { for(var i = 0; i < bodyData.length; i++) { if(bodyData[i].id == uid) { bodyData.splice(i, 1); break; } } } function deleteAll() { // 找到所有选中的checkbox的数据的id $(".check:checked").each(function() { deleteusersUID($(this).attr("id")); }); createTable(headData, bodyData); } function getDatabyId(Id) { for(var i = 0; i < bodyData.length; i++) { if(bodyData[i].id == Id) { return bodyData[i]; } } } function cancel(Id) { createTable(headData, bodyData); } function makeSure(Id) { alert(Id); var data={}; data.id=Id; data.name=$("#name_"+Id).val(); data.age=$("#age_"+Id).val(); data.email=$("#email_"+Id).val(); data.quesnums=$("#quesnums_"+Id).val(); data.askAndAdopt=$("#askAndAdopt_"+Id).val(); xiugaidata(Id,data); createTable(headData, bodyData); } function xiugaidata(Id,data){ for(var i = 0; i < bodyData.length; i++) { if(bodyData[i].id == Id) { bodyData.splice(i,1,data); } } }
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/index.css"> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript" src="js/index.js"></script> <title>index.html</title> </head> <body> <h1>表单</h1> <div> <input type="button" οnclick="deleteAll()" value="删除选中" /> <table id="myteb"> </table> <ul class="pagination col-sm-3" style="margin:0px"> <li><input id="first" type="button" value="首页" οnclick="goToPage(1)" /></li> <li><input id="pre" type="button" value="上一页" οnclick="prePage()" /></li> <li><input id="next" type="button" value="下一页" οnclick="nextPage()" /></li> <li><input id="last" type="button" value="尾页" οnclick="lastPage()" /></li> <select id="pageSize"οnchange="changepageNumberNum()"> <option value="2">2</option> <option value="5">5</option> <option value="10">10</option> <option value="20">20</option> </select>条/页 <label id="pageDesc">第0页/共0页</label> </ul> </div> </body> </html>
