zunyunkeji-AdminTemplate
/
extend
/
table.html

<!DOCTYPE html>
<html>

<head>
    <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, maximum-scale=1">
    <title>layout 后台大布局 - 桌面</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <link rel="stylesheet" href="../res/css/main.css">
</head>

<body>

    <blockquote class="layui-elem-quote layui-table-tools">
        <div class="fl">
            <button class="layui-btn layui-btn-danger" id="btn-del">批量删除</button>
            <button class="layui-btn" id="btn-add">添加</button>
        </div>
        <div class="fr">
            <span class="layui-form-label">搜索条件：</span>
            <div class="layui-input-inline">
                <input type="text" autocomplete="off" placeholder="请输入搜索条件" class="layui-input">
            </div>
            <button class="layui-btn mgl-20">查询</button>
            <button class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></button>
        </div>
    </blockquote>
    <!-- 数据表格 -->
    <table class="layui-table" id="demo" lay-filter="demotable" lay-data="{id:'test', url:'data.json',height:'full-80', even:true, page:true ,limits: [15, 30, 50]}">
        <thead>
            <tr>
                <th lay-data="{checkbox:true}"></th>
                <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                <th lay-data="{field:'username', width:80}">用户名</th>
                <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
                <th lay-data="{field:'city', width:80}">城市</th>
                <th lay-data="{field:'sign', width:177}">签名</th>
                <th lay-data="{field:'experience', width:80, sort: true}">积分</th>
                <th lay-data="{field:'score', width:80, sort: true}">评分</th>
                <th lay-data="{field:'classify', width:80}">职业</th>
                <th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
                <th lay-data="{fixed: 'right', width:200, align:'center', toolbar: '#tablebar'}">操作</th>
            </tr>
        </thead>
    </table>


    <!-- 工具条 -->
    <script type="text/html" id="tablebar">
        <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
    </script>

    <script src="../res/layui/layui.js"></script>
    <script src="../res/js/base.js"></script>
    <script>
	layui.use(['element','form','table','laypage','laytpl','layer'], function () {
		var $ = layui.$, //jquery
		element = layui.element, //元素操作
		form = layui.form, //表单
		table = layui.table, //数据表格
		laypage = layui.laypage, //分页
		laytpl = layui.laytpl, //模板引擎
		layer = layui.layer; //弹出层

        // //数据绑定
        // var tableIns = table.render({
        //     elem: '#demo'
        //     , method: 'post'
        //     , url: 'data.json'
        //     , height: 'full-80'
        //     , cols: [[
        //         { checkbox: true }
        //         , { field: 'id', title: 'ID', width: 80, sort: true }
        //         , { field: 'username', title: '用户名', width: 120 }
        //         , { field: 'sex', title: '性别', width: 80, sort: true }
        //         , { field: 'city', title: '城市', width: 80 }
        //         , { field: 'sign', title: '签名', width: 177 }
        //         , { field: 'experience', title: '积分', width: 80, sort: true }
        //         , { field: 'score', title: '评分', width: 80, sort: true }
        //         , { field: 'classify', title: '职业', width: 80 }
        //         , { field: 'wealth', title: '财富', width: 135, sort: true }
        //         , { fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#tablebar' }
        //     ]]
        //     , skin: 'row' //表格风格
        //     , even: true
        //     , page: true //是否显示分页
        //     , limits: [5, 7, 10]
        //     , limit: 5 //每页默认显示的数量
        // });

        //监听工具条
        table.on('tool(demotable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('你确认要删除吗？', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });
            }
        });

        // 刷新
        $('#btn-refresh').on('click', function () {
            table.reload('test');
        });

        $("#btn-add").click(function (event) {
            Dialog.Open('预览', 'http://www.wdphp.com', '600', '500');
        });

        $("#btn-del").click(function (event) {
            Dialog.Confirm("你确认要删除吗？", "http://www.wdphp.com", { id: 1 });
        });
	});

    </script>


</body>

</html>