03 页面刷新和表格刷新

Posted 2021-03-19 zhaochengf

表格赋予id

  var table = layui.table;
        table.render({
            elem: ‘#test‘
            ,url:‘http://localhost:7300/mock/5e06d6ef83b40c266813ee7f/example/user/list‘
            ,toolbar: ‘#toolbarDemo‘ //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: [‘filter‘, ‘exports‘, ‘print‘, { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: ‘提示‘
                ,layEvent: ‘LAYTABLE_TIPS‘
                ,icon: ‘layui-icon-tips‘
            }]
            ,title: ‘商品列表‘
            ,cols: [[
                {type: ‘checkbox‘, fixed: ‘left‘}
                ,{field:‘id‘, title:‘平台货号‘, width:120, fixed: ‘left‘, unresize: true, sort: true}
                ,{field:‘username‘, title:‘商品名称‘, width:120, edit: ‘text‘}
                ,{field:‘email‘, title:‘品牌和分类‘, width:150, edit: ‘text‘, templet: function(res){
                        return ‘<em>‘+ res.email +‘</em>‘
                    }}
                ,{field:‘sex‘, title:‘价格(元)‘, width:100, edit: ‘text‘, sort: true}
                ,{field:‘city‘, title:‘库存‘, width:100}
                ,{field:‘sign‘, title:‘商品状态‘}
                ,{field:‘experience‘, title:‘平台推荐‘, width:120, sort: true}
                ,{field:‘logins‘, title:‘排序‘, width:120, sort: true}
                ,{field:‘joinTime‘, title:‘加入时间‘, width:120}
                ,{fixed: ‘right‘, title:‘操作‘, toolbar: ‘#barDemo‘, width:150}
            ]]
            ,page: true
            ,id:‘goodTable‘
        });

页面刷新

$(".layui-laypage-btn").click();//执行分页刷新当前页

表格刷新

table.reload(‘goodTable‘, {
                        page: {
                            curr: 1
                            // 重新从第 1 页开始
                        },
                        where: {
                            key: ‘tname‘,
                            tname: ‘张三‘,
                        }
                    });

弹出层代码

layer.open({//弹出框
                    type: 1,
                    title: ‘添加书本类别‘,
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    area: [‘80%‘, ‘80%‘],
                    content: $(‘#box1‘),
                    btn: [‘确定‘, ‘取消‘],
                    yes: function (index, layero) {//确定执行函数
                        console.log(layero);
                        //执行添加方法
                        $.getJSON(data+"/booktypeAction.action?methodName=addBookType", {
                            tname: $("#booktypename1").val(), ///角色名
                            /* booktypename: $("input[ name=‘booktypename1‘]").val(), *///角色名
                        }, function (data) {
                            /*根据后台返回的参数来进行判断  */
                            if (data==1) {
                                layer.alert(‘添加成功‘, {icon: 1, title: ‘提示‘}, function (i) {
                                    layer.close(i);
                                    layer.close(index);//关闭弹出层
                                    $("#booktype")[0].reset()//重置form
                                })
                                table.reload(‘testReload‘, {//重载表格
                                    page: {
                                        curr: 1
                                        // 重新从第 1 页开始
                                    }
                                })
                            } else if(data==2){
                                layer.msg(‘添加失败,请勿重复添加书本类别名称‘)
                            }
                        })

赋值和取值

layui.use([‘form‘, ‘layedit‘, ‘laydate‘], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: ‘#date‘
  });
  laydate.render({
    elem: ‘#date1‘
  });
  
  //创建一个编辑器
  var editIndex = layedit.build(‘LAY_demo_editor‘);
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return ‘标题至少得5个字符啊‘;
      }
    }
    ,pass: [
      /^[S]{6,12}$/
      ,‘密码必须6到12位，且不能出现空格‘
    ]
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
  //监听指定开关
  form.on(‘switch(switchTest)‘, function(data){
    layer.msg(‘开关checked：‘+ (this.checked ? ‘true‘ : ‘false‘), {
      offset: ‘6px‘
    });
    layer.tips(‘温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF‘, data.othis)
  });
  
  //监听提交
  form.on(‘submit(demo1)‘, function(data){
    layer.alert(JSON.stringify(data.field), {
      title: ‘最终的提交信息‘
    })
    return false;
  });
 
  //表单赋值
  layui.$(‘#LAY-component-form-setval‘).on(‘click‘, function(){
    form.val(‘example‘, {
      "username": "贤心" // "name": "value"
      ,"password": "123456"
      ,"interest": 1
      ,"like[write]": true //复选框选中状态
      ,"close": true //开关状态
      ,"sex": "女"
      ,"desc": "我爱 layui"
    });
  });
  
  //表单取值
  layui.$(‘#LAY-component-form-getval‘).on(‘click‘, function(){
    var data = form.val(‘example‘);
    alert(JSON.stringify(data));
  });
  
});

选项卡

layui.tree({
                elem: ‘#demo‘,// 传入元素选择器
                nodes: data,
//                 spread:true,
                click: function (node) {// 点击tree菜单项的时候
                    var element = layui.element;
                    var exist = $("li[lay-id=‘" + node.id + "‘]").length;//判断是不是用重复的选项卡
                    if (exist > 0) {
                        element.tabChange(‘tabs‘, node.id);// 切换到已有的选项卡
                    } else {
                        if (node.attributes.menuURL != null && node.attributes.menuURL != "") {// 判断是否需要新增选项卡
                            element.tabAdd(
                                ‘tabs‘,
                                {
                                    title: node.name,
                                    content: ‘<iframe   scrolling="yes" frameborder="0" src=" ‘
                                    + node.attributes.menuURL
                                    + ‘ " width="100%" height="100%"></iframe>‘// 支持传入html
                                    ,
                                    // width="99%" height="99%"
                                    id: node.id
                                });
                            element.tabChange(‘tabs‘, node.id);
                        }
                    }

                }

            });