This repository has been archived by the owner on Jan 6, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #44 from Jinqn/dev-1.3.0
Dev 1.3.0 grunt编译支持parse的编译, 修改表格排序的demo
- Loading branch information
Showing
7 changed files
with
169 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,71 +1,84 @@ | ||
<!DOCTYPE HTML> | ||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | ||
"http://www.w3.org/TR/html4/loose.dtd"> | ||
<html> | ||
<head> | ||
<title>UEditor表格排序示例</title> | ||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | ||
<!--使用版--> | ||
<!--<script type="text/javascript" charset="utf-8" src="../dist/utf8-php/ueditor.config.js"></script>--> | ||
<!--<script type="text/javascript" charset="utf-8" src="../dist/utf8-php/ueditor.all.js"></script>--> | ||
|
||
<!--开发版--> | ||
<script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script> | ||
<script type="text/javascript" charset="utf-8" src="editor_api.js"> </script> | ||
<script type="text/javascript" charset="utf-8" src="../ueditor.parse.js"> </script> | ||
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--> | ||
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--> | ||
<script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script> | ||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | ||
<script src="../ueditor.parse.js" type="text/javascript"></script> | ||
<script> | ||
// 语法 | ||
// uParse(selector,[option]) | ||
/* | ||
selector支持 | ||
id,class,tagName | ||
*/ | ||
/* | ||
目前支持的参数 | ||
option: | ||
highlightJsUrl 代码高亮相关js的路径 如果展示有代码高亮,必须给定该属性 | ||
highlightCssUrl 代码高亮相关css的路径 如果展示有代码高亮,必须给定该属性 | ||
liiconpath 自定义列表样式的图标路径,可以不给定,默认'http://bs.baidu.com/listicon/', | ||
listDefaultPaddingLeft : 自定义列表样式的左边宽度 默认'20', | ||
customRule 可以传入你自己的处理规则函数,函数第一个参数是容器节点 | ||
*/ | ||
|
||
<style type="text/css"> | ||
#btns { | ||
margin: 20px 0px; | ||
} | ||
#btns .message{ | ||
color:red; | ||
} | ||
#preview { | ||
padding: 10px; | ||
width:1004px; | ||
border: 2px dashed #EEE; | ||
} | ||
</style> | ||
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> | ||
<title></title> | ||
</head> | ||
<body> | ||
<h1>UEditor表格排序示例</h1> | ||
<div> | ||
<script id="editor" type="text/plain" style="width:1024px;height:300px;"> | ||
<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> </tbody> </table> <p> <span style="font-size: 14px; color: rgb(127, 127, 127);">当前排序: 按照第一列数值大小降序排序</span> </p> | ||
</script> | ||
</div> | ||
<div id="btns"> | ||
<input id="updateToPreview" type="button" value="更新编辑器内容到下面区域" /> | ||
<span class="message">点击下面表格第一行的单元格进行排序</span> | ||
<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> | ||
<div id="preview"> | ||
<p><br /></p> | ||
</div> | ||
</body> | ||
<script type="text/javascript"> | ||
|
||
//实例化编辑器 | ||
var ue = UE.getEditor('editor'); | ||
ue.ready(updateToPreview); | ||
|
||
//设置按钮监听 | ||
$G('updateToPreview').onclick = updateToPreview; | ||
|
||
//预览编辑器数据 | ||
function updateToPreview(){ | ||
$G('preview').innerHTML = ue.getContent(); | ||
uParse('#preview',{ | ||
rootPath : '../' | ||
}); | ||
} | ||
|
||
//根据id获取dom | ||
function $G(id){ | ||
return document.getElementById(id); | ||
} | ||
|
||
<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> | ||
</body> | ||
</html> |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.