js动态表格排序

最新推荐文章于 2022-07-19 16:23:26 发布

nayi_224

最新推荐文章于 2022-07-19 16:23:26 发布

阅读量820

点赞数

分类专栏： js 文章标签： js js表格排序

本文链接：https://blog.csdn.net/nayi_224/article/details/102579278

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

针对动态表格所写（即每次刷新都请求后台），通过回调函数调用生成表格代码。
使用了jquery

th中需要设置属性column_flag来作为列标识

参数
el：table的jquery选择器
ascHtml：正序时的显示字符
descHtml：倒叙时的显示字符
callback：点击后的回调函数，三个参数分别为th对象，排序规则（asc，desc），列标识
cols：传入数组对象，默认为对全部列排序
colsType：对应于cols，两种设置，name：对应于column_flag选取排序列，number：对应于th序号选取排序列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<style type="text/css">
			
table {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
	width: 600px;
}
table th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}		

		</style>
	</head>
	<body>
		<table id="sortTable">
			<thead>
				<th column_flag="_col1">
					col1
				</th>
				<th column_flag="_col2">
					col2
				</th>
				<th column_flag="_col3">
					col3
				</th>
				<th column_flag="_col4">
					col4
				</th>
			</thead>
			<tbody>
				<tr>
					<td>row_1 col_1</td>
					<td>row_1 col_2</td>
					<td>row_1 col_3</td>
					<td>row_1 col_4</td>
				</tr>
				<tr>
					<td>row_2 col_1</td>
					<td>row_2 col_2</td>
					<td>row_2 col_3</td>
					<td>row_2 col_4</td>
				</tr>
				<tr>
					<td>row_3 col_1</td>
					<td>row_3 col_2</td>
					<td>row_3 col_3</td>
					<td>row_3 col_4</td>
				</tr>
				<tr>
					<td>row_4 col_1</td>
					<td>row_4 col_2</td>
					<td>row_4 col_3</td>
					<td>row_4 col_4</td>
				</tr>
			</tbody>
		</table>
	</body>
	<script type="text/javascript">
		var sortUtil = function(){
			
			var that = this;
			
			var _initOption = {
				cols: [],
				colsType: "number",
				ascHtml: "▲",
				descHtml: "▼",
				initShow: true,
				callback: function(){
					alert("error！callback未定义");
				}
			};
			
			var initDynamic = function(option){
				var _option = jQuery.extend({}, _initOption, option);
				var tb = jQuery("" + _option.el);
				
				var _onclick = function(){
					var thObj = jQuery(this);
					var curColumnFlag = thObj.attr("column_flag");
					var curSort = thObj.attr("sort");
					
					if(curSort == "asc"){
						thObj.find("#_sortSpan").html(_option.descHtml);
						var curSort = thObj.attr("sort", "desc");
						_option.callback(thObj, "desc", curColumnFlag);
					}else {
						thObj.find("#_sortSpan").html(_option.ascHtml);
						var curSort = thObj.attr("sort", "asc");
						_option.callback(thObj, "asc", curColumnFlag);
					}
					
				};
				
				if(_option.cols == null || _option.cols.length == 0){
					for(var i = 0; i < tb.find("th").length; i++){
						_option.cols.push(i);
					}
					_option.colsType = "number";
				}
				
				for(var i = 0; i < _option.cols.length; i++){
					var temp;
					if(_option.colsType == "number"){
						temp = jQuery(tb.find("th").get(_option.cols[i]));
					}else {//if(_option.colsType == "name")
						temp = jQuery("" + _option.el).find("[column_flag='"+_option.cols[i]+"']");
					}
					temp.on("click", _onclick);
					temp.css("cursor", "pointer");
					
					temp.attr("sort", "asc");
					
					if(_option.initShow){
						temp.append("<span id='_sortSpan'>"+_option.ascHtml+"</span>");
					}
				}
				
			};
			
			return {
				initDynamic: initDynamic
			};
		}();
		
//  	sortUtil.initDynamic({
//  		el: "#sortTable",  //table id
//  		colsType: "number",//cols 数字格式
//  		ascHtml: "▲",
//			descHtml: "▼",
//  		callback: function(thObj, sort, columnFlag){
//  			//alert(thObj + " _ " + sort + " _ " + columnFlag);
//  		},
//  		cols: [0, 1, 3]    //cols 第1,2,4的th
//  	});
    	
    	sortUtil.initDynamic({
    		el: "#sortTable",  //table的jquery表达式
    		colsType: "name",//对应于cols，name：
    		ascHtml: "▲",
			descHtml: "▼",
    		callback: function(thObj, sort, columnFlag){//th对象，排序规则（asc，desc），排序字段标识
    			alert(thObj + "  " + sort + "  " + columnFlag);
    		},
    		cols: ["_col1", "_col4"]    //cols 第1,2,4的th
    	});
    	
	</script>
</html>

nayi_224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动态表格排序

针对动态表格所写（即每次刷新都请求后台），通过回调函数调用生成表格代码。使用了jqueryth中需要设置属性column_flag来作为列标识参数el：table的jquery选择器ascHtml：正序时的显示字符descHtml：倒叙时的显示字符callback：点击后的回调函数，三个参数分别为th对象，排序规则（asc，desc），列标识cols：传入数组对象，默认为对全部列排...
复制链接

扫一扫

专栏目录