layui表格（table）操作与form操作

最新推荐文章于 2024-02-29 16:16:31 发布

laxexue

最新推荐文章于 2024-02-29 16:16:31 发布

阅读量1.5k

点赞数 1

分类专栏： layui 文章标签： layui表格（table）

本文链接：https://blog.csdn.net/laxexue/article/details/90548860

版权

layui 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

操作

<script type="text/javascript">
layui.use(['form','layer','table','upload'], function(){
      var table = layui.table
      ,form = layui.form,
        upload = layui.upload,
    layer=layui.layer;
      table.render({
        elem: '#test'
        ,url:'manager/store/list'
        ,cellMinWidth: 80
        ,cols: [[
          {type:'numbers'}
          ,{field:'storeName', title:'店铺名'}
         
          ,{fixed: 'right',title: '操作', width:180, align:'center', toolbar: '#toolBar'}  //绑定tpl表达式
        ]]
        ,page: true   //开启分页
        ,id: 'testReload'  //这个id挺重要的  你对table做操作时候需要使用到  比如reload的时候
      });
      <!-- 这是表格查询的  这里根据店铺名和用户昵称还有手机号码查询  查询框自己任意放位置 
           这里注意的方法是 table.reload('table的id',{});重新载入数据-->
      var $ = layui.$, active = {
                reload: function(){
                    var storeName = $.trim($('#storeName').val());
                    var userNickName = $.trim($('#userNickName').val());
                    var phone = $('#phone').val();
                    table.reload('testReload', {
                        where: {
                            storeName: storeName
                            ,userNickName: userNickName
                            ,phone: phone
                        }
                    });
                }
            };
    //监听查看，删除、编辑按钮--------这里就是上面说的lay-event绑定
      table.on('tool(table)', function(obj){
            var data = obj.data;
           if(obj.event === 'del'){
              layer.confirm('真的删除行么', function(index){
                  var json=eval('('+JSON.stringify(data)+')');//String转json
                  log(json['storeId'])
                  $.post("manager/store/delete",{"storeIds":json['storeId']},function(msg){
                      if(msg.code==0){
                          obj.del();
                          layer.close(index);
                      }else{
                          layer.msg('删除失败！');
                      }
                  })
              });
              //编辑
            } else if(obj.event === 'edit'){
                 var json=eval('('+JSON.stringify(data)+')');//String转json
                 layerOpen('web/store/add?storeId='+json['storeId'],'编辑店铺信息','670px;', '530px;');
            }
          });
          <!-- 查询框中查询按钮click事件 最终调用的是上面的那个active方法-->
      $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
          });
      //这里没什么  就是我自己新增的一个添加页面按钮 layerOpen是自己封装的方法
      $('.demoTable #add').on('click', function(){

          return aler("非法操作,正式运行下不会有添加功能,你可以尝试解锁");
          layerOpen('web/store/add','添加店铺信息','670px;', '530px;');
          });
})
 </script>