<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> .div-01,#tbList { border: 1px solid #0094ff; width: 260px; margin: 10px auto; border-collapse: collapse; text-align: center; font-family:'Microsoft YaHei'; font-size:xx-small; } #tbList { width: 262px; } #foodNameText { width: 80px; } #tbList td { border: 1px solid #0094ff; text-align:center; } #trTitle { background-color: #0094ff; font-weight: bolder; } #textinput1 { width:30px; } </style> <!--<script src="jq/jquery-1.9.1.js"></script>--> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!-- ligerui对话框引入 --> <!-- <script src="ligerui/js/core/base.js"></script> <script src="ligerui/js/plugins/ligerDialog.js"></script> <script src="ligerui/js/plugins/ligerDrag.js"></script> <link href="ligerui/skins/Aqua/css/ligerui-all.css" rel="stylesheet" />--> <!-- font-awesome样式引入 --> <!--<link href="font-awesome/docs/assets/css/font-awesome.css" rel="stylesheet" />--> <!-- 引入模板jquery.tmpl.min.js自定义模板内容 --> <!--<script src="jq/jquery.tmpl.min.js"></script>--> <script type="text/javascript"> /* * jQuery Templates Plugin 1.0.0pre * http://github.com/jquery/jquery-tmpl * Requires jQuery 1.4.2 * * Copyright Software Freedom Conservancy, Inc. * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */ (function (a) { var r = a.fn.domManip, d = "_tmplitem", q = /^[^<]*(<[wW]+>)[^>]*$|{{! /, b = {}, f = {}, e, p = { key: 0, data: {} }, i = 0, c = 0, l = []; function g(e, d, g, h) { var c = { data: h || (d ? d.data : {}), _wrap: d ? d._wrap : null, tmpl: null, parent: d || null, nodes: [], calls: u, nest: w, wrap: x, html: v, update: t }; e && a.extend(c, e, { nodes: [], parent: d }); if (g) { c.tmpl = g; c._ctnt = c._ctnt || c.tmpl(a, c); c.key = ++i; (l.length ? f : b)[i] = c } return c } a.each({ appendTo: "append", prependTo: "prepend", insertBefore: "before", insertAfter: "after", replaceAll: "replaceWith" }, function (f, d) { a.fn[f] = function (n) { var g = [], i = a(n), k, h, m, l, j = this.length === 1 && this[0].parentNode; e = b || {}; if (j && j.nodeType === 11 && j.childNodes.length === 1 && i.length === 1) { i[d](this[0]); g = this } else { for (h = 0, m = i.length; h < m; h++) { c = h; k = (h > 0 ? this.clone(true) : this).get(); a(i[h])[d](k); g = g.concat(k) } c = 0; g = this.pushStack(g, f, i.selector) } l = e; e = null; a.tmpl.complete(l); return g } }); a.fn.extend({ tmpl: function (d, c, b) { return a.tmpl(this[0], d, c, b) }, tmplItem: function () { return a.tmplItem(this[0]) }, template: function (b) { return a.template(b, this[0]) }, domManip: function (d, m, k) { if (d[0] && a.isArray(d[0])) { var g = a.makeArray(arguments), h = d[0], j = h.length, i = 0, f; while (i < j && !(f = a.data(h[i++], "tmplItem"))); if (f && c) g[2] = function (b) { a.tmpl.afterManip(this, b, k) }; r.apply(this, g) } else r.apply(this, arguments); c = 0; !e && a.tmpl.complete(b); return this } }); a.extend({ tmpl: function (d, h, e, c) { var i, k = !c; if (k) { c = p; d = a.template[d] || a.template(null, d); f = {} } else if (!d) { d = c.tmpl; b[c.key] = c; c.nodes = []; c.wrapped && n(c, c.wrapped); return a(j(c, null, c.tmpl(a, c))) } if (!d) return []; if (typeof h === "function") h = h.call(c || {}); e && e.wrapped && n(e, e.wrapped); i = a.isArray(h) ? a.map(h, function (a) { return a ? g(e, c, d, a) : null }) : [g(e, c, d, h)]; return k ? a(j(c, null, i)) : i }, tmplItem: function (b) { var c; if (b instanceof a) b = b[0]; while (b && b.nodeType === 1 && !(c = a.data(b, "tmplItem")) && (b = b.parentNode)); return c || p }, template: function (c, b) { if (b) { if (typeof b === "string") b = o(b); else if (b instanceof a) b = b[0] || {}; if (b.nodeType) b = a.data(b, "tmpl") || a.data(b, "tmpl", o(b.innerHTML)); return typeof c === "string" ? (a.template[c] = b) : b } return c ? typeof c !== "string" ? a.template(null, c) : a.template[c] || a.template(null, q.test(c) ? c : a(c)) : null }, encode: function (a) { return ("" + a).split("<").join("<").split(">").join(">").split('"').join(""").split("'").join("'") } }); a.extend(a.tmpl, { tag: { tmpl: { _default: { $2: "null" }, open: "if($notnull_1){_=_.concat($item.nest($1,$2));}" }, wrap: { _default: { $2: "null" }, open: "$item.calls(_,$1,$2);_=[];", close: "call=$item.calls();_=call._.concat($item.wrap(call,_));" }, each: { _default: { $2: "$index, $value" }, open: "if($notnull_1){$.each($1a,function($2){with(this){", close: "}});}" }, "if": { open: "if(($notnull_1) && $1a){", close: "}" }, "else": { _default: { $1: "true" }, open: "}else if(($notnull_1) && $1a){" }, html: { open: "if($notnull_1){_.push($1a);}" }, "=": { _default: { $1: "$data" }, open: "if($notnull_1){_.push($.encode($1a));}" }, "!": { open: "" } }, complete: function () { b = {} }, afterManip: function (f, b, d) { var e = b.nodeType === 11 ? a.makeArray(b.childNodes) : b.nodeType === 1 ? [b] : []; d.call(f, b); m(e); c++ } }); function j(e, g, f) { var b, c = f ? a.map(f, function (a) { return typeof a === "string" ? e.key ? a.replace(/(<w+)(?=[s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + d + '="' + e.key + '" $2') : a : j(a, e, a._ctnt) }) : e; if (g) return c; c = c.join(""); c.replace(/^s*([^<s][^<]*)?(<[wW]+>)([^>]*[^>s])?s*$/, function (f, c, e, d) { b = a(e).get(); m(b); if (c) b = k(c).concat(b); if (d) b = b.concat(k(d)) }); return b ? b : k(c) } function k(c) { var b = document.createElement("div"); b.innerHTML = c; return a.makeArray(b.childNodes) } function o(b) { return new Function("jQuery", "$item", "var $=jQuery,call,_=[],$data=$item.data;with($data){_.push('" + a.trim(b).replace(/([\'])/g, "\$1").replace(/[ ]/g, " ").replace(/${([^}]*)}/g, "{{= $1}}").replace(/{{(/?)(w+|.)(?:(((?:[^}]|}(?!}))*?)?))?(?:s+(.*?)?)?((((?:[^}]|}(?!}))*?)))?s*}}/g, function (m, l, k, d, b, c, e) { var j = a.tmpl.tag[k], i, f, g; if (!j) throw "Template command not found: " + k; i = j._default || []; if (c && !/w$/.test(b)) { b += c; c = "" } if (b) { b = h(b); e = e ? "," + h(e) + ")" : c ? ")" : ""; f = c ? b.indexOf(".") > -1 ? b + h(c) : "(" + b + ").call($item" + e : b; g = c ? f : "(typeof(" + b + ")==='function'?(" + b + ").call($item):(" + b + "))" } else g = f = i.$1 || "null"; d = h(d); return "');" + j[l ? "close" : "open"].split("$notnull_1").join(b ? "typeof(" + b + ")!=='undefined' && (" + b + ")!=null" : "true").split("$1a").join(g).split("$1").join(f).split("$2").join(d ? d.replace(/s*([^(]+)s*(((.*?)))?/g, function (d, c, b, a) { a = a ? "," + a + ")" : b ? ")" : ""; return a ? "(" + c + ").call($item" + a : d }) : i.$2 || "") + "_.push('" }) + "');}return _;") } function n(c, b) { c._wrap = j(c, true, a.isArray(b) ? b : [q.test(b) ? b : a(b).html()]).join("") } function h(a) { return a ? a.replace(/\'/g, "'").replace(/\\/g, "\") : null } function s(b) { var a = document.createElement("div"); a.appendChild(b.cloneNode(true)); return a.innerHTML } function m(o) { var n = "_" + c, k, j, l = {}, e, p, h; for (e = 0, p = o.length; e < p; e++) { if ((k = o[e]).nodeType !== 1) continue; j = k.getElementsByTagName("*"); for (h = j.length - 1; h >= 0; h--) m(j[h]); m(k) } function m(j) { var p, h = j, k, e, m; if (m = j.getAttribute(d)) { while (h.parentNode && (h = h.parentNode).nodeType === 1 && !(p = h.getAttribute(d))); if (p !== m) { h = h.parentNode ? h.nodeType === 11 ? 0 : h.getAttribute(d) || 0 : 0; if (!(e = b[m])) { e = f[m]; e = g(e, b[h] || f[h]); e.key = ++i; b[i] = e } c && o(m) } j.removeAttribute(d) } else if (c && (e = a.data(j, "tmplItem"))) { o(e.key); b[e.key] = e; h = a.data(j.parentNode, "tmplItem"); h = h ? h.key : 0 } if (e) { k = e; while (k && k.key != h) { k.nodes.push(j); k = k.parent } delete e._ctnt; delete e._wrap; a.data(j, "tmplItem", e) } function o(a) { a = a + n; e = l[a] = l[a] || g(e, b[e.parent.key + n] || e.parent) } } } function u(a, d, c, b) { if (!a) return l.pop(); l.push({ _: a, tmpl: d, item: this, data: c, options: b }) } function w(d, c, b) { return a.tmpl(a.template(d), c, b, this) } function x(b, d) { var c = b.options || {}; c.wrapped = d; return a.tmpl(a.template(b.tmpl), b.data, c, b.item) } function v(d, c) { var b = this._wrap; return a.map(a(a.isArray(b) ? b.join("") : b).filter(d || "*"), function (a) { return c ? a.innerText || a.textContent : a.outerHTML || s(a) }) } function t() { var b = this.nodes; a.tmpl(null, null, null, this).insertBefore(b[0]); a(b).remove() } })(jQuery) </script> <script type="text/x-jquery-tmpl" id="tempms"> <tr> <td><label>${foodIndex}</label><input type="checkbox" class="ck01"/></td> <td>${foodName}</td> <td><a href="#" class="delc01" onclick="Deletetr(this);">删除</a> <a href="#">编辑</a></td> </tr> </script> <script type="text/javascript"> //准备一个数组 var foodArr = [{ "foodIndex": 0, "foodName": "老干妈" }]; //var obj2 = new Object(); //obj2.foodIndex = 0; //obj2.foodName = "老干妈"; //var foodArr = [obj2]; //给数组新增元素 var nowPage = 1;//当前页 var totalPages = 1;//页总数 var pageCount = 5;//页容量 //加菜 function addfoodname(event) { //定义一个自动标识列 var lastFoodeindex = 0; if (foodArr.length == 0) { lastFoodeindex = -1; } else { lastFoodeindex = foodArr[foodArr.length - 1].foodIndex; } //var lastFoodeindex = foodArr[foodArr.length - 1].foodIndex; //加一个对象标识列++ lastFoodeindex++; //alert(event.data.foo.val()); if (Checkiscontain(event.data.foo.val())) return; //加进数组 foodArr[foodArr.length] = { "foodIndex": lastFoodeindex, "foodName": event.data.foo.val() }; //判断当前页tr数量 是否等于页容量 if ($("#tbList tr:gt(0)").length == pageCount) { totalPages = Math.ceil(foodArr.length / pageCount); $("#totalPagesSpan").html(totalPages); } else { //获取最后一个数组对象 //把最后一个数组对象转成jq对象appendto表格 $("#tempms").tmpl(foodArr[foodArr.length - 1]).appendTo($("#tbList")); } } //判断是否存在这个菜名，是就是存在，否就是不存在 function Checkiscontain(foodname) { for (var i = 0; i < foodArr.length; i++) { if (foodArr[i].foodName == foodname) { //$.ligerDialog.error("重复菜名"); alert("重复菜名"); return true; } } return false; } //单删 function Deletetr(aobj) { //alert($(aobj).parents("tr").find("label:eq(0)").html()); $(aobj).parents("tr").remove(); var arrindex = parseInt($(aobj).parents("tr").find("label:eq(0)").html()); //定向删除数组元素的方法 for (var i = arrindex; i < foodArr.length - 1; i++) { foodArr[i] = foodArr[i + 1]; //序号代表了元素在数组中的下标，当定向删除时候，元素前移，需要保证下标和序号一致，需要序号-- foodArr[i].foodIndex--; } foodArr.length--; } //获取当页信息开始索引结束索引 function getInfo() { //获取索引开始 var indexStart = (nowPage - 1) * pageCount; //索引结束 var indexEnd = indexStart + pageCount - 1; //判断索引的结束值是否越级 indexEnd = indexEnd >= foodArr.length ? (foodArr.length - 1) : indexEnd; //来一个新数组接受选定的数组索引之间的对象 var newarr = []; for (var i = indexStart; i <= indexEnd; i++) { newarr[newarr.length] = foodArr[i]; } //返回一个数组 return newarr; } //翻页跳页turncount为跳转的页数，正负 function trunPage(event) { var fanyenum = 0; //判断传递过来的是上下页的1或者-1还是inputtext的文本值 if (isNaN(event.data.foo)) fanyenum = parseInt(event.data.foo.val()); else fanyenum = event.data.foo; nowPage += fanyenum; if (nowPage > totalPages) { nowPage = totalPages; alert("最后一页"); return; } if (nowPage < 1) { nowPage = 1; alert("第一页"); return; } //刷新当前页显示 $("#nowPageSpan").html(nowPage); //清空页面所有tr $("#tbList tr:gt(0)").remove(); //读取需要页数据从数组中 var newarr = getInfo(); //读取模板传入数据，生产tr，加到table $("#tempms").tmpl(newarr).appendTo("#tbList"); } ///////// $(function () { $("#itest").mouseover(function () { $(this).addClass("icon-large"); }) $("#itest").mouseleave(function () { //$(this).removeClass("icon-4x"); $(this).removeClass("icon-large"); }) //读取原始数据，生成tr加载到table中 $("#tempms").tmpl(foodArr).appendTo($("#tbList")); //绑定事件第二个参数为传递的参数，会通过event接受 $("#btnAddFood").bind("click", { foo: $("#foodNameText") }, addfoodname) //全选全取消 $("#ckall").bind("click", function () { $(".ck01").prop("checked", this.checked); }) //删除选中 $("#del01").click(function () { //获得所有选中ck var $ckobs = $(".ck01:checked"); //遍历选中ck表偷懒，该遍历还是得遍历 for (var i = 0; i < $ckobs.length; i++) { //得到删除的标示，就是ck前面一个元素的值这里的-I是精髓，因为虽然数组下标变了，可是取到的标示还没有变动这里要在取到的时候，减去之前已经删除的个数，从而矫正标识列的值和数组下标一致 var indexn = parseInt($($ckobs[i]).prev().html()) - i; //以下为定向删除数组元素 for (var j = indexn; j < foodArr.length - 1; j++) { foodArr[j] = foodArr[j + 1]; foodArr[j].foodIndex--; } foodArr.length--; } //移除 //alert($ckobs.parent().parent().html()); $ckobs.parent().parent().remove(); }) //上翻页 $("#btnLastPage").click({ foo: -1 }, trunPage); //下翻页 $("#btnNextPage").click({ foo: 1 }, trunPage); //跳转页 $("#btnGo").click({ foo: $("#textinput1") }, trunPage); //点菜数 }) </script> </head> <body> <div class="div-01"> <i class="icon-coffee" id="itest"></i> <input type="button" value="新增菜名" id="btnAddFood" /> <input type="text" id="foodNameText" /> </div> <div class="div-01"> <input type="button" value="上一页" id="btnLastPage" /> <span id="nowPageSpan">1</span>/<span id="totalPagesSpan">1</span> <input type="button" value="下一页" id="btnNextPage" /> <input type="button" value="往后翻n页" id="btnGo" /> <input type="text" value="1" id="textinput1" /> </div> <table id="tbList"> <tr id="trTitle"> <td>序号</td> <td>菜名</td> <td>编辑</td> </tr> </table> <div class="div-01"> <input type="checkbox" id="ckall"/><label for="ckall">全选</label> <a href="#" id="del01">删除选中</a> </div> </body> </html>
1/1
| 序号 | 菜名 | 编辑 |