`
hua04104
  • 浏览: 248700 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

前台排序

    博客分类:
  • js
阅读更多
<table id="tblSort" width="100%" border="0" cellspacing="1" cellpadding="2"
			align="center" bordercolordark="#DFDFFF" bordercolorlight="#003366"
			bgcolor="#B3C4DB">		
			<thead>
			<tr class="lc2" bgcolor="#809cbc">
				<td width="6%" height="18" align="center"></td>
				<td width="5%" align="center"><a href="#" onClick="chooseAll()">全选</a></td>
				<td width="10%" align="center" onclick="sortTable('tblSort',2)" style="cursor:pointer">编号</td>
				<td width="30%" align="center">标题</td>
				<td width="10%" align="center" onclick="sortTable('tblSort',4)" style="cursor:pointer">信件类别</td>
				<td width="10%" align="center" onclick="sortTable('tblSort',5)" style="cursor:pointer">问题发生地</td>
				<td width="10%" align="center" onclick="sortTable('tblSort',6)" style="cursor:pointer">初审情况</td>
				<td width="11%" align="center" onclick="sortTable('tblSort',7)" style="cursor:pointer">到达时间</td>
			</tr>
			</thead>			
			
			<tbody>
			<c:forEach var="letter" items="${requestScope.pm}">
			<tr class="lc2" bgcolor="#EEF4FF"
				onmouseover="this.bgColor='#EBEBEB';"
				onmouseout="this.bgColor='#EEF4FF';">
				<td width="6%" height="18" align="center"><img src="<%=path %>/images/lvdian.gif" width="16" height="15" title="正常办理"/></td>
				<td width="5%" align="center"><input type="checkbox" name="allchecked3" id="allchecked3" value="${letter.processFlow.id}"></td>
				<td width="10%" align="center">${ letter.identifier}</td>
				<td width="33%" align="center"><a href="<%=path %>/jsp/process/chushen.do?method=checkupInput&petitionLetterId=${letter.id }">${ letter.letterInformation.title}</a></td>
				<td width="10%" align="center">${ letter.letterInformation.letterCategory}</td>
				<td width="9%" align="center">${ letter.letterInformation.province}</td>
				<td width="10%" align="center">${ letter.processFlow.auditState}</td>
				<td width="9%" align="center">${ letter.letterInformation.date}</td>
			</tr>			
			
			</c:forEach>
			</tbody>
			<%
				if(list.size()<8){
					int j = 8-list.size();
					for(int i=0;i<j;i++){
			%>
			<tr class="lc2" bgcolor="#EEF4FF"
				onmouseover="this.bgColor='#EBEBEB';"
				onmouseout="this.bgColor='#EEF4FF';">
				<td width="6%" height="22" align="center"></td>
				<td width="5%" align="center"></td>
				<td width="10%" align="center"></td>
				<td width="33%" align="center"></td>
				<td width="10%" align="center"></td>
				<td width="9%" align="center"></td>
				<td width="10%" align="center"></td>
				<td width="9%" align="center"></td>
			</tr>
		    <%
					}
				}
			%>
			
		</table>

//转换器,将列的字段类型转换为可以排序的类型:String,int,float
            function convert(sValue, sDataType) {
                switch(sDataType) {
                    case "int":
                        return parseInt(sValue);
                    case "float":
                        return parseFloat(sValue);
                    case "date":
                        return new Date(Date.parse(sValue));
                    default:
                        return sValue.toString();
                
                }
            }
            
            //排序函数产生器,iCol表示列索引,sDataType表示该列的数据类型
            function generateCompareTRs(iCol, sDataType) {
        
                return  function compareTRs(oTR1, oTR2) {
                            var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
                            var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
        
                            if (vValue1 < vValue2) {
                                return -1;
                            } else if (vValue1 > vValue2) {
                                return 1;
                            } else {
                                return 0;
                            }
                        };
            }
            
            //排序方法
            function sortTable(sTableID, iCol, sDataType) {
                var oTable = document.getElementById(sTableID);
                var oTBody = oTable.tBodies[0];
                var colDataRows = oTBody.rows;
                var aTRs = new Array;
                
                //将所有列放入数组
                for (var i=0; i < colDataRows.length; i++) {
                    aTRs[i] = colDataRows[i];
                }
                 
                //判断最后一次排序的列是否与现在要进行排序的列相同,是的话,直接使用reverse()逆序
                if (oTable.sortCol == iCol) {
                    aTRs.reverse();
                } else {
                    //使用数组的sort方法,传进排序函数
                    aTRs.sort(generateCompareTRs(iCol, sDataType));
                }
        
                var oFragment = document.createDocumentFragment();
                for (var i=0; i < aTRs.length; i++) {
                    oFragment.appendChild(aTRs[i]);
                }
       
                oTBody.appendChild(oFragment);
                //记录最后一次排序的列索引
                oTable.sortCol = iCol;
            }

分享到:
评论

相关推荐

    重写Datatable.js,支持纯前台排序

    "重写Datatable.js,支持纯前台排序"这个项目聚焦于解决原生Datatable.js库在实现前台排序时遇到的兼容性和控制混乱问题。Datatable.js是一款广泛使用的JavaScript插件,用于创建动态、交互式的HTML表格,但随着项目...

    jquery flexigrid 支持前台排序

    **jQuery Flexigrid 前台排序实现详解** 在Web开发中,数据展示是一个重要的环节,而表格作为数据展示的常见形式,其排序功能尤为重要。jQuery Flexigrid是一款功能强大的表格插件,它提供了丰富的自定义选项和操作...

    GridView之精讲作品:可以前台排序,左右移动GridView中选中行的东西

    GridView之精讲作品:可以前台排序,左右移动GridView中选中行的东西 在这里有讲解: http://blog.csdn.net/cefriend/archive/2008/04/07/2256732.aspx

    基于Jquery的前台按表头排序

    "基于Jquery的前台按表头排序"是一种实现方式,它允许用户通过点击表格的列头来对数据进行升序或降序排序,而无需向服务器发送额外的请求。这种方式提高了页面的交互性和响应速度,尤其在数据量不大的情况下非常实用...

    基于Jquery的前台按表头排序table tr th

    在网页开发中,数据展示通常会使用到表格(table)元素,而为了提供更好的用户体验,我们经常需要实现表格数据的动态排序功能。本教程将详细讲解如何使用Jquery库实现前端表格(table)按表头(th)进行排序。Jquery...

    HkCms开源内容管理系统 v2.1.220220

    HkCms是一款免费开源内容...【新增】 新增模型字段支持前台排序选项 【新增】 新增插件、模板安装检测提示页 【新增】 支持手机模板绑定二级域名 【新增】 新增插件禁用时删除菜单 【新增】 TP 框架升级到 V6.0.12LTS

    深入浅出ExtJS第2版

    3.9.4 让EXT支持前台排序 52 3.10 后台排序 53 3.11 可编辑表格控件--EditorGrid 55 3.11.1 制作一个简单的EditorGrid 55 3.11.2 添加一行数据 56 3.11.3 保存修改结果 58 3.11.4 验证EditGrid中的数据 59 ...

    V56新特性培训_网络报表.ppt

    此外,还增加了表头的前台排序功能,便于快速整理数据。 在报表工具(分析表)-自由报表部分,V56引入了多项优化。例如,支持图表设置,用户可以自定义各种图表类型,包括直方图、饼图、折线图、仪表图等。这些图表...

    ecshop分类页筛选属性自定义排序插件

    本人在某宝花260元买的“ecshop分类页筛选属性自定义排序插件”,今日与同“ecshop商品详情页属性排序插件”一起奉上。 ECSHOP的分类列表页有一个“商品筛选”功能,可以...后台按什么顺序输入的,前台就按什么顺序排列

    嘉缘人才系统php 3.0 UTF8.rar

    25、修复 修改职位后前台排序不变化问题 29、修复 职位开启审核后,修改职位后职位状态存在的问题 27、修复 管理员管理页面火狐浏览器无法详细设置权限问题 28、修复 个人会员注册页面中文名称无法注册问题 29、...

    嘉缘人才系统PHP版 V3.0 UTF8.rar

    25、修复 修改职位后前台排序不变化问题 29、修复 职位开启审核后,修改职位后职位状态存在的问题 27、修复 管理员管理页面火狐浏览器无法详细设置权限问题 28、修复 个人会员注册页面中文名称无法注册问题 29、修复...

    Java实现拖拽列表项的排序功能

    们需要在后端处理拖拽事件,...理解这些原理后,无论是JavaFX还是Swing,甚至是其他平台的UI框架,都能灵活地实现拖拽排序功能。通过这个功能,我们可以提高用户的交互体验,让他们能更直观、便捷地调整列表项的顺序。

    Ext 开发指南 学习资料

    2.7.5. 谣言说ext不支持前台排序 2.8. 爱生活,EditorGrid。 2.8.1. 旋动舞步,看我们怎么把这个EditorGrid炫出来。 2.8.2. 添加一行,再把它踢掉 2.8.3. 一切就绪,你可以按保存按钮了。 2.8.4. 天马行空,保证提交...

    GridView正反排序(C#)

    前台代码定义了一个`GridView`控件,允许用户对其进行排序操作,并设置了三列:`name`、`age` 和 `sex`。其中`name`和`age`列可以进行排序。 ```html AllowSorting="True" OnSorting="Sorting"&gt; ``` ...

    flex datagrid 前台 分页

    4. **数据排序和过滤**:如果需要在前台进行数据排序或过滤,要确保这些操作不会影响到整个数据集,只对当前页的数据进行操作。 5. **状态保存**:如果应用有多个视图或用户离开后再返回,需要保存用户的分页状态,...

    首字母排序选择_微信小程序模板js代码前台前端H5页面源码.rar

    总的来说,这个"首字母排序选择_微信小程序模板js代码前台前端H5页面源码"是一个实用的工具,对于想要学习微信小程序开发、前端编程以及用户界面设计的开发者来说,它提供了丰富的学习材料。通过研究和实践,你可以...

    BIEE前台展现入门必备

    《BIEE前台展现入门必备》一文深入探讨了Oracle Business Intelligence(BI)Presentation Services的管理与应用,为初学者提供了全面的指南。本文将基于标题、描述以及部分提供的内容,详细阐述BIEE(Oracle ...

    【ECSHOP模板堂官方】商品分类销量排序插件

    5. 验证前台效果,确保排序功能正常运行。 总的来说,【ECSHOP模板堂官方】商品分类销量排序插件是一款为ECSHOP店主提供便利的工具,通过简单地添加排序功能,就能显著提升网站的用户体验和商业价值。对于那些希望...

    论坛前台设计概要设计

    关键算法是实现系统核心功能的关键步骤,例如帖子排序算法、用户权限验证算法等。 #### 十五、故障检测和触发 故障检测是指系统能够自动检测出潜在的错误或异常情况,并采取相应的措施,如记录日志、发送警告等。 ...

    纯JS脚本排序 支持数字、字母、汉字(按拼音) 排序

    通过脚本排序table 点击表头进行正序 倒序排列,识别字段是数值还是字符串 数值则按大小来了 字符串 则比较字符串 ,JS前台操作 最大限度减小服务端压力,使用简单,只需要在页面添加一条代码即可实现排序功能

Global site tag (gtag.js) - Google Analytics