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

layui表格操作与form表单操作（layui-v2.2.45 ）

table表格操作

html代码(注意里面的lay-filter)
有兴趣的朋友可以看看我之前写的layui前后台交互

<link rel="stylesheet" href="static/layui/css/layui.css" media="all" />
 <script type="text/javascript" src="static/layui/layui.js">script>
<table class="layui-hide" id="test" lay-filter="table">table>

js代码

layui的form表单操作

html代码

<link rel="stylesheet" href="static/layui/css/layui.css" media="all" />
 <script type="text/javascript" src="static/layui/layui.js">script>

<form class="layui-form layui-form-pane" action="store/updatestore" method="post" >
<input id="storeId" name="storeId" type="hidden">
<div class="layui-form-item" style="margin-top: 15px;margin-left: 30px;">
    <label class="layui-form-label">店铺名label>
    <div class="layui-input-inline">
      <input type="text" name="storeName" id="storeName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    div>
   。。。。。。。省略其他输入框
 <div class="layui-form-item" >
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="saveOrAdd">保存button>
      <button type="reset" class="layui-btn layui-btn-primary">重置button>
    div>
  div>
form>

form之中要注意的是lay-filter=”saveOrAdd”这个是绑定form操作的，还有一个是form的action可以不需要填写。

<script type="text/javascript">
    layui.use([ 'form', 'layer', 'table','upload' ], function() {
        var table = layui.table, $ = layui.$, form = layui.form,upload = layui.upload;
        //编辑时候赋值
        var urlParam = getParam('storeId');
        log(urlParam)
        if (!isEmpty(urlParam)) {
            $.post("manager/store/getStoreById", {
                "storeId" : urlParam
            }, function(msg) {
                var json = eval('(' + msg + ')');
                for ( var key in json) {
                    $("#" + key + "").val(json[key]);
                }
                $("#demo1").attr("src",json['pic']);
                form.render('select');
            });
        }

          //监听编辑或者添加-----之前说的重点lay-filter="saveOrAdd"
          form.on('submit(saveOrAdd)', function(data){
              var url = $("#storeId").val() == "" ?"manager/store/save" : "manager/store/update";
              var datas=data.field;
          $.ajax({
            url:url,
            data:datas,
            type:"POST",
            dataType:"json",
            success:function(msg){
                log(msg.code)
                if(msg.code==0){
                   //因为我的这个页面是添加或编辑页面  是通过layer.open出来的 所以parent.layer.close(index); 
                   //你们的可以自行
                    var index = parent.layer.getFrameIndex(window.name);  //获取当前弹窗索引index
                    layer.msg('修改成功...', { icon: 6 });
                    parent.layer.close(index); //返回成功 关闭当前弹窗
                    window.parent.location.reload();//父页面刷新
                }else{
                    layer.msg('修改失败', { icon: 5 });
                }
            },
            error:function(error){
                layer.msg('系统异常！请联系管理员', { icon: 5 });
            }
        });
           //***********重点中的重点********************
            return false;
            //**********重点中的重点*********************
          });
    });
script>

form表单中的重点中的重点 ：ajax执行后一定要 return false; 否则就会遇到事件不走自定义ajax的情况。这是初学者最容易忽略的地方。