table中的属性说明

本文介绍了如何在表格中设置不同的边框样式,包括隐藏横向、纵向分割线及整体边框的方法。同时还提供了只显示特定边框选项的详细说明,并列举了多种边框样式的实现方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

隐藏表格的分割线:
<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线
<table border rules=rows cellspacing=0 align=right> 可以隐藏纵向的分隔线
<table border rules=none cellspacing=0 align=center> 可以隐藏横向和纵向的分隔线

表格中边框的显示:
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>

边框样式:
语法: border-style: <值>

none:无样式;
dotted:点线;
dashed:虚线;
solid:实线;
double:双线;
groove:槽线;
ridge:脊线;
inset:内凹;
outset:外凸。

 
### layui 表格模块 `cols` 属性详解 在 LayUI 的表格组件中,`cols` 是用于定义表格列结构的核心属性之一。它接受一个二维数组作为其值,每一维代表一组表头配置项。以下是关于 `cols` 属性的具体说明以及如何结合其他功能使用的示例。 #### 基本语法 `cols` 属性的值是一个嵌套数组,外层数组可以包含多个子数组,每个子数组对应一栏或多栏的表头分组。如果只需要简单的单级表头,则只需提供一层子数组即可[^1]。 ```javascript table.render({ elem: '#test', height: 312, url: '/demo/table/user/', // 数据接口地址 page: true, // 开启分页 cols: [[ // 列字段设置 {field:'id', title:'ID', width:80}, {field:'username', title:'用户名', width:120} ]] }); ``` 上述代码片段展示了最基本的 `cols` 配置方式,其中每列表头由对象组成,常见的键有: - **field**: 对应数据源中的字段名。 - **title**: 显示在表头的文字描述。 - **width**: 定义该列宽度(单位像素或百分比)。 - **templet**: 自定义单元格内容渲染模板函数^。 #### 复杂场景下的应用实例 当遇到复杂情况比如展示关联数据或者格式化特定类型的数据时,可以通过自定义模板完成更灵活的内容呈现。例如处理学生选课信息并将其转换成易读形式: ```javascript table.render({ elem: '#studentInfoTable', data: studentDataList, cols: [[ { field: 'name', title: '姓名', width: 150 }, { field: 'courses', title: '已选课程', templet: function(d){ var courseNames = d.courses.map(function(courseId){ return getCourseNameById(courseId); }).join(", "); return "<span>" + (courseNames || '-') + "</span>"; }, width: 300 } ]], }); function getCourseNameById(id) { let coursesMap = {"C001":"高等数学","C002":"大学英语"}; return coursesMap[id]; } ``` 这里利用了 `templet` 来动态获取和拼接字符串从而达到美化输出的目的^。 另外,在某些情况下可能还需要加载外部资源如图片等媒体文件至表格内部节点位置处。此时同样依赖于 `templet` 方法配合 HTML 片段注入操作达成目标效果[^3]^: ```javascript { field: 'avatarUrl', title: '头像预览', templet: '<div><img src="{{d.avatarUrl}}" style="height:40px;"></div>', width: 100 } ``` #### 文件上传联动刷新表格视图 对于涉及文件管理类业务逻辑的应用程序而言,通常会涉及到文件上传之后重新拉取最新资料更新当前页面上的表格展现状态这一流程。这时就可以借助 JavaScript 函数封装统一调用机制简化重复动作执行过程[^4]^: ```javascript // 封装表格重载方法 function tableDoReload(){ table.reload('exampleTable'); } upload.render({ elem: '#uploadBtn' ,url: '/api/uploadFile' ,method: 'POST' ,done: function(res){ console.log(res); if(res.code === 0){ layer.msg('上传成功!'); tableDoReload(); }else{ layer.alert(res.message); } } }); ``` 以上即为有关 layUI framework 下 table 组件内 cols 参数较为详尽的功能解析及其实际应用场景举例演示部分。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值