先看效果:

一般这写什么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. Mac常用命令行

    Mac环境下启动tomcat 1.进入文件夹----------cd apache-tomcat-9.0.10/ cd bin 2.启动tomcat---------sudo sh startup.s ...

  2. nvm,nrm和yarn

    nvm Node Version Management nvm list 查看所有已安装的 node 版本 nvm install 版本号 安装指定版本的 node nvm use 版本号 切换到指定 ...

  3. 与soul上的一个妹子聊天有感

    写此篇的原因: 妹子说,我考上公务员了~,当时自己自己顿时哽咽了,不知道说什么,习惯性的说了句,恭喜恭喜啊.感受到妹子的欢喜与喜悦,我也没必要打扰她的兴致,她开心就好了嘛. 每个人的成就都是自己奋斗的 ...

  4. jquery的封装与对象学习

    1.封装学习 /// <reference path="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" /> ...

  5. densenet思路 以及和残差网络区别,pytorch实现

    densenet思路 以及和残差网络区别,pytorch实现 待办 densenet思路以及和残差网络区别.以及densenet的pytorch实现 https://zhuanlan.zhihu.co ...

  6. PAT (Basic Level) Practice (中文)1041 考试座位号 (15 分)

    每个 PAT 考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位.正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考 ...

  7. java回文代码

    import java.util.*; import java.math.BigInteger; import java.util.Scanner; public class Test{ static ...

  8. ECMAScript基本语法——⑥流程控制语句

    if...else...switch...case... 在java中能接收的数据类型:byte .short.char.int.枚举类型(JDK5.0新增).String类型(JDK7.0新增) s ...

  9. win10文件夹 无法显示当前所有者 管理员都不行

    1.在win10系统桌面上,任务栏,右键,单击任务管理器. 2.单击性能. 3.单击打开资源监视器. 4.在单击CPU标签,然后再“关联的句柄”右侧的搜索框中输入要删除的文件夹名.例:tre文件夹名. ...

  10. 题解【洛谷P1083】[NOIP2012]借教室

    题面 二分到哪一个申请人要修改订单,可以差分\(+\)前缀和达到\(\Theta(n)\)的\(\text{check}\). 具体细节见代码. #include <bits/stdc++.h& ...