zoukankan      html  css  js  c++  java
  • 分享:JavaScript表格排序控制

    列表排序函数,主要使用在.tabList列表的排序
    tangCom.setListSortInit = function () {
        /// <summary>列表排序函数,主要使用在.tabList列表的排序
        /// 用法:<a href="javascript:;" sort="ProjectNumber">项目编号</a>请在"<a>"标签中添加一个"sort"属性
        ///</summary>
        $("a[sort]").click(function () {
            //获取sort属性值,即进行排序字段的值,请不要担心该字段会暴露在url中,因为该字段并不是数据库的字段
            var sortVal = $(this).attr("sort");
    
            //是否升序排列,默认降序排列
            var sortIndex = "False";
            //如果URL中出现sort参数,则把sort参数的值进行替换
    
            if (location.toString().indexOf('sort') > 0) {
                var urlSortIndex = tangCom.getQueryStringSingle("desc");
    
                //如果新的排序方式依然等于默认排序方式,则翻转。
                if (urlSortIndex == sortIndex) {
                    sortIndex = "True";
                }
                //替换URL中sort属性的值
                var newUrl = tangCom.setUrlParam(location.toString(), "sort", sortVal);
                newUrl = tangCom.setUrlParam(newUrl, "desc", sortIndex);
                //URL跳转
                window.location.href = newUrl;
            } else {
                //url中未出现 sort 参数则在url中加上 sort参数
                if (location.toString().indexOf('&') > 0 || location.toString().indexOf('?') > 0) {
                    //地址栏中包含“&”和“?”
                    window.location.href += '&sort=' + sortVal + '&desc=' + sortIndex;
                } else {
                    window.location.href = '?sort=' + sortVal + '&desc=' + sortIndex;
                }
            }
        });
    
        //设置排序状态    tangCom.setSortInfo();
    }
    
    

    设置URL参数

    
    
    tangCom.setUrlParam = function (oldurl, paramname, pvalue) {
        /// <summary>设置URL参数</summary>
        /// <param name="oldurl" type="String">需要进行替换参数的URL连接</param>
        /// <param name="paramname" type="String">需要进行替换的参数名称</param>
        /// <param name="pvalue" type="String">需要替换成的新的参数值</param>
        /// <returns type="String" />
    
        var reg = new RegExp("(\\?|&)" + paramname + "=([^&]*)(&|$)", "gi");
        var pst = oldurl.match(reg);
        if ((pst == undefined) || (pst == null)) {
            return oldurl + ((oldurl.indexOf("?") == -1) ? "?" : "&") + paramname + "=" + pvalue;
        }
    
        var t = pst[0];
        var retxt = t.substring(0, t.indexOf("=") + 1) + pvalue;
        if (t.charAt(t.length - 1) == '&') retxt += "&";
        return oldurl.replace(reg, retxt);
    }
    
    
    tangCom.setUrlParam = function (oldurl, paramname, pvalue) {
        /// <summary>设置URL参数</summary>
        /// <param name="oldurl" type="String">需要进行替换参数的URL连接</param>
        /// <param name="paramname" type="String">需要进行替换的参数名称</param>
        /// <param name="pvalue" type="String">需要替换成的新的参数值</param>
        /// <returns type="String" />
    
        var reg = new RegExp("(\\?|&)" + paramname + "=([^&]*)(&|$)", "gi");
        var pst = oldurl.match(reg);
        if ((pst == undefined) || (pst == null)) {
            return oldurl + ((oldurl.indexOf("?") == -1) ? "?" : "&") + paramname + "=" + pvalue;
        }
    
        var t = pst[0];
        var retxt = t.substring(0, t.indexOf("=") + 1) + pvalue;
        if (t.charAt(t.length - 1) == '&') retxt += "&";
        return oldurl.replace(reg, retxt);
    }

    设置排序后的显示

    tangCom.setSortInfo = function () {
        /// <summary>设置排序后的显示信息</summary>
    
        var sortValue = tangCom.getQueryStringSingle("sort");
        var sortType = tangCom.getQueryStringSingle("desc");
        var imgSrc = "";
        var imgAlt = "";
    
        $("a[sort='" + sortValue + "']", function () {
            if (sortType == "True") {
                imgSrc = "/Images/down01.gif";
                imgAlt = "&#38477;&#24207;"; //降序
            } else {
                imgSrc = "/Images/up01.gif";
                imgAlt = "&#21319;&#24207;"; //升序
            }
            $("a[sort='" + sortValue + "']").append("<img src=\"" + imgSrc + "\" alt=\"" + imgAlt + "\"/>");
        });
    }
    在jquery初始化方法中进行初始化:

    $(function(){tangCom.setListSortInit();});
     
  • 相关阅读:
    table-layout:fixed 布局注意事项
    resize 按钮不会被伪元素遮盖
    background-size:100% 100% 时 background-position: % 失效
    利用 background 和 filter 模糊指定区域
    window.location.href = window.location.href 跳转无反应 a 超链接 onclick 点击跳转无反应
    如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
    .clear 万能清除浮动
    个人博客开通了
    Mysql The user specified as a definer ('test'@'%') does not exist
    MERGE INTO 解决大数据量复杂操作更新慢的问题
  • 原文地址:https://www.cnblogs.com/easeyeah/p/2849185.html
Copyright © 2011-2022 走看看