layui table 完整实例

1、layui 搜索

var $ = layui.$, active = {
            reload: function () {
                debugger
                var countyId = $("#countyId option:selected").val();
                var fwzt = $('#fwzt').val();

                //执行重载
                table.reload('workReload', {  // table 的id
                    page: {
                        page: 1 //重新从第 1 页开始
                    }
                    , where: {    // 条件
                        pId: "12",
                        cId: "112",
                        oId:countyId,
                        fwzt:fwzt
                    }
                });
            }
        }

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

2、表格序号列

<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>

3、layui 操作列

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

            if(layEvent === 'detail'){ //查看
                //do somehing
            }
        });



<script type="text/html" id="toolbar">  // id为 cols toolbar的值
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
   <%-- <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>--%>
</script>


 cols: [[ {field:'',title: '操作',toolbar:'#toolbar', align:'center',width:150}]]

4、直接上代码 layui table 完整实例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>阜阳农业生产服务信息化管理平台</title>
    <%@ include file="/WEB-INF/jsp/includes/common.jsp" %>
    <%@ include file="/WEB-INF/jsp/includes/common_css.jsp" %>
    <link rel="stylesheet" href="${base}/css/index.css">
    <link rel="stylesheet" href="${base}/css/zuoye.css">
    <%@ include file="/WEB-INF/jsp/includes/common_js.jsp" %>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dvRC4bVv5hy5GLqjycysGaGc9BdHvnsG"></script>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
       <%--公共头部--%>
        <%@ include file="/WEB-INF/jsp/includes/header_common.jsp"%>
      <%--左侧菜单--%>
      <%@ include file="/WEB-INF/jsp/includes/left_common.jsp"%>

    <!--搜索框-->
    <div class="select">
        <div class="layui-form-item">
            <label class="layui-form-label">区域</label>
            <div class="layui-input-inline">
                <%--<input type="text" readonly value="安徽省" name="12" id="pId">--%>
                <select name="quiz1">
                    <option value="12" >安徽省</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="quiz2">
                    <option value="112">阜阳市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="quiz3" id="countyId">
                    <option value="">请选择县/区</option>
                    <option value="1">西湖区</option>
                    <option value="2">余杭区</option>
                    <option value="3">临安市</option>
                </select>
            </div>
            <label class="layui-form-label">服务主体</label>
            <div class="layui-input-inline">
                <input type="text" placeholder="输入服务主体名称" id="fwzt">
            </div>
            <div class="demoTable">
                <button class="layui-btn searchBtn" data-type="reload">查询</button>

            </div>
        </div>

    </div>


    <!--主体-->

    <div class="layui-body">


        <!--table-->
        <table class="layui-hide" id="work" lay-filter="work"></table>
      <%--  <div id="pageList"></div>--%>

    </div>

</div>

<div class="footer">
    <!-- 底部版权 -->
   <p> Copyright © 2008-2018 大田农社（www.datian360.com）版权所有<br/> 京ICP备14027879
   </p>
</div>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#work'
            ,url:base+ 'work/ajax/toWorkList.htm'
            ,method:"post"
            ,id: 'workReload'
//            ,skin: 'line' //表格风格
//            ,even: true
            ,limit: 15 //每页默认显示的数量
            ,limits:[10,15,20,25,50]
//            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,where: { pId: "12",cId: "112"}, //请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了 where: { key : { type: "all" } }，结果并不是我想的那样，如此写，key 将是后端的一个类作为参数，里面有 type 属性，如果误以为 key 是 Layui 提供的格式，那就大错特错了
            response: { //定义后端 json 格式，详细参见官方文档
                statusName: 'status', //状态字段名称
                statusCode: '1', //状态字段成功值
                msgName: 'errMsg', //消息字段
                countName: 'total', //总数字段
                dataName: 'data' //数据字段
            }
//           ,page: true //是否显示分页
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 3 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页

            }
            ,cols: [[
                {field:'',title: '序号',templet: '#indexTpl', align:'center',width:100}
                ,{field:'villageName', title: '作业环节', align:'center'}
                ,{field:'tljzp', title: '农机名称', align:'center',templet:function(d){
                    if(null == d.tljzp){
                        return "暂无数据"
                    }else{
                        return d.tljzp;
                    }
                }}
                ,{field:'sbxlh', title: '监控编号', align:'center'}
                ,{field:'njhzs', title: '服务主体', align:'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {
                    field: 'workTime', title: '总时长', align:'center', templet: function (d) {
                        if (null == d.dtNjStatiDto.workTime) {
                            return "暂无数据"
                        } else {
                            return d.dtNjStatiDto.workTime + "小时";
                        }
                    }
                }
                , {
                    field: 'workMile', title: '总里程', align:'center', templet: function (d) {
                        if (null == d.dtNjStatiDto.workMile) {
                            return "暂无数据"
                        } else {
                            return d.dtNjStatiDto.workMile + "公里";
                        }
                    }
                } ,{field:'effecArea', title: '总面积', align:'center',templet:function(d){
                    if(null == d.dtNjStatiDto.effecArea){
                        return "暂无数据"
                    }else{
                        return d.dtNjStatiDto.effecArea + "亩";
                    }
                }}

                ,{field:'',title: '操作',toolbar:'#toolbar', align:'center',width:150}
            ]]

        });

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

            if(layEvent === 'detail'){ //查看
                //do somehing
            }
        });


        var $ = layui.$, active = {
            reload: function () {
                debugger
                var countyId = $("#countyId option:selected").val();
                var fwzt = $('#fwzt').val();

                //执行重载
                table.reload('workReload', {
                    page: {
                        page: 1 //重新从第 1 页开始
                    }
                    , where: {
                        pId: "12",
                        cId: "112",
                        oId:countyId,
                        fwzt:fwzt
                    }
                });
            }
        }

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
   <%-- <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>--%>
</script>

</body>
</html>

layui table 完整实例

猜你喜欢