jquery点击实现升序降序图标切换

网友投稿 • 2022年10月8日 am9:39 • 云知识 • 阅读 0

　　在项目中，jquery点击实现升序降序图标切换是比较常见的，现在为大家介绍：

　　需求: 当查询一个结果的时候,反馈回来的是表格,当点击表头任何一列,都能实现升序/降序的UI变换,同时表格内容该列也升序降序排列.支持分页.

　　实现步骤:

　　1.css

　　.table-sort {
　　display: inline-block;
　　width: 10px;
　　height: 20px;
　　margin-left: 5px;
　　cursor: pointer !important;
　　vertical-align: middle;
　　position: relative
　　}
　　.table-sort i {
　　border: 6px dashed transparent;
　　position: absolute;
　　left: 5px
　　}
　　.table-sort .sort-asc {
　　top: 2px;
　　border-top: none;
　　border-bottom-style: solid;
　　border-bottom-color: #b2b2b2
　　}
　　.table-sort .sort-asc.cur, .table-sort .sort-asc:hover {
　　border-bottom-color: #fff
　　}
　　.table-sort .sort-desc {
　　bottom: 3px;
　　border-bottom: none;
　　border-top-style: solid;
　　border-top-color: #b2b2b2
　　}
　　.table-sort .sort-desc.cur, .table-sort .sort-desc:hover {
　　border-top-color: #fff
　　}

　　2.html部分:

　　在相应的表头加上样式: sortIndex_? 这个用来标识列,比如一个表格有5个列需要有排序功能,就可以依次设置5个th sortIndex_1 、sortIndex_2 ……

　　<th class="sortIndex_1">
　　面积 <small>(亩)</small>
　　<span class="table-sort">
　　<i class="sort-asc"></i>
　　<i class="sort-desc"></i>
　　</span>
　　</th>
　　<th class="sortIndex_2">
　　人数 <small>(位)</small>
　　<span class="table-sort">
　　<i class="sort-asc"></i>
　　<i class="sort-desc"></i>
　　</span>
　　</th>
　　3. html部分,写在form标签以内,需要提交给后台的隐藏表单: orderByIndex- 标识第几列需要排序; ascOrDesc-标识需要升序还是降序
　　1
　　2
　　3
　　4
　　<script>
　　<input type="hidden" class="form-control" name="orderByIndex" id="orderByIndex" value="${orderByIndex}" />
　　<input type="hidden" class="form-control" name="ascOrDesc" id="ascOrDesc" value="${ascOrDesc}" />
　　</script>

　　4.javaScript部分

　　<script>
　　$(function () {
　　initSort(2);//有几个列需要排序,这里数值就写几
　　});
　　</script>
　　<script>
　　var initSort = function(maxColNumberNeedSort){
　　var orderByIndex = $("#orderByIndex").val();
　　var ascOrDesc = $("#ascOrDesc").val();
　　for(var i=1;i<=maxColNumberNeedSort;i++){
　　var indexStr = ".sortIndex_"+i;
　　$(indexStr).find(".table-sort i").each(function() {
　　$(this).removeClass("cur");
　　});
　　$(indexStr).bind("click", {index: i}, changeArrowRefreshData);
　　}
　　if(orderByIndex!=undefined&&ascOrDesc!=undefined){
　　var indexStr = ".sortIndex_"+orderByIndex;
　　if(ascOrDesc==0){//降序
　　$(indexStr).find(".table-sort i").eq(1).addClass("cur");
　　}else{//升序
　　$(indexStr).find(".table-sort i").eq(0).addClass("cur");
　　}
　　}
　　};
　　var changeArrowRefreshData= function(event) {
　　var index = event.data.index;
　　var _this = $(this);
　　if(_this.find(".table-sort i").eq(0).hasClass("cur")){//想要降序排列
　　$("#ascOrDesc").val(0);
　　_this.find(".table-sort i").eq(0).removeClass("cur");
　　_this.find(".table-sort i").eq(1).addClass("cur");
　　}else{
　　$("#ascOrDesc").val(1);
　　_this.find(".table-sort i").eq(1).removeClass("cur");
　　_this.find(".table-sort i").eq(0).addClass("cur");
　　}
　　$("#orderByIndex").val(index);
　　getTableData(1);//在此方法实现你的分页获取数据逻辑,刷新表格数据.
　　};
　　</script>

　　最终效果图:第1列,第2列实现了手动排序. (注意,一次操作,只能对一列排序,其它列的排序不会被点亮.)

jquery点击实现升序降序图标切换

到此内容全部介绍完毕！

原创文章，作者：网友投稿，如若转载，请注明出处：https://www.cloudads.cn/archives/4011.html

jquery点击实现升序降序图标切换

相关推荐

发表评论