layUi学习笔记

layui网址：http://www.layui.com/

引入文件

//先jquery 后 layui

静态页面

    

        
        

            发票代码：
            

                
            
        
        
        

            发票号码：
            

                
            
        
        
        
        

            开票日期：
            

                
            
        
        
        
        

            销方税号：
            

                
            
        
        
        
        

            是否预勾选：
            

                
                
                
            
        
        
        
        

            

                搜索
                重置
            
        
    
    
    
    
    
    
    保存预勾选
    确定勾选

弹出框

加载完成就弹出

普通弹出框

layer.open({
type: 1,
title: ['自动确认勾选提示', 'font-size:18px;'] //标题栏
,
closeBtn: false,
area: '400px;',
shade: 0.3,
id: 'Ts' //设定一个id，防止重复弹出
,
btn: ['确定'],
offset: '30vh',
btnAlign: 'c',
moveType: 1 //拖拽模式，0或者1,
content: '',//弹出内容
success: function(layero) {
    var btn = layero.find('.layui-layer-btn');
    btn.find('.layui-layer-btn0').click(function() {
        //点击确定
    });
}
});

列表

列表的渲染

前台HTML代码

前台Js代码

//通过返回值进行判断，修改列表显示数据


 
//*******************渲染列表********************
 

后台代码

    //查询数据
    List> fpList = fpService.getFpListFirst(pd);
    //添加一个key 前台框架判断是不是选中
    for(int i = 0;i> pageInfo = new PageInfo<>(fpList);
    
    //传递参数
    JsonJ jsonj = new JsonJ();
    jsonj.setCount(pageInfo.getTotal());//前端需要的数据总条数
    jsonj.setData(fpList);//前端需要的列表数据
    return jsonj;

JsonJ Javabeen

public class JsonJ implements Serializable{
private static final long serialVersionUID = 189432980496211347L;
  String code = "0"; //状态码 成功0 失败其他
  String msg = ""; //返回信息
  Long count = 0L;//数据条数
  Object data = null;//列表数据

JsonJ属性解释

列表重载

//----------只有一个列表 不需要指定Id
tableIns.reload({
url: '<%=basePath%>/pc/gouxuanList.do',//重载数据请求路径
where: { //设定异步数据接口的额外参数，任意设
aaaaaa: 'xxx'
,bbb: 'yyy'
  },
    page: {
    curr: 1 //重新从第 1 页开始
  }
});

//----------多个列表 需要指定Id
table.reload('idTest', {
where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx',
    bbb: 'yyy'
},
page: {
    curr: 1 //重新从第 1 页开始
  }
});

隐藏一列

//*******************回调函数********************
done: function(res, curr, count){
//*********************获取原本选中的数据*******************
heckStatus1 = table.checkStatus('fpList');
console.log(checkStatus1.data);
//*********************隐藏列************************
var tables = $("#fpList").next().find(".layui-table-box"); 
tables.find("[data-field='etc']").css("display","none"); 
},

表单提交

//*******************提交搜索***********************
    layui.use('form', function(){
          var form = layui.form;
          //监听提交
          form.on('submit(formSearch)', function(data){
            var data = JSON.stringify(data.field);
            tableIns.reload({
                 url:'<%=basePath%>/pc/searchForm.do',
                 where: { //设定异步数据接口的额外参数，任意设
                     search: data
                }
              ,page: {
                curr: 1 //重新从第 1 页开始
              }
            });
             layer.msg('加载中', {
                   time: 1500, //1s后自动关闭
                });
            return false;
        });
    });