网站建设最基础是什么推一手新闻发稿平台
本文关键讲解了怎样做到快捷填充单元格 ,原文中根据实例编码详细介绍的特别详尽,对我们的培训或是工作中具备一定的参照学习培训使用价值,必须的朋友下边伴随着云南仟龙Mark来一起学习学吧
在最开始通过自学 Web 开发设计的情况下,那时候沒有所说的 DIV/CSS 布局,一概 Table 布局的天地。那时候有一个难题就来了,怎样补齐宫格空白的单元格呢?——这也是我还在弄企业商品页头疼的难题。由于我并不是学程序流程出生的,遇到这略带算法的难题,就无可奈何了,呵呵呵。顺便说说,还记得分页查询的算法还瞎折腾了我一下呢。
说白了宫格,就是表格,3 行x 4 列 = 共12 单元格。假如仅有 10 个商品,就只有添充表格 10 个单元格,其他的为空白。尽管空白,但也需要3D渲染 原素,要不然 table 会看上去会走形。写死当然可以,但难题 table 全是历经 ASP 动态性3D渲染的。因此怎么计算,如何该表明空白 td 便是个难题。我那时候想想好多个方式 ,回忆起来很自然很并不是有效,总而言之全是死马当活马医……能表明就可以了……呵呵呵。
之后到 DIV/CSS 时期,Table 遭弃用。因此该算法也没关注了。——再之后一次新项目中,发觉 table 布局依然可用的,因此就揣摩了一下这小问题。用 JS 实时控制的源代码以下:
/*** @class renderTable* 输入一个数组 和 列数,生成一个表格 table 的 markup。* @param {Array} list* @param {Number} cols* @param {Function} getValue*/
define(function(require, exports, module) {module.exports = function (list, cols, getValue){this.list = list;this.cols = cols || 5;this.getValue = getValue || this.getValue;}module.exports.prototype = (new function(){this.render = function(list){list = list || this.list;var len = list.length ;var cols = this.cols;// 位数var rows;var remainder = len % cols;var htmls = [];rows = len / remainder;if(remainder == 0){ // 可整除 无余数 直接处理list.forEach(addTr.bind({cols : cols,htmls: htmls,getValue : this.getValue}));}else{ // 处理余数部分var remainnerArr = list.splice(list.length - remainder);list.forEach(addTr.bind({cols : cols,htmls: htmls,getValue : this.getValue}));// 填空位var emptyArr = new Array(cols - remainnerArr.length);emptyArr = emptyArr.join('empty');emptyArr = emptyArr.split('empty');// 余数部分 + 空位remainnerArr = remainnerArr.concat(emptyArr);if(remainnerArr.length != cols){throw '最后一行长度错误!长度应该为' + cols;}remainnerArr.forEach(addTr.bind({cols : cols,htmls: htmls,getValue : this.getValue}));}<http://www.qlyl1688.com/helps/zjynql.html> return addTable(htmls.join(''));}/*** 默认的获取显示值的函数。一般要覆盖该函数。* @param {Mixed}* @return {String}*/this.getValue = function(data){return data;}/*** 为每个值加个 <td></td>。若满一行加一个 </tr></tr>* @param {Mixed} item* @param {Number} i* @param {Array} arr*/function addTr(item, i, arr){var html = '<td>' + this.getValue(item) + '</td>';if(i == 0){html = '<tr>' + html;}else if((i + 1) % this.cols == 0 && i != 0){html += '</tr><tr>';}else if(i == arr.length){html += '</tr>';}this.htmls.push(html);}/**** @param {String} html*/function addTable(html){return '<table>' + html + '</table>';// var table = document.createElement('table');// table.innerHTML = html;// table.border="1";// document.body.appendChild(table);}});
});
大大们可能觉得这可是一闪而过就有思路的问题……但我那时毕竟是在转行……稍有点“技术含量”的问题都成了我的拦路虎……
2019-5-18 JSTL 的方式:
<%// 空白单元格补全String tds = ""; int maxTds = 9;List<?> list = (List<?>)request.getAttribute("list");for(int i = 0; i < (maxTds - list.size()); i++ ) {tds += "<td></td>";}request.setAttribute("tds", tds);
%><table><tr><c:foreach items="${list}" var="item"><td><h3>${item.name}----${totalCount}</h3><p></p><div></div></td><c:if test="${((currentIndex + 1) % 3) == 0}"></tr><tr></c:if><c:if test="${((currentIndex + 1) == totalCount) && (totalCount != 9)}">${tds}</c:if></c:foreach></tr></table>
到此这篇关于怎样做到快捷填充单元格的文章就介绍到这了,咱们下期见啦,奥里给!!