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、 表格序号列

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
            }
        });






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

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>



    
    
    
    <%@ include file="/WEB-INF/jsp/includes/common.jsp" %>
    <%@ include file="/WEB-INF/jsp/includes/common_css.jsp" %>
    
    
    <%@ include file="/WEB-INF/jsp/includes/common_js.jsp" %>
    




       <%--公共头部--%>
        <%@ include file="/WEB-INF/jsp/includes/header_common.jsp"%>
      <%--左侧菜单--%>
      <%@ include file="/WEB-INF/jsp/includes/left_common.jsp"%>

    
    

        

            区域
            

                <%----%>
                
                    安徽省
                
            
            

                
                    阜阳市
                
            
            

                
                    请选择县/区
                    西湖区
                    余杭区
                    临安市
                
            
            服务主体
            

                
            
            

                查询

            
        

    


    

    



        
        
      <%--  
--%>

    




    
   
 Copyright © 2008-2018 （）版权所有
 京ICP备14027879