master

分支 (1)

标签 (23)

管理

管理

master

4.2.0

4.1.0

4.0.0

3.9.0

3.8.0

3.7.0

3.6.0

3.5.0

3.4.0

3.3.0

3.2.0

3.1.0

3.0.0

2.9.0

2.8.0

2.7.0

2.6.0

2.5.0

2.4.0

2.3.0

ueditor-plus
/
_examples
/
sortableDemo.html

<!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>
    <script>var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?f84f35a44b5cc5c0b10c3fabdf0f322b";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();</script>
    <link rel="stylesheet" href="./style.css"/>
</head>
<body class="demo-editor-page">
<div>
    <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>

</div>
</body>
</html>