Layui表格操作

懒的废话，直接看
1.效果图：
2.该下载的去下载(Layui)，该引入的引入。
DEMO CODE:
<link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css">
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/js/jquery.base64.js"></script>

<body>
<div class="demoTable" style="text-align: right">



    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" placeholder="请输入关键字" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table lay-filter="all" id="all"></table>


</body>
<script type="text/javascript">


    var table, layDate, layForm;
    var searchColumnsSend=new Array();
    var demoReload = $('#demoReload');
    var needAddSearchColumns = true;
    var searchID = '{:I("get.id")}';
    var lastKeyWord = '';



    layui.use(['table', 'laydate'], function (){
        var url = '/Admin/SystemSetting/system_parameter_list';
        table = layui.table;
        layDate = layui.laydate;
        layForm = layui.form;

        if (searchID !== '') {
            url += '/id/' + searchID;
        }

        table.render({
            where: {
                order: [ ['PARAMETER_KEY', "desc"] ],
            },
            id:"datatable",
            elem : '#all',
            limit : 10,
            url : url,
            page : true,//开启分页
            cols : [
                [
                    {type:'checkbox'},
                    {field: 'PARAMETER_KEY', width:320, title: '参数',sort: true},
                    {field: 'PARAMETER_VALUE', width:420, title: '值'},
                    {field: 'PARAMETER_TYPE',title: '类型'},
                    {field: 'PARAMETER_EXPLAIN', title: '说明'},
                    {title : '操作',width: 220,templet:function(data){
                            var btn = '';
                            btn += '<button class="layui-btn layui-btn-sm " onclick="editData(this)" value=\''+ $.base64.encode(JSON.stringify(data), true) +'\' data-target="#myModal" data-toggle="modal">编辑</button>';
                            btn += '<button class="layui-btn layui-btn-sm layui-btn-danger" onclick="dele(\''+data.PARAMETER_KEY+'\')" >删除</button>';
                            return btn;
                        }}
                ]
            ]
        });

        var $ = layui.$, active ={


            //搜索使用(重置)
            reload: function(){
                if (needAddSearchColumns) {
                    // searchColumns 要搜索的字段, 'all' 为所有，['filed1', 'filed2']指定字段搜索
                    var searchColumns = 'all';

                    if (typeof(searchColumns)==='string' && searchColumns==='all') {
                        var allColumn = $('table.layui-table thead th:not([data-field="0"])');
                        for (var i=0; i < allColumn.length; i++) {
                            searchColumnsSend.push({data: allColumn.eq(i).attr('data-field'), searchable: true});
                        }
                    } else {
                        for (var i=0; i < searchColumns.length; i++) {
                            searchColumnsSend.push({data: searchColumns[i], searchable: true});
                        }
                    }
                    if (i > 0) {
                        needAddSearchColumns = false;
                    }
                }
                //执行重载
                table.reload('datatable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        columns: searchColumnsSend,
                        search: {
                            regex: false,
                            value: demoReload.val()
                        }
                    }
                });
            },

        }

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //回车触发重载
        $("input.layui-input").on('keyup', function (e) {
            if (e.keyCode == 13) {
                active['reload'].call();

                // Disable sending the related form
                event.preventDefault();
                return false;
            }
        });

    });

    function editData(obj) {}

    function dele(PARAMETER_KEY) {

</script>
Layui表格操作

猜你喜欢
