针对动态表格所写(即每次刷新都请求后台),通过回调函数调用生成表格代码。
使用了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>