先看效果:

一般这写什么switch组件,下拉框组件只在表单显示,如果要在其他地方显示就要注意一下细节

默默跳槽一下这个layui,真的蛋疼,每次用它东西都要各种设置东西,无语

接下来看下代码:

HTML代码

<table class="layui-table layui-form" id="" >注意!!!这边的样式,要用表单的那些组件一定要有这个class样式:layui-form,要不然会调试的头皮发麻
<thead>
<tr>
<th>序号</th>
<th>纬度</th>
<th>预算kpi</th>
<th>项目说明</th>
<th>选择模板项目</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

js代码

//你要用layui的form组件就要在use里面加个form,这个use你可以理解为初始化

layui.use(["element", "laypage", "layer","form"], function () {

 var form = layui.form;
  form.render();//细节!!!和下面那个一样,

function render(curr) {
currentPage = curr;
$.ajax({
type: "get",
url: "/xx/xx/xx/findPage",
data: {
type: type,
currentPage: currentPage,
pageSize: pageSize},
success: function (result) {
if (result.status == 0) {
$(".layui-table tbody").html(""); $.each(result.data.pageContent, function (index, obj) {
var objStr = "\"" + obj.code + "\"";
var i= parseInt(index)+1+(parseInt(currentPage)-1)*parseInt(pageSize);
var str = "<tr>" +
"<td>" + i + "</td>" +
"<td>" + obj.groupName + "</td>" +
"<td>" + obj.kpiName + "</td>" +
"<td>" + obj.remark + "</td>" +
"<td>" +" <input type='checkbox' name='check' "+obj.check+" title='模板项目' value="+objStr+">" +
"</td></tr>";//这一句就是拼接起来的组件
$(".layui-table tbody").append(str)
});
form.render();//细节!这个好像要渲染一下!
}
if (result.message != null) {
layer.msg(result.message)
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg('{"status":"' + XMLHttpRequest.status + '","readyState":"' + XMLHttpRequest.readyState + '","textStatus":"' + textStatus + '","errorThrown":"' + errorThrown + '"}')
}
})
}
 })
 

layui之普通数据表格显示switch选择表单组件的更多相关文章

  1. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  2. Layui 监听 复选框 提交表单

    表单数据这一块 layui 做的是真的不好,无论是在渲染还是在交互方面,每次都要自己来重新实现代码 #贴上代码 <!DOCTYPE html> <head> <meta ...

  3. 微信小程序-表单组件

    button 按钮 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 示例代码: /** wxss **/ ...

  4. 「小程序JAVA实战」小程序的表单组件(25)

    转自:https://idig8.com/2018/08/18/xiaochengxujavashizhanxiaochengxudebiaodanzujian25/ 来说下 ,小程序的基础组件.源码 ...

  5. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  6. 封装react antd的form表单组件

    form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...

  7. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  8. Django form表单 组件

    目录 Django form表单 组件 Form 组件介绍 普通方式手写注册功能 使用form组件实现注册功能 Form 常用字段与插件 常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...

  9. Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

    前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...

随机推荐

  1. Redis的各个数据的类型基本命令

    什么是Redis: 概念: Redis (REmote DIctionary Server) 是用 C 语言开发的一个开源的高性能键值对(key-value)数据库. 特征:1. 数据间没有必然的关联 ...

  2. echarts地图

    <html> <body> <div id="cbar" style="width: 100%; height: 360px"&g ...

  3. 调用手机摄像头并上传图片--jquery ajax

    1.图片框样式与进度条样式 .alert_img_content { width: 44%; float: left; margin: 3%; border: 1px solid #ddd; back ...

  4. IO流学习之字符流(二)

    用字符流完成文档的复制: 测试文档: 代码1: package InputOutput; import java.io.FileReader; import java.io.FileWriter; i ...

  5. tcp_demo

    代码讲解: server import socket def main(): # 创建tcp服务器套接字 tcp_server = socket.socket(socket.AF_INET, sock ...

  6. AMC Problems and Solutions

    AMC Problems and Solutions:https://artofproblemsolving.com/wiki/index.php/AMC_Problems_and_Solutions ...

  7. 03-SV过程语句和子程序

    1.过程语句 for语句.do-while语句.while语句 initial begin string cmd; int file,c; $display("=========== con ...

  8. Django 查看原生的sql语句

    python manage.py sqlmigrate your_app_name 0001 把your_app_name换成自己的app名字即可看到框架自动生成的创建表sql语句,于是我就这样看到了 ...

  9. ECMAScript基本语法——⑤运算符 算数运算符

    +-*/%

  10. 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(5.21.1.10-加-6.4)Atomic_Operations

    5.21.1.10 Write Atomicity Normal 这个特性控制AWUN和NAWUN参数的操作.设置的属性值在set Feature命令的Dword 11中表明. 如果提交Get Fea ...