1801010633
/
201912G06


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script src="../ueditor.parse.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
<h1>表格排序演示</h1>
<p>
<p>
    <strong>默认排序方法有五种:</strong><br/>
    reversecurrent : 逆序当前<br/>
    orderbyasc : 按ASCII字符升序<br/>
    reversebyasc : 按ASCII字符降序<br/>
    orderbynum : 按数值大小升序<br/>
    reversebynum : 按数值大小降序
</p>
<p>
    <span style="font-size: 14px; color: rgb(127, 127, 127);">表格data-sort-type属性值为reversebynum，<span style="color:#ff511a; font-weight: bold;">按照数值大小降序排序</span>，点击第一行的单元格进行排序。</span>
</p>
<div id="content1" class="content">
    <table data-sort="sortEnabled" width="992" class="sortEnabled" data-sort-type="reversebynum">
        <tbody>
        <tr class="firstRow"> <td width="165">343</td> <td width="165">352</td> <td width="165">323</td> <td width="165">234</td> <td width="165">379</td> <td width="166">782</td> </tr>
        <tr> <td width="165">341</td> <td width="165">163</td> <td width="165">422</td> <td width="165">234</td> <td width="165">725</td> <td width="166">833</td> </tr>
        <tr> <td width="165">221</td> <td width="165">456</td> <td width="165">335</td> <td width="165">423</td> <td width="165">445</td> <td width="166">793</td> </tr>
        <tr> <td width="165">112</td> <td width="165">277</td> <td width="165">563</td> <td width="165">423</td> <td width="165">932</td> <td width="166">425</td> </tr>
        <tr> <td width="165">587</td> <td width="165">175</td> <td width="165">159</td> <td width="165">734</td> <td width="165">582</td> <td width="166">458</td> </tr>
        </tbody>
    </table>
</div>

<p>
    <br />
</p>
<p>
    <span style="font-size: 14px; color: rgb(127, 127, 127);">自定义排序，<span style="color:#ff511a; font-weight: bold;">按照个位数排序</span>，点击第一行的单元格进行排序。</span>
</p>
<div id="content2" class="content">
    <table data-sort="sortEnabled" width="992" class="sortEnabled">
        <tbody>
        <tr class="firstRow"> <td width="165">343</td> <td width="165">352</td> <td width="165">323</td> <td width="165">234</td> <td width="165">379</td> <td width="166">782</td> </tr>
        <tr> <td width="165">341</td> <td width="165">163</td> <td width="165">422</td> <td width="165">234</td> <td width="165">725</td> <td width="166">833</td> </tr>
        <tr> <td width="165">221</td> <td width="165">456</td> <td width="165">335</td> <td width="165">423</td> <td width="165">445</td> <td width="166">793</td> </tr>
        <tr> <td width="165">112</td> <td width="165">277</td> <td width="165">563</td> <td width="165">423</td> <td width="165">932</td> <td width="166">425</td> </tr>
        <tr> <td width="165">587</td> <td width="165">175</td> <td width="165">159</td> <td width="165">734</td> <td width="165">582</td> <td width="166">458</td> </tr>
        </tbody>
    </table>
</div>


<script>
    // 语法
    // uParse(selector,[option])
    /*
     selector支持
     id,class,tagName
     */
    /*
     目前支持的参数
     option:
     highlightJsUrl 代码高亮相关js的路径 如果展示有代码高亮，必须给定该属性
     highlightCssUrl 代码高亮相关css的路径 如果展示有代码高亮，必须给定该属性
     liiconpath 自定义列表样式的图标路径，可以不给定，默认'http://bs.baidu.com/listicon/',
     listDefaultPaddingLeft : 自定义列表样式的左边宽度 默认'20',
     customRule 可以传入你自己的处理规则函数，函数第一个参数是容器节点
     */
    uParse('#content1',{
        rootPath : '../'
    })
    uParse('#content2',{
        rootPath : '../',
        tableSortCompareFn: function(td1, td2){
            var value1 = td1.innerText||td1.textContent,
                    value2 = td2.innerText||td2.textContent;
            return parseInt(value1) % 10 > parseInt(value2) % 10;
        }
    })

</script>

</body>
</html>