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

sortTable组件

阅读更多

 

#sortTable.js

 

 

/*
	说明:
	1. 该组件用于将一个普通的table,变成一个可以排序的table,同时可以添加奇数偶数行的样式(支持自定义)
	2. JSLogger.js 是一个记录日志的组件,不用的话,可以将类似JSLogger的代码全部删掉,不会影响当前组件。
	3. 兼容:IE7 8 9,FF,chorme
*/


//缓存table数据的对象
//使用table的ID作为属性进行访问
var tableMap = {};


/**
* 更新table的方法
* 更新后支持:奇偶样式(),表头排序
*@param tableId 表的ID
*@param config 配置信息
*	- widths	各个列的宽度数组 默认[200,200]
*	- oldEven	奇偶样式数据,默认["old","even"]\
*   - sortType	排序类型:txt文本,int数值类型 默认都是文本排序
**/
function updateTable(tableId,config){
	config = config ||{};
	config.widths = config.widths ||[200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200];//默认200px宽度
	config.sortType = config.sortType || ["txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt","txt"];
	config.oldEven = config.oldEven ||["sort_old","sort_even"];//默认奇偶样式
	var tableObj = document.getElementById(tableId);
	if(tableObj==null){return;}
	
	//是否需要缓存数据:如果没有缓存数据,则进行如下操作
	if(!!tableMap[tableId]==false){
		var rows = tableObj.rows;
		var len  = rows.length;
		for(var i=1;i<len;i++){
			var row = rows[i];			
			if(i%2==0){
				row.className = config.oldEven[0];
				row.classNameOld = config.oldEven[0];
			}else{
				row.className = config.oldEven[1];
				row.classNameOld = config.oldEven[1];
			}
		}


		JSLogger.log("缓存table");
		//tableObj.className="sortTable";
		tableObj.setAttribute("cellpadding","0");
		tableObj.setAttribute("cellspacing","0");
		tableObj.setAttribute("border","0");

		var tempArr = [];
		for(var i=0;i<len;i++){
			var row = rows[i];
			var rowArr = [];
			if(i>0){//第一行不拷贝
				var cells = row.cells;
				for(var k=0;k<cells.length;k++){
					rowArr.push(cells[k].innerHTML);//只保存td的html
				}
				tempArr.push(rowArr);
			}
		}
		tableMap[tableId] = tempArr;
		JSLogger.log(tempArr,true);

		
		//给table的head添加时间监听
		JSLogger.log("给table的head添加事件监听");
		var head  = rows[0];
		var cells = head.cells;
		for(var j=0;j<cells.length;j++){
			var cell = cells[j];
			//添加排序图标
			var sortSpan = document.createElement("SPAN");
			sortSpan.className = "sort_asc_def";
			sortSpan.setAttribute("name","sortSpan");			
			sortSpan.setAttribute("sortType",config.sortType[j]);
			sortSpan.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;";
			sortSpan.setAttribute("tableId",tableId);//存储表ID
			sortSpan.setAttribute("colIndex",j);//存储列索引
			sortSpan.setAttribute("sort","desc");//存储排序顺序
			cell.appendChild(sortSpan);

			cell.className="sort_head";
			if(config.widths){
				cell.style.width = (config.widths[j]+"px" || "");
			}
			//排序图标添加click点击事件:兼容IE\FF\Chrome
			if(window.attachEvent){
				sortSpan.attachEvent("onclick",function (sortSpan,config) {  
					return function (){  
						sortTable(sortSpan,config);  
					}  
				}(sortSpan,config));
				//表头不可以选中
				cell.attachEvent("onselectstart",function (cell) {  
					return function (){  
						return false;  
					}  
				}(cell));
			}else{//FF ,chrome
				sortSpan.addEventListener("click",function (sortSpan,config) {  
					return function (){  
						sortTable(sortSpan,config);  
					}  
				}(sortSpan,config),false);
				//表头不可以选中:在css样式中实现
			}
		}
	}
	
}
/*排序的方法
*@param tdDom 当前TD对象
*@param config 配置信息(详细说明见updateTable方法)
*
*/
function sortTable(tdDom,config){
	//JSLogger.log("tdDom.tableId  = "+tdDom.getAttribute("tableId") +",tdDom.colIndex = "+tdDom.getAttribute("colIndex"));//+",innerHTML = "+tdDom.innerHTML);
	JSLogger.log("sort = "+tdDom.getAttribute("sort")+",sortType = "+tdDom.getAttribute("sortType"));
	var tableId = tdDom.getAttribute("tableId");
	var sort = tdDom.getAttribute("sort");
	var colIndex = tdDom.getAttribute("colIndex");
	var table = document.getElementById(tableId);
	var sortType = tdDom.getAttribute("sortType");//txt文字排序/int数值排序
	//var rows = [];
	//除第一样以外,全部删除
	while(table.rows[1]){  
		//rows.push(table.rows[1]);
		table.deleteRow(1);  
	}   
	setTimeout(function(){
		//从缓存中获取原始table的所有行
		var rowsData = tableMap[tableId];
		var colLen = rowsData[0].length;
		var JSON  ={colIndex:colIndex,sort:sort,sortType:sortType};
		rowsData = sortRows(rowsData,JSON);//;
		//JSLogger.log(rowsData[0][0]);
		for(var i=0;i<rowsData.length;i++){
			var row = table.insertRow(-1); 
			//奇偶样式
			if(i%2==1){
				row.className = config.oldEven[0];
				row.setAttribute("classNameOld",config.oldEven[0]);
			}else{
				row.className =  config.oldEven[1];
				row.setAttribute("classNameOld",config.oldEven[1]);
			}
			
			//注入td内容
			for(var j=0;j<colLen;j++){
				var cell = row.insertCell(-1); 
				cell.innerHTML = rowsData[i][j];
			}
		}
	},0);
	//重置所有排序图标 :name="sortSpan"
	var spanArr = document.getElementsByTagName("span");
	for(var k=0;k<spanArr.length;k++){
		var span = spanArr[k];
		if("sortSpan"==span.getAttribute("name") && "sort_desc"==span.className){
			span.className = "sort_desc_dis";
		}else if("sortSpan"==span.getAttribute("name") && "sort_asc"==span.className){
			span.className = "sort_asc_dis";
		}
	}
	//最后重置排序
	if("desc"==sort){
		tdDom.setAttribute("sort","asc");
		tdDom.className = "sort_desc";
	}else{
		tdDom.setAttribute("sort","desc");
		tdDom.className = "sort_asc";
	}
	
}

/*
*自定义数组排序方法
*@param rows 一个table的所有行的数据
*@param JSON 参数
*	-colInex 列索引 按照那个列进行排序
*	-sort 正序还是反序 asc/desc
*	-sortType 	txt文本排序/int 数值排序
*/
function sortRows(rows,JSON){
	var colIndex = JSON.colIndex;
	var sort = JSON.sort;
	var sortType = JSON.sortType;

	//JSLogger.log(rows,true);
	JSLogger.log("colIndex = "+colIndex+",sort = "+sort+",sortType = "+sortType);
	rows = rows.sort(function(row1,row2){
		if("txt"==sortType){//文本排序
			if("asc"==sort){
				if((row1[colIndex]>row2[colIndex])===true){return 1;}
				else if(( row1[colIndex]<row2[colIndex])===true){return -1;}
				else{return 0;}
			}else{
				if((row1[colIndex]>row2[colIndex])===true){return -1;}
				else if(( row1[colIndex]<row2[colIndex])===true){return 1;}
				else{return 0;}
			}
		}else{//数值排序
			if("asc"==sort){
				return parseFloat(row1[colIndex])- parseFloat(row2[colIndex]);
			}else{
				return -(parseFloat(row1[colIndex])- parseFloat(row2[colIndex]));
			}
		}
	});
	return rows;
}
 

 

附件是完整代码和实例。

 

欢迎指正

 

 

 

 

 

 

 

 

 

 

 

愤怒的jser -  好东西就要共享

  • 大小: 7.1 KB
分享到:
评论

相关推荐

    sorttable表格排序

    **sorttable表格排序** 在网页开发中,展示数据时经常使用到表格(Table)这一元素。为了提升用户体验,提供一种方便的数据浏览方式,sorttable是一个非常实用的JavaScript库,它允许用户通过点击表头实现表格数据...

    angualrJS ngsorttable

    这可以通过在控制器中定义函数并将其传递给ng-sorttable组件来实现。 ### 6. 表格样式与交互 为了提供更好的用户体验,ng-sorttable可能包含了CSS类,用于改变表头的样式,比如箭头图标来指示当前的排序状态。此外...

    sorttable拖拽排序

    虽然这些框架通常有自己的数据管理和UI更新机制,但sorttable作为一个独立的排序工具,仍然可以在组件中发挥其优势,尤其是对于不需要完整框架功能的轻量级项目。 总之,sorttable库为前端开发者提供了一个简单、...

    JavaScript实现表格排序,点击表头切换升序降序,非常简单

    这里,`onclick`事件绑定了`sortTable`函数,用于处理排序逻辑。接下来,我们需要编写JavaScript代码。 在`sort.js`文件中,我们定义`sortTable`函数: ```javascript function sortTable(n) { var table, rows, ...

    js_sort_table_DOM:JS高级任务。 排序表

    请遵循 运行npm run test命令来测试您的代码; 运行npm run test:only -- -n以忽略linter的方式运行快速测试; 运行npm run test:only -- -l以忽略控制台的方式在控制台中运行带有附加信息的快速测试。...

    table表头点击可实现排序

    th.addEventListener('click', sortTable); }); ``` 2. **排序逻辑**:在`sortTable`函数中,我们需要获取当前点击的列索引,以及表格中的所有数据行。然后根据选择的排序方式(升序或降序)对数据进行排序。例如...

    可拖动、排序的表格非常灵活,样式也很好看

    `DragTable.js` 文件则是实现表格拖动功能的组件。在JavaScript中,我们可以利用`mousedown`、`mousemove`和`mouseup`事件来实现拖放操作。当用户按下鼠标并在表格行上移动时,脚本会捕捉这些事件并更新行的位置。...

    常用javascript效验

    9. **富文本编辑器验证**:`editor.js`可能是一个富文本编辑器组件,它可能包含了对用户输入的HTML内容的验证,以确保安全性和合规性。 10. **数据集操作验证**:`dataset.js`可能处理的是数据集合的验证,比如在...

    table表头排序

    10. **框架与库**:许多前端框架和库(如jQuery、Bootstrap、Angular、Vue.js、React等)提供了现成的表格组件,它们通常包含了表头排序的功能,使用这些组件可以简化开发流程。 理解并熟练应用上述知识点,可以...

    标题固定和排序

    至于“工具”标签,可能意味着这个脚本是一个可复用的组件,可以集成到其他项目中,以快速实现标题固定和排序功能。 总的来说,“标题固定和排序”是Web开发中的常见需求,`tbsort.js`可能是解决这个问题的一个实用...

    求表格排序时列标题上小箭头变化代码

    此外,还可以考虑使用现代前端框架,如React、Vue或Angular,它们提供了更高级的数据绑定和组件化功能,使得这样的交互实现更加简洁和高效。 总之,实现表格排序功能涉及到HTML、CSS和JavaScript的综合运用,通过...

    tree_menu(javascript)

    7. `Treeview.zip`: 直接以“Treeview”命名,很可能包含了一个JavaScript树视图组件。 8. `tigra_tree_menu.zip`: 另一个Tigra相关的菜单库,可能提供了树状菜单的实现。 树形菜单的实现通常涉及以下JavaScript...

    react-sortable:使用react实现的简单的可拖拽排序的列表

    在这个例子中,`Sortable`组件接收`list`属性作为需要排序的数据,`onSortEnd`回调则在排序结束后被调用,你可以在这里更新你的数据源以反映新的顺序。 ### 4. 自定义样式和行为 React Sortable 允许你通过CSS样式...

    js实现多级排序以及动态改变表格宽度和高度

    在JavaScript编程中,实现多级排序以及动态改变表格宽度和高度是常见的...确保代码具有良好的可维护性和性能,可以考虑使用现有的前端框架,如React或Vue,它们提供了更丰富的组件和生命周期管理,能简化这部分工作。

    JS:表格排序

    为了提高代码的可复用性和适应性,可以封装成一个插件或组件,支持自定义排序逻辑和兼容各种浏览器。同时,考虑使用ES6的类和模块化来提升代码组织性。 通过以上介绍,你已经了解了JS中实现表格排序的基本思路和...

Global site tag (gtag.js) - Google Analytics