什么是pom? pom作为项目对象模型。通过xml表示maven项目,使用pom.xml来实现。主要描述了项目:包括配置文件;开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的url,项目的依赖性,以及其他所有的项目相关因素。 快速察看: xml 代码 <project> <modelVersion>4.0.0</modelVersion> <groupId>...</groupId> <artifactId>...</artifactId>…
April 15, 2018
jQuery:实现简单table 排序, table sort
方法:
引入库:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript" src="https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>
HTML:
<table> <tr> <th id="facility_header">Facility name</th> <th>Phone #</th> <th id="city_header">City</th> <th>Speciality</th> </tr> <tr> <td>CCC</td> <td>00001111</td> <td>Amsterdam</td> <td>GGG</td> </tr> <tr> <td>JJJ</td> <td>55544444</td> <td>London</td> <td>MMM</td> </tr> <tr> <td>AAA</td> <td>33332222</td> <td>Paris</td> <td>RRR</td> </tr> </table>
CSS:
td, th { border: 1px solid #111; padding: 6px; } th { font-weight: 700; }
JAVASCRIPT:
var table = $('table'); $('#facility_header, #city_header') .wrapInner('<span title="sort this column"/>') .each(function(){ var th = $(this), thIndex = th.index(), inverse = false; th.click(function(){ table.find('td').filter(function(){ return $(this).index() === thIndex; }).sortElements(function(a, b){ return $.text([a]) > $.text([b]) ? inverse ? -1 : 1 : inverse ? 1 : -1; }, function(){ // parentNode is the element we want to move return this.parentNode; }); inverse = !inverse; }); });
以上 js 不能很好的判断文字和数字混合的排序,以下是改进版:
// sort table header, need sortElements (jQuery.fn.sortElements) dependency var $sorted_header = $('.sorted_header'), $no_sorted_class = '.sorted_header, .no_sorted_header'; if($sorted_header.size()) { $sorted_header .wrapInner('<span title="sort this column"/>') .each(function(){ var th = $(this), thIndex = th.index(), inverse = false; th.click(function(){ $(this).closest('table').find('td:not('+$no_sorted_class+')').filter(function(){ return $(this).index() === thIndex; }) .sortElements( function(a, b){ var $a = $.text([a]), $b = $.text([b]); if($a.indexOf('/')>0) $a = $.trim($a.split('/')[0]); if($b.indexOf('/')>0) $b = $.trim($b.split('/')[0]); if($.isNumeric($a) && $.isNumeric($b)) { $a = parseFloat($a); $b = parseFloat($b); } return $a > $b ? inverse ? -1 : 1 : inverse ? 1 : -1; }, function(){ return this.parentNode; } // parentNode is the element we want to move ); inverse = !inverse; }); }); }
如果希望有更多分隔符,可以参考:
data.split(/[.,\/ -]/)
2. indexOf regular expressions
String.prototype.regexIndexOf = function(regex, startpos) { var indexOf = this.substring(startpos || 0).search(regex); return (indexOf >= 0) ? (indexOf + (startpos || 0)) : indexOf; } String.prototype.regexLastIndexOf = function(regex, startpos) { regex = (regex.global) ? regex : new RegExp(regex.source, "g" + (regex.ignoreCase ? "i" : "") + (regex.multiLine ? "m" : "")); if(typeof (startpos) == "undefined") { startpos = this.length; } else if(startpos < 0) { startpos = 0; } var stringToWorkWith = this.substring(0, startpos + 1); var lastIndexOf = -1; var nextStop = 0; while((result = regex.exec(stringToWorkWith)) != null) { lastIndexOf = result.index; regex.lastIndex = ++nextStop; } return lastIndexOf; }
