mirror of
https://github.com/hequan2017/seal.git
synced 2026-02-07 04:13:35 +08:00
86 lines
4.1 KiB
Python
86 lines
4.1 KiB
Python
<!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> |