layui.js中table的cols属性详细介绍

在 layui.js 的 table 组件中，cols 属性是用于定义表格列的配置项。每个列的配置都是一个对象，包含了一些属性，下面是一些常用的属性及其作用：

• field：列字段名，对应数据源中的属性名。
• title：列标题，显示在表头中。
• width：列宽度，可以是数字或百分比。
• sort：是否开启排序功能，可选值为 true 或者 false。
• align：列的水平对齐方式，可选值为 left、center 或 right。
• templet：自定义列模板，可以是一个函数或者一个 HTML 字符串。
• toolbar：绑定工具条，可以是一个 HTML 字符串或者一个选择器。
• edit：是否开启单元格编辑功能，可选值为 text、select 或者 checkbox。
• fixed：列固定，可选值为 left、right 或者 true（固定在左侧）或者 true（固定在右侧）。
  举个例子，下面是一个包含了一些常用属性的 cols 配置对象：

var cols = [
  {field: 'id', title: 'ID', width: 80},
  {field: 'name', title: '姓名', width: 120},
  {field: 'age', title: '年龄', width: 80, sort: true},
  {field: 'email', title: '邮箱', width: 200},
  {field: 'phone', title: '电话', width: 150},
  {field: 'address', title: '地址', width: 300},
  {field: 'operate', title: '操作', width: 120, toolbar: '#operateBar'}
];

<script type="text/html" id="operateBar">
    <button lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>
    <button lay-event="remove" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
</script>

在这个例子中，我们定义了一个包含了七个列的表格，每个列都包含了 field、title 和 width 属性，其中 age 列还开启了排序功能，operate 列绑定了一个工具条。

templet
属性用于自定义列模板，可以是一个函数或者一个 HTML 字符串。如果是一个函数，那么它会在渲染单元格时被调用，传入当前单元格的值和数据源对象，返回一个 HTML 字符串作为单元格内容。如果是一个 HTML 字符串，那么它会被直接渲染到单元格中。

下面是一个示例，假设我们有一个包含学生信息的数据源，其中有一个列表类型的属性 courses，表示学生所选的课程。我们希望在表格中显示学生所选的课程名称，而不是课程 ID。我们可以使用 templet 属性来实现这个功能。

首先，我们需要在 cols 属性中定义一个包含 courses 属性的列，并将 templet 属性设置为一个函数，如下所示：

var cols = [
  {field: 'id', title: 'ID', width: 80},
  {field: 'name', title: '姓名', width: 120},
  {field: 'age', title: '年龄', width: 80},
  {field: 'courses', title: '课程', width: 200, templet: '#courseTpl'},
  {field: 'phone', title: '电话', width: 150},
  {field: 'address', title: '地址', width: 300},
  {field: 'operate', title: '操作', width: 120, toolbar: '#operateBar'}
];

在这个例子中，我们定义了一个包含了四个列的表格，其中 courses 列的 templet 属性被设置为 #courseTpl，表示使用一个 ID 为 courseTpl 的模板来渲染单元格。接下来，我们需要在 HTML 中定义这个模板，如下所示：

<script type="text/html" id="courseTpl">
  {{# layui.each(d.courses, function(index, course){ }}
    {{ course.name }}
    {{# if(index < d.courses.length - 1){ }} , {{# } }}
  {{# }); }}
</script>

在这个模板中，我们使用了 layui.each() 方法来遍历学生所选的课程，生成一个包含课程名称的字符串，最后作为模板的返回值。在模板中，d 表示当前行的数据源对象，courses 表示当前单元格的值，即学生所选的课程列表。通过遍历 courses 列表，我们可以生成一个包含所有课程名称的字符串，并在单元格中显示出来。

需要注意的是，在模板中使用 layui.each() 方法时，需要将列表类型的数据源作为第一个参数传入，即 layui.each(d.courses, function(index, course){ … })。

上述例子也可以写成如下：

var cols = [
  {field: 'id', title: 'ID', width: 80},
  {field: 'name', title: '姓名', width: 120},
  {field: 'age', title: '年龄', width: 80},
  {field: 'courses', title: '课程', width: 200, templet: function(d){
	layui.each(d.courses, function(index, course){ 
		course.name 
		if(index < d.courses.length - 1){
		,
		}
	}
}},
  {field: 'phone', title: '电话', width: 150},
  {field: 'address', title: '地址', width: 300},
  {field: 'operate', title: '操作', width: 120, toolbar: '#operateBar'}
];