精华内容
下载资源
问答
  • word怎样对表格进行排序?.docx
  • js对表格进行排序

    2014-03-28 17:39:36
    利用纯js对表格进行排序,动态扩展性能好.并且可按照字符串,日期,图片,数字排序.
  • 利用JS对表格中的内容进行排序,可以指定对表格的某一列进行排序,升序或降序,实例与代码。
  • 用sorttable.js对表格进行排序

    万次阅读 2014-12-23 18:11:57
    用sorttable.js表格进行排序,本博客总结了对表格排序的实现步骤,及排序的高级应用

    对表格进行排序的实现步骤:

    第一:下载sorttable.js,链接:http://www.kryogenix.org/code/browser/sorttable/,(不需要jquery.js)

    第二:导入该sorttable.js,(不需要jquery.js)

    第导入:在 table标签添加一个class="sortable"。

    至此,即可实现正反序的排列

    如果想不对某列排序,只要在此列的<th>标签加上class="sorttable_nosort"即可。

    注意:不支持分页

    sorttable高级用法:

    1)在页面加载后添加表排序

    var newTableObject =document.getElementById(idOfTheTableIJustAdded) ;

    sorttable.makeSortable(newTableObject);

     

    2)总计行

    总计行添加<tfoot>标签,如下图:

     

    3)列头显示图标表示进行排序

    table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
        content: " \25B4\25BE" 
    }

     

    4)使用自定义排序键

    在单元格加sorttable_customkey属性,如下图

    5)手动指定列的类型

    在列头标签添加class,值为列类型(sorttable_numeric、sorttable_alpha),如下图

    6)使用自定义日期格式

    添加自定义排序键值的格式为:YYYYMMDDHHMMSS,列如:

    <td sorttable_customkey="20080211131900">February11th 2008, 1:19pm</td>

    具体如下图

    7)稳定排序

    row_array.sort(this.sorttable_sortfunction);
    sorttable.shaker_sort(row_array, this.sorttable_sortfunction);

    8)通过代码排序表

    var myTH = document.getElementsByTagName("th")[0];
    sorttable.innerSortFunction.apply(myTH, []);

    9)使用自己的图表说明可排序的列

    添加css如下:

    table.sortable th::after, th.sorttable_sorted::after, th.sorttable_sorted_reverse::after {
      content: " ";
      display: inline-block;
      width: 24px;
      height: 24px;
    }
    th.sorttable_sorted::after {
      background: url(my-sorted-icon.png);
      background-size: contain;
    }
    th.sorttable_sorted_reverse::after {
      background: url(my-sorted-reversed-icon.png);
      background-size: cover;
    }

     

    10)使某些列不可排序

    添加class="sorttable_nosort"到 <th> 列标签

    11)在页面加载完成是排序表

    sorttable无法实现,实现的方法只能通过查询sql的order by 语句实现。

    另一种方法为:sorting a table from your own code

    12)第一次排序为降序

    需要编辑sorttable.js. 找到如下行:

    row_array.sort(this.sorttable_sortfunction);

    在这行后面添加如下新行:

    row_array.reverse();

    13)非敏感字符排序

    需要编辑sorttable.js. 找到如下代码:

    sort_alpha:function(a,b) {

        if (a[0]==b[0]) return 0;

        if (a[0]<b[0]) return -1;

        return 1;

      },

    并改变为:

     

      sort_alpha: function(a,b) {

        if (a[0].toLowerCase()==b[0].toLowerCase())return 0;

        if (a[0].toLowerCase()<b[0].toLowerCase())return -1;

        return 1;

      },

     

    14)添加行号

    需要添加如下css:

    table.sortable tbody {
        counter-reset: sortabletablescope;
    }
    table.sortable thead tr::before {
        content: "";
        display: table-cell;
    }
    table.sortable tbody tr::before {
        content: counter(sortabletablescope);
        counter-increment: sortabletablescope;
        display: table-cell;
    }

     

    15)为表添加交替斑马线背景

    添加如下css:

    table.sortable tbody tr:nth-child(2n) td {
      background: #ffcccc;
    }
    table.sortable tbody tr:nth-child(2n+1) td {
      background: #ccfffff;
    }

    16)带滚动条的排序表

    添加如下css:

    /* Appearance */

        body, table { font-family: sans-serif; }

        table { border-collapse: collapse; }

        td, th { padding: 6px; }

        th { background: #333; color: white; }

        tbody tr:nth-child(odd) { background:#dfdfdf; }

        table { border: 1px solid red; }

       

        /* Scrollability of table */

        table { width: 500px; } /* fixed widthtable */

        thead tr { display: block; } /* makes itsizeable */

        tbody {

          display: block; /* makes it sizeable */

          height: 170px; /* height of scrollablearea */

          overflow: auto; /* scroll rather thanoverflow */

          width: 100%; /* fill the box */

        }

        thead th { width: 250px; } /* fixed widthfor THs */

        tbody td { width: 242px; } /* fixed widthfor TDs */

        /* the tbody needs to be 16px less than thethead, for the scrollbar */

       


    实例如下图所示:


     

    展开全文
  • NULL 博文链接:https://ollevere.iteye.com/blog/1671801
  • 主要介绍了javascript实现对表格元素进行排序操作,分别可以实现点击之后排序和还原,和排升序和降序的功能,文章末尾附完整代码,感兴趣的小伙伴们可以参考一下
  • 佐特 一个小的 jQuery 插件,用于对表格进行排序/过滤 用法 $ ( "table" ) . zort ( ) ; 表格的第一行必须包含th元素。 这些元素将用作排序按钮。
  • 博文链接:https://guoyankun.iteye.com/blog/194780
  • 惰性可排序表 用于对表格进行排序的 jQuery 插件。 从源代码编译 克隆这个 repo 运行npm install 运行gulp 依赖关系 jQuery >= 1.4 用法 $('#table').lazySortableTable(); 去做
  • 在运用elementUI的table时,在column中加入sortable属性,即可table进行排序,但排序仅限于单一页面,分页场景则失效。 以下针对el-table的分页场景进行排序 <el-table :data='tableData.slice((page-1)*...

    在运用elementUI的table时,在column中加入sortable属性,即可对table进行排序,但排序仅限于单一页面,对分页场景则失效。
    以下针对el-table的分页场景进行排序

    <el-table
        :data='tableData.slice((page-1)*pageSize, page*pageSize)'
         @sort-change="sortChange"
    >
       <el-table-column
               prop='id'
               label='id'
               sortable
       >
       </el-table-column>
       <el-table-column
               prop='Status'
               label='运行状态'
               sortable
       >
     </el-table>
    
    // 根据属性值对表格进行排序
     private sortChange(arg: any) {
            if (arg.column) {
                let sortTableData = cloneDeep(this.tableData);
                if (arg.order === 'descending') {
                    if (arg.prop === 'id') {
                        sortTableData.sort(this.sortByProp(arg.prop, true));
                    } else {
                        sortTableData.sort(this.sortByName(arg.prop, true));
                    }
                } else {
                    if (arg.prop === 'id') {
                        sortTableData.sort(this.sortByProp(arg.prop, false));
                    } else {
                        sortTableData.sort(this.sortByName(arg.prop, false));
                    }
                }
                this.tableData = sortTableData;
            } else {
                this.tableData = this.jobListRaw;
            }
            this.page = 1;
        }
        private sortByProp(sortKey: any, order: boolean) {
            if (order) {
                return (a: any, b: any) => {
                    return b[sortKey] - a[sortKey];
                };
            } else {
                return (a: any, b: any) => {
                    return a[sortKey] - b[sortKey];
                };
            }
        }
        // 根据名称对表格进行排序
        private sortByName(sortKey: any, order: boolean) {
            if (order) {
                return (a: any, b: any) => {
                    a[sortKey] = isNull(a[sortKey]) ? '' : a[sortKey];
                    b[sortKey] = isNull(b[sortKey]) ? '' : b[sortKey];
                    return b[sortKey].localeCompare(a[sortKey]);
                };
            } else {
                return (a: any, b: any) => {
                    a[sortKey] = isNull(a[sortKey]) ? '' : a[sortKey];
                    b[sortKey] = isNull(b[sortKey]) ? '' : b[sortKey];
                    return a[sortKey].localeCompare(b[sortKey]);
                };
            }
        }
    
    展开全文
  • Netweaver Developing Studio 7.1 对表格进行排序和过滤
  • javaScript对表格排序

    2008-09-26 14:23:02
    使用javascript在客户端对表格进行排序的例子
  • 用鼠标拖动表格进行排序[网页特效]
  • 在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables表格的处理就相当强大,可表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理。为了更好的理解在前端表格进行排序的...
  • 利用javaScript技术实现表格排序
  • 表格排序

    2018-01-11 09:45:54
    表格排序 tablesort.js jquery-1.9.0.min.js
  • 数据进行排序并非Excel表格的专利,在Word 中同样可以对表格中的数字、文字和日期数据进行排序操作,操作步骤如下所述:  第1步,打开Word 文档窗口,在需要进行数据排序的Word表格中单击任意单元格。在“表格...

    对数据进行排序并非Excel表格的专利,在Word 中同样可以对表格中的数字、文字和日期数据进行排序操作,操作步骤如下所述:

      第1步,打开Word 文档窗口,在需要进行数据排序的Word表格中单击任意单元格。在“表格工具”功能区切换到“布局”选项卡,并单击“数据”分组中的“排序”按钮,如图所示。

    Word 对表格中对数据进行排序 - 毒来毒往 - 毒来毒往

      单击“排序”按钮

      第2步,打开“排序”对话框,在“列表”区域选中“有标题行”单选框。如果选中“无标题行”单选框,则Word表格中的标题也会参与排序,如图所示。

    Word 对表格中对数据进行排序 - 毒来毒往 - 毒来毒往

      选中“有标题行”单选框

      第3步,在Word 2007“主要关键字”区域,单击关键字下拉三角按钮选择排序依据的主要关键字。单击“类型”下拉三角按钮,在Word 2007“类型”列表中选择“笔画”、“数字”、“日期”或“拼音”选项。如果参与排序的数据是文字,则可以选择“笔画”或“拼音”选项;如果参与排序的数据是日期类型,则可以选择“日期”选项;如果参与排序的只是数字,则可以选择“数字”选项。选中“升序”或“降序”单选框设置排序的顺序类型,如图所示。

    Word 对表格中对数据进行排序 - 毒来毒往 - 毒来毒往

      设置主要关键字

      第4步,在“次要关键字”和“第三关键字”区域进行相关设置,并单击“确定”按钮对Word表格数据进行排序,如图所示。

    Word 对表格中对数据进行排序 - 毒来毒往 - 毒来毒往

     

    展开全文
  • js对表格按列进行排序

    千次阅读 2018-03-23 16:31:22
    js表格按列排序 1、列的th设置一个属性,例如: &lt;table&gt; &lt;tr&gt; &lt;th sort='vppv'&gt;&lt;span &gt;VPPV&lt;/span&gt;&lt;/th&gt; &lt;th ...

    js表格按列排序

    1、列的th设置一个属性,例如:

    <table>
        <tr>
            <th sort='vppv'><span >VPPV</span></th>
            <th sort='uv'><span >UV</span></th>
            <th><span >不参与排序</span></th>
        </tr>
    </table>

    2、根据Sort属性值进行排序,代码如下:

    //对表格中的数据,按照规则排序
    //a表示排序的字段,attr('sort')
    //b表示升序还是降序(可以设置:desc和asc两个属性,类似于sort)
    function refreshMycomOrder(a, b) {
        var t = allofobj.tdata;
        var tempa = [];
        for (i in t) {
            t[i].comId = i;
            tempa.push(t[i]);
        }
        var compare = function(prop) {
            return function(obj1, obj2) {
                var val1 = obj1[prop];
                var val2 = obj2[prop];
                if (val1 < val2) {
                    return -1;
                } else if (val1 > val2) {
                    return 1;
                } else {
                    return 0;
                }
            }
        }
        tempa.sort(compare(a));
        if (b == "desc") {
            tempa.reverse();
        }
        var tempo = {};
        var tempstr = "";
        for (i = 0; i < tempa.length; i++) {
            tempo[i] = tempa[i];
            if (i < allofobj.pagerow) {
                tempstr += "<tr>";
                tempstr += "<td>" + tempa[i].commName + "</td>";
                tempstr += "<td>" + tempa[i].pmBrokerComm + "</td>";
                tempstr += "<td class='tdgray'>" + tempa[i].brokerVppvAvgComm + "</td>";
                tempstr += "<td class='tdgray'>" + tempa[i].propVppvAvgComm + "</td>";
                tempstr += "<td>" + tempa[i].pmProp + "</td>";
                tempstr += "<td>" + tempa[i].pmPropRank + "</td>";
                tempstr += "<td>" + tempa[i].validVppv + "</td>";
                tempstr += "<td class='tdgray'>" + tempa[i].validVppvRank + "</td>";
                tempstr += "<td class='tdgray'>" + tempa[i].propVppvAvg + "</td>";
                tempstr += "<td>" + tempa[i].propVppvAvgRank + "</td>";
                tempstr += "</tr>";
            }
        }
        $('#comanatable tbody').html(tempstr);
    展开全文
  • 表格拖动排序

    2018-04-08 10:53:36
    表格行拖动排序,非常实用,支持ajax,拖动后的顺序可保存。
  • jquery表格排序

    2010-02-02 15:42:44
    jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序
  • 我们在使用Word制作和编辑表格时,有时需要表格中的数据进行排序,下面学习啦小编给大家分享Word中表格排序的方法,欢迎阅读:什么是排序?排序是计算机内经常进行的一种操作,其目的是将一组“无序”的记录序列...
  • jquery-table-sorter 一个小插件,用于按每列对表格元素进行排序
  • 在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables表格的处理就相当强大,可表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理。  为了更好的理解在前端表格进行...
  • Javasscript表格排序

    2009-12-23 09:56:55
    Javasscript表格排序 Javasscript表格排序 Javasscript表格排序

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 144,544
精华内容 57,817
关键字:

怎样对表格进行排序