layui table前端生成序号
时间: 2023-05-16 10:07:48 浏览: 80
可以使用 layui 的 table 模块的 templet 属性来实现前端生成序号,具体代码如下:
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
url: '/demo/table/user/',
cols: [[
{field:'id', title:'ID', width:80, templet: '#indexTpl'},
{field:'username', title:'用户名', width:120},
{field:'email', title:'邮箱', width:150},
{field:'sex', title:'性别', width:80, sort:true},
{field:'city', title:'城市', width:100},
{field:'sign', title:'签名', width:200},
{field:'experience', title:'积分', width:80, sort:true},
{field:'score', title:'评分', width:80, sort:true},
{field:'classify', title:'职业', width:100},
{field:'wealth', title:'财富', width:135, sort:true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
//自定义序号模板
layui.laytpl('#indexTpl').render(function(index){
return index + 1;
});
});
</script>
在上面的代码中,我们使用了 layui 的 table 模块来渲染表格,其中 templet 属性指定了自定义序号模板,这个模板使用了 layui 的 laytpl 模块来渲染序号。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)