layui怎么在当前页获取表格cols里的数据

发布网友发布时间：2022-04-20 10:34

我来回答

共2个回答

懂视网时间：2022-04-29 15:12

注意事项：

1、layui 中提交按钮是基于“监听”机制实现的。

2、form.on() 的调用需置于 layui.use 的回调函数中。

3、末尾的 'return false' 不可或缺，以确保不会触发页面刷新。注意必须是 'return false'，而不能简单写成 'return'。

抓取表单数据可按四步来实现：

1、禁用按钮。防止用户连续点击，需注意，在 Ajax 请求结束后（complete）再次显式启用按钮。

2、整合表单数据。很多时候，除了要获取正式表单的数据，还需要额外追加一些数据。

3、确定路径。有时候，同一个按钮可以表达多种操作，比如新增或修改。

4、发起请求。发起 Ajax 请求，向服务器传递参数，并在回调函数中对返回值做处理。

5、return false。

重要代码列举

1、HTML 声明

<form class="layui-form">
 <input type="hidden" name="id" />
 <button class="layui-btn layui-btn-sto" id="btnSave" lay-filter="btnSave" lay-submit>保存</button>
</form>

如果仅需要监听效果（单击事件），则只需上述一个 button 以及 lay-filter 和 lay-submit。
如果需要收集表单元素的值，则还需要 form 以及其样式 layui-form。

2、js 事件监听

// 保存
form.on('submit(btnSave)', function (data) {
 console.info('开始保存');
 
 // * 按钮禁用
 var isDisabled = $("#btnSave").hasClass('layui-btn-disabled');
 if (isDisabled) {
 return false;
 }
 
 // * 整合表单数据
 var formData = data.field;
 $.extend(formData, { Id: $("#hiddenId").val() });
 console.info(formData);
 
 // * 确定路径
 var url = "";
 if (editMode == "add") {
 url = urlEnum.Add;
 } else if (editMode == "update") {
 url = urlEnum.Update;
 } else {
 alert('编辑模型不确定, add / update');
 return;
 }
 
 // * 发起请求
 $.ajax({
 data: formData,
 type: "POST",
 dataType: "JSON",
 url: url,
 beforeSend: function () {
  // 禁用
  $("#btnSave").addClass('layui-btn-disabled');
 },
 complete: function () {
  // 启用
  $("#btnSave").removeClass('layui-btn-disabled');
 },
 success: function (result) {
  console.info("保存数据成功，返回的数据为：↓ ");
  console.info(result);
 
  if (result.Status) {    
  // 刷新列表
  parent.$("#mainGrid").bootstrapTable("selectPage", 1);
 
  // 确保在最后关闭窗体
  parent.layer.close(parent.layer.getFrameIndex(window.name));
  } else {
  // 提示失败
  layer.alert(result.StatusMessage, { title: '提示信息', icon: 5 });
  }
 }
 }); // end ajax
 
 return false;
});

更多layui相关知识请关注layui框架。

热心网友时间：2022-04-29 12:20

文件－－页面设置－－工作表，“打印区域”中选中你要打印的部分，“顶端标题行”中选中表头。

全部栏目

layui怎么在当前页获取表格cols里的数据