基于LayUI扩展表格Layui-Soul-Tabl

基于LayUI扩展表格Layui-Soul-Table

天给大家分享一个挺不错的Web多功能扩展表格组件LayuiSoulTable。

layui-soul-table 基于layui风格的table扩展表格组件。提供了超过40+功能。

功能特性

表头筛选、自定义条件（支持前端筛选、后台筛选）
拖动列调整顺序、隐藏显示列
excel导出（根据筛选条件和列顺序导出）
子表（表中表、无限层级、子表同样支持前3个功能）
拖动行
右击快捷菜单
合计栏支持固定列、固定列支持滚动
双击自适应列宽
右侧固定列列宽拖动改到单元格左侧

快速开发

将下列模块导入到项目中。

soulTable.js：总入口
tableFilter.js：表头筛选
excel.js：excel导出
tableChild.js：子表可单独使用
tableMerge.js：单元格合并可单独使用

引入使用

// 自定义模块，这里只需要开放soulTable即可
layui.config({
    base: 'ext/',   // 模块目录
}).extend({                         
    soulTable: 'soulTable'  // 模块别名
})

table.render({
    elem: '#myTable'
    ,height: $(document).height() - $('#myTable').offset().top - 20
    ,limit: 20
    ,page: true
    ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field:'poetry', title:'诗词', width:188, filter:true, sort: true}
        ,{field:'name',  title:'诗人', width:100, filter:true, sort: true}
        ,{field:'type', title:'类型', width:100, filter:true}
        ,{field:'dynasty', title:'朝代',  width:150, filter:true}
        ,{field:'sentences', title:'名句', width:400, filter:true}
        ,{title:'操作', toolbar: '#barDemo', width:150}
    ]]
    ,done: function () {
        soulTable.render(this)
    }
})

layui-soul-table提供了非常丰富的使用说明文档，有需要的可以去看看哈。

# 预览地址
https://saodiyang.gitee.io/layui-soul-table/

# 仓库地址
https://gitee.com/saodiyang/layui-soul-table

好了，今天就分享到这里。如果web项目有需要table功能，不妨可以试一试。

TML标签：

基本标签：

<html></html>双标签开头结尾 HTML标签为最大的标签称为根标签

<head></head> 文档头部标签且必须设置title

<title></title> 页面标题

<body></body> 文档的主体包含页面的内容

<h1>-<h6> HTML提供6个等级的页面标题有大到小

<p></p> p标签用于定义段落可以将页面分为若干个段落根据窗口大小自动换行

<br/>单标签换行标签（break打断）

格式化标签：

加粗 <strong></strong>or<b></b>

斜线 <em></em>or<i></i>

删除线 <del></del>or<s></s>

下划线 <ins></ins>or<u></u>

div和span标签：

没有语义属于一种盒子来装内容

<div></div> 表示分割分区用来布局一行一个大盒子

<span></span>意为跨度，跨距一行可以哦有多个小盒子

图像标签：

<img src="图像路径(url)"/> 定义页面中的图像

图像标签包含多个属性

src 图片路径必须属性

alt 文本替换文本图像不能显示的文字

title 文本鼠标放到图像上显示文字

width 像素宽度

height 高度

border 边框

相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

分类：下级路径/ 上级路径../

绝对路径：是指目录下的绝对位置，如硬盘中的路径或网路地址

超链接标签：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href用于指定链接目标的url地址(必须属性)

target用于指定链接打卡方式 _self为默认值 _blank为在新窗口打开方式

锚点链接：可以快速到页面某个位置

在链接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">目标</a>

找到目标位置标签，里面添加一个id属性=名字，如：<h3 id="two">目标</h3>

注释：

快捷键CTRL + /

特殊字符：

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
?	?	已注册
?	?	版权
?	?	商标
		半个空白位
		一个空白位
		不断行的空白

表格标签：

<table></table> 是用于定义表格的标签

<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中

<tb></tb> 用于定义表格的单元格，必须嵌套在<tr></tr>标签中

<td> 元素中的文本通常是普通的左对齐文本。字母td指表格数据(table data)，即数据单元格的内容

表头单元格标签：

<th>标签表示HTML表格的表头部分 <th> 元素中的文本通常呈现为粗体并且居中。

表格属性：

align left center right 规定表格相对于周围元素的对齐方式
border 1or"" 规定表格单元是否拥有边框默认为"",表示没有边框

cellpadding 像素值规定单元边沿与其内容的空白，默认1像素

cellspacing 像素值规定单元格直接的空白默认2像素

with 像素值or百分比规定表格的宽度

合并单元表格方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

列表标签：

<ul>标签表示无序列表里面只能包含li

<ol>有序标签里面只能包含li

<li>相当于一个容器定义列表项与<ui>or<li>嵌套使用 li里面可以包含任何标签

<dl>标签用于定义描述列表(或自定义列表),该标签会与<dt>(定义项目和名字)和<dd>(描述每一个项目名字)一起使用

表单标签：

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist> New	指定一个预先定义的输入控件选项列表
<keygen> New	定义了表单的密钥对生成器字段
<output> New	定义一个计算结果

<input>标签用于收集用户信息包含一个type属性可以有多种样式

<input type="属性值" />

属性值：

button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

<label>标签

<label> 标签为 input 元素定义标注（标记）。 label是标注的意思

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

面效果展示

页面完整代码

<!DOCTYPE HTML>
<html>
<head> 
<title>文内链接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使页面居中显示，并展视窗50%宽度-->
<div style="position:fixed; top:0px;"><!--使导航菜单悬停在顶端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情况</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役动态</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>
</div><!--使导航菜单悬停在顶端（结尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隐藏滚动条-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >试飞进程</a></h2>
歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试，13时08分成功着陆，历时18分钟。<br>
整个首飞过程在歼-10S战斗教练机陪伴下完成 。
2016年10月28日，首次发布“空军试飞员将驾歼-20飞机亮相中国航展”后，还陆续发布了“歼-20战机列装空军作战部队”“空军歼-20战机首次开展海上方向实战化训练”等。
<h2><a id="chapter2">研制情况</a></h2>
在2016年11月1日，第十一届珠海航展，歼-20首次进行空中飞行展示。两架歼-20做了公开飞行，不仅在现场引起轰动，也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作，也进入了世界最先进的第五代战斗机行列，它是中国国防能力高速发展的一个象征。<br>
2018年11月11日，第十二届中国航展在珠海迎来“高光时刻”：歼-20战机在公开飞行展示中挂弹开仓，震撼献礼人民空军成立69周年纪念日。 <br>
2019年10月13日，庆祝人民空军成立70周年航空开放活动新闻发布上，空军新闻发言人申进科大校介绍歼-20战机列阵人民空军“王牌部队”
<h2><a id="chapter3" >服役动态</a></h2>
2017年3月9日，中央电视台报道歼-20战斗机正式进入空军序列。<br>
2017年3月13日，《中国日报》发布消息称，中国自主研制的歼-20近期将装配国产发动机。<br>
2017年7月30日，歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来，3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>
2017年9月28日，在中国国防部行记者会上，国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>
2017年11月10日上午，中国空军发言人申进科大校表示，歼-20 列装部队后，已经开展编队训练。<br>
2018年2月9日，中国空军新闻发言人申进科大校发布消息，歼-20开始列装空军作战部队。<br>
2018年10月30日，中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>
2019年10月1日，歼-20现身庆祝中华人民共和国成立70周年阅兵式；阅兵中，歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅；该三款歼击机被誉为中国空军歼击机家族的“三剑客”，是未来联合作战的骨干力量
<h2><a id="chapter4" >总体评价</a></h2>
歼-20是眼下亚洲区域最先进的战机，这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟，尚未正式交付入役；美国F-35战斗机也多次出现飞机供氧不足的问题，大面积停飞，出口受阻；韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况，后又传出了合作方印尼打算撤资并已告知韩国的消息。因此，中国歼-20战机成为亚太区域领跑的优势战机。<br>
中国空军正向全疆域作战的现代化战略性军种迈进，成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队，将进一步提升空军综合作战能力，有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>
歼20是我国自主研制的第五代战斗机，它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机，是按照性能、技术和进度要求，研制开发我国自己的新一代隐身战斗机。引领技术发展，指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破，这是中国航空工业从跟跑到并跑，再到领跑的必由之路。创新研发体系，是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制，我们建立了具有我国特色的数字化研发体系。建设卓越团队，是指通过型号研制，锤炼一支爱党爱国的研制队伍，这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来，我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="歼20气动外形分析"><!--必须保证画面尺寸与页面显示尺寸一致！-->
</map>
</div><!--小div(结尾)-->
</div><!--小div套大div隐藏滚动条（结尾）-->
</div><!--使页面居中显示，并展视窗50%宽度（结尾）-->
</body> 
</html>

页面制作技术解析

1.页面内容居中显示方法

2.导航栏悬停顶端方法

3.鼠标滑过导航标题或链接时改变背景色提示

3.隐藏滚动条方法

4.图片区域链接

大家结合代码和技术解析，先自行分析一下每段代码的作用，以及它们之间的前后关系。这一步练习对培养代码阅读能力很有好处，希望大家可以先自行阅读分析。

下一次，我会逐步演示“页面制作技术解析”中的五个步骤以及一些注意事项。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

整合营销服务商