console 命令行工具 X clear
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;
		}
        input[type=text] {
            width: 150px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            background-color: white;
            background-position: 10px 10px; 
            background-repeat: no-repeat;
            padding: 12px 20px 12px 20px;
            -webkit-transition: width 0.4s ease-in-out;
            transition: width 0.4s ease-in-out;
            float:right;
        }

        input[type=text]:focus {
             width: 100%;
        }
	</style>
</head>

<body>
	<div class="layui-bg-gray " style="padding: 15px;">
        <div class="layui-row">
			<div class=" layui-col-md12 ">
                <span class="layui-breadcrumb">
                    <a href="/">首页</a>
                    <a href="/demo/">演示</a>
                    <a><cite>导航元素</cite></a>
                </span>
			</div>
		</div>
		<div class="layui-row" style="margin-top:10px;">
			<div class=" layui-col-md12 ">
				<div class="layui-panel ">
					<div style="padding: 15px 15px;height:50px; ">一个面板</div>
				</div>
			</div>
		</div>
		<div class="layui-row" style="margin-top:10px;">
			<div class="layui-col-md12">
				<div class="layui-panel" 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-addition"></i>创建</button>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                        <button 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>
                    </div>
                    <div class="layui-input-inline" style="float:right;margin-top:-30px;margin-right:46px;">
                        <input type="text" name="search" placeholder="搜索" style="height:30px;">
                    </div>
                    <div class="layui-btn-container" style="height:30px;float:right;margin-top:-30px;">
						<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" style="margin-right:0px;background:#EFEFEF;"><i class="layui-icon layui-icon-search" style="font-size:18px;"></i></button>
                    </div>
                </div>  
            </div> 
        </div>
        <div class="layui-row" style="margin-top:10px;">
			<div class=" layui-col-md12 ">
				<div class="layui-panel " style="padding: 5px 5px;">
					<table class="layui-hide" id="test"></table>
				</div>
			</div>
		</div>
    </div>
    <script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
 
<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'/demo/table/user/'
    ,toolbar: true
    ,defaultToolbar: ['filter', 'print', 'exports', {
      title: '提示' //标题
      ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
      ,icon: 'layui-icon-tips' //图标类名
    }]
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'username', width:80, title: '用户名'}
      ,{field:'sex', width:80, title: '性别', sort: true}
      ,{field:'city', width:80, title: '城市'}
      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'experience', title: '积分', sort: true}
      ,{field:'score', title: '评分', sort: true}
      ,{field:'classify', title: '职业'}
      ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
  });
});

layui.use(['dropdown', 'util', 'layer', 'table'], function(){
  var dropdown = layui.dropdown
  ,util = layui.util
  ,layer = layui.layer
  ,table = layui.table
  ,$ = layui.jquery;
  
  //初演示
  dropdown.render({
    elem: '#demo1'
    ,data: [{
      title: '主动数据表'
      ,id: 100
    },{
      title: '被动数据表'
      ,id: 101
    }]
    ,click: function(obj){
      layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
      //layer.tips('点击了：'+ table, this.elem, {tips: [1, '#5FB878']})
    }
  });


});
</script>
</body>
</html>