代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>简单案例</title>
<meta name='renderer' content='webkit'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<link rel='stylesheet' href='../../../layui/css/layui.css' media='all'>
<style>
body {
padding: 40px;
}
.layui-card-header > span {
font-weight: bold;
font-size: 18px;
color: #0C0C0C;
}
.open-new {
font-size: 14px;
border-bottom: #dedede solid 1px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class='layui-card'>
<div class='layui-card-header'>
<span>简单案例</span>
<a href="index2.html" class="open-new">完整案例</a>
<a href="index3.html" class="open-new">网络案例</a>
</div>
<div class='layui-card-body'>
<button type="button" class="layui-btn layui-btn-normal btn-demo-reload">表格重载</button>
<table id='test' lay-filter='test'></table>
<pre class='layui-code'></pre>
</div>
</div>
<script type='text/html' id='barDemo'>
<a class='layui-btn layui-btn-xs' lay-event='edit'>编辑</a>
<a class='layui-btn layui-btn-danger layui-btn-xs' lay-event='del'>删除</a>
</script>
<script src='../../../layui/layui.js'></script>
<script id='demo-script'>
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 说明 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
// 1、支持layui table 的所有参数
// 2、扩展参数4个:
// openCols:[]
// sort:f
// edit:f
// openType
// 详见完整版案例
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 使用案例 简单版↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
layui.config({
//配置 layui 第三方扩展组件存放的基础目录
base: '../../../layui_exts/'
}).extend({
openTable: 'openTable/openTable'
}).use(['openTable'], function () {
layui.openTable.render({
elem: '#test'
, id: '#test'
, url: 'test.json'
, toolbar: '#barDemo'
, cols: [[
{field: 'id', title: 'ID', sort: true}
, {field: 'username', title: '用户名', edit: true}
, {field: 'city', title: '城市', edit: true}
, {title: '操作', toolbar: '#barDemo', width: 150}
]]
//注:展开的列Items
, openCols: [
{
field: 'sign', title: '签名', templet: function (item) {
// 重新定义排版
return "<div style='background: #333333;color: white'>" + item.sign + "</div>"
}
}
, {
field: 'wealth', title: '财富', onDraw: function (it, item) {
// 使用默认风格排版 【左边title+右边值+下划线】
return item['wealth'];
}
}
, {field: 'experience', title: '积分', edit: true}
, {field: 'classify', title: '职业'}
]
//注:监听排序 {openTable}
, sort: function (obj) {
console.log(obj)
}
//注:0:同时只展开一项 1:一直展开不关闭之前 def:0 {openTable}
, openType: 0
});
// 工具栏点击案例
layui.table.on('toolbar(test)', function (obj) {
layer.msg("点击了");
});
//注:表格重载案例
layui.jquery(".btn-demo-reload").click(function () {
layui.table.reload("#test", {where: {text: "测试搜索条件"}});
});
// 监听行工具事件
layui.table.on('tool(test)', function (obj) {
var data = obj.data;
//console.log(obj)
if (obj.event === 'del') {
layer.msg("删除");
} else if (obj.event === 'edit') {
layer.msg("编辑");
}
});
//TODO 注:其他相关案例与layui官网同步,需要使用[layui.table]
//注:更新样例代码格式化展示 实际开发可忽略不管
setTimeout(function () {
layui.$('.layui-code').eq(0).text(layui.$('#demo-script').html())
}, 20)
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。