万捷博客

万捷博客
一个知识汇聚的地方
首页 » layui » layui复选框checkbox使用方法

layui复选框checkbox使用方法

layui框架中在table使用复选框checkbox的时候,发现复选框不显示,查看源码发现根本就没有复选框的代码,在网上找了半天,答案基本都是说:用form.render()刷新、没有正确载入JS等,没有一个能解决的,后来无意中才发现,原来需要增加 checkbox:true 才行,下面直接上代码:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">

</head>

<body>

<table class="layui-hide" id="test"></table>


<script src="./plugins/layui/layui.js" charset="utf-8"></script>
<script>

layui.use('table', function(){
var table = layui.table;

table.render({
elem: '#test'
,url:'table.json'
,width: 900
,height: 600
,cols: [[
{checkbox:true,type:'checkbox', fixed: 'left'}//这一行用于显示复选框
,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
,{field:'username', width:80, title: '用户名', fixed: 'left'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', width: 219, title: '签名'}
,{field:'experience', width:80, title: '积分', sort: true}
,{field:'score', width:80, title: '评分', sort: true}
,{field:'classify', width:80, title: '职业'}
,{field:'wealth', width:120, title: '财富', sort: true}
]]
,page: true
});


});

</script>

</body>

</html>

文章如无特别注明均为原创! 作者: admin, 转载或复制请以 超链接形式 并注明出处 万捷博客
原文地址《 layui复选框checkbox使用方法》发布于2018-11-9

打赏作者

评论

游客

看不清楚?点图切换
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册