您正在使用IPV4(3.236.138.35)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云服务器等爆品抢先购,低至4.2元/月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2023年 元宵节 8
2023年 情人节 17
2024年 元 旦 338
2024年 春 节 378
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
jquery点击实现升序降序图标切换
内容摘要: 实现步骤:1.css.table-sort{display:inline-block;width:10px;height:20px;margin-left:5px;cursor:pointer!important;vertical-align:middle;position:relative}.table-sorti{border:6pxdashedtran......
实现步骤:

1.css

.table-sort{

display:inline-block;

width:10px;

height:20px;

margin-left:5px;

cursor:pointer!important;

vertical-align:middle;

position:relative

}

.table-sorti{

border:6pxdashedtransparent;

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个thsortIndex_1、sortIndex_2……

<thclass="sortIndex_1">

面积<small>(亩)</small>

<spanclass="table-sort">

<iclass="sort-asc"></i>

<iclass="sort-desc"></i>

</span>

</th>

<thclass="sortIndex_2">

人数<small>(位)</small>

<spanclass="table-sort">

<iclass="sort-asc"></i>

<iclass="sort-desc"></i>

</span>

</th>

3.html部分,写在form标签以内,需要提交给后台的隐藏表单:orderByIndex-标识第几列需要排序;ascOrDesc-标识需要升序还是降序

<script>

<inputtype="hidden"class="form-control"name="orderByIndex"id="orderByIndex"value="${orderByIndex}"/>

<inputtype="hidden"class="form-control"name="ascOrDesc"id="ascOrDesc"value="${ascOrDesc}"/>

</script>

4.javaScript部分

<script>

$(function(){

initSort(2);//有几个列需要排序,这里数值就写几

});

</script>

<script>

varinitSort=function(maxColNumberNeedSort){

varorderByIndex=$("#orderByIndex").val();

varascOrDesc=$("#ascOrDesc").val();

for(vari=1;i<=maxColNumberNeedSort;i++){

varindexStr=".sortIndex_"+i;

$(indexStr).find(".table-sorti").each(function(){

$(this).removeClass("cur");

});

$(indexStr).bind("click",{index:i},changeArrowRefreshData);

}

if(orderByIndex!=undefined&&ascOrDesc!=undefined){

varindexStr=".sortIndex_"+orderByIndex;

if(ascOrDesc==0){//降序

$(indexStr).find(".table-sorti").eq(1).addClass("cur");

}else{//升序

$(indexStr).find(".table-sorti").eq(0).addClass("cur");

}

}

};

varchangeArrowRefreshData=function(event){

varindex=event.data.index;

var_this=$(this);

if(_this.find(".table-sorti").eq(0).hasClass("cur")){//想要降序排列

$("#ascOrDesc").val(0);

_this.find(".table-sorti").eq(0).removeClass("cur");

_this.find(".table-sorti").eq(1).addClass("cur");

}else{

$("#ascOrDesc").val(1);

_this.find(".table-sorti").eq(1).removeClass("cur");

_this.find(".table-sorti").eq(0).addClass("cur");

}

$("#orderByIndex").val(index);

getTableData(1);//在此方法实现你的分页获取数据逻辑,刷新表格数据.

};

</script>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:方框内年月日、星期、时分秒显示效果 下一篇:JS实现图片轮播跑马灯
发布日期:2022/10/18
手机扫二维码直达本页
发布时间:14:52:20
点  击:25
录  入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2023