console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui 调试预览</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
<style>
body {
margin: 10px;
}
</style>
</head>
<body>
<div class="layui-bg-gray" style="padding: 10px;">
<div class="layui-row layui-col-space10">
<div class="layui-col-xs4">
<div class="layui-panel">
<div style="padding: 10px 10px;">
<fieldset class="layui-elem-field layui-field-title" style="margin: 5px 5px;">
<legend style="font-size:14px;">源数据表</legend>
</fieldset>
<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">源数据库</label>
<div class="layui-input-inline">
<select name="modules" lay-verify="required" lay-search="">
<option value="">直接选择或搜索选择</option>
<option value="1">数据库1</option>
<option value="2">数据库2</option>
<option value="3">数据库3</option>
<option value="4">数据库4</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top:-15px;">
<div class="layui-inline" >
<label class="layui-form-label">数据库表</label>
<div class="layui-input-inline">
<select name="modules" lay-verify="required" lay-search="">
<option value="">直接选择或搜索选择</option>
<option value="1">数据库表1</option>
<option value="2">数据库表2</option>
<option value="3">数据库表3</option>
<option value="4">数据库表4</option>
</select>
</div>
</div>
</div>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin: 5px 5px;">
<legend style="font-size:14px;">目标数据表</legend>
</fieldset>
<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">数据库名</label>
<div class="layui-input-inline">
<select name="modules" lay-verify="required" lay-search="">
<option value="">直接选择或搜索选择</option>
<option value="1">数据库1</option>
<option value="2">数据库2</option>
<option value="3">数据库3</option>
<option value="4">数据库4</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top:-15px;">
<div class="layui-inline">
<label class="layui-form-label">表英文名</label>
<div class="layui-input-inline">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top:-15px;">
<div class="layui-inline">
<label class="layui-form-label">表中文名</label>
<div class="layui-input-inline">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="layui-col-xs8">
<div class="layui-panel">
<div style="padding: 8px 8px;">
<div class="layui-btn-container" style="height:30px;width:70%;">
<button id="demo1" type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-delete"></i>保存</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-delete"></i>删除</button>
<button id="demo1" type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-delete"></i>上移</button>
<button id="demo1" type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-delete"></i>下移</button>
<button id="demo1" type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-delete"></i>表生成</button>
</div>
</div>
</div>
<div class="layui-panel" style="margin-top:10px;">
<div style="padding: 10px 5px;">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">源字段名</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">源字段类型</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">字段英文名</label>
<div class="layui-input-inline">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">字段中文名</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">字段类型</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
</div>
<div class="layui-panel" style="margin-top:10px;">
<div style="padding: 5px 10px;">
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8">
</script>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/test/table/demo1.json'
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'序号', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'字段英文名'}
,{field:'sex', title:'字段中文名'}
,{field:'city', title:'字段类型'}
,{field:'experience', title:'源字段名'}
,{field:'experience', title:'源字段类型'}
]]
,page: true
});
});
</script>
</body>
</html>