先看效果:

一般这写什么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. 2-1.了解Pod对象

    1.Pod参数定义 # 必填,版本号 apiVersion: string kind: Pod # 必填,元数据 metadata: # 必填,Pod对象的名称(命名规范需要符合RFC 1035规范) ...

  2. babel环境安装与编译

    babel:将浏览器不支持的ES6语法转为javascript 查看node是否安装: npm -v node -v 实例演示:在桌面新建part5目录在cmd命令行中 cd desktop cd p ...

  3. Spark学习之路 (十九)SparkSQL的自定义函数UDF[转]

    在Spark中,也支持Hive中的自定义函数.自定义函数大致可以分为三种: UDF(User-Defined-Function),即最基本的自定义函数,类似to_char,to_date等 UDAF( ...

  4. Spark学习之路 (四)Spark的广播变量和累加器[转]

    概述 在spark程序中,当一个传递给Spark操作(例如map和reduce)的函数在远程节点上面运行时,Spark操作实际上操作的是这个函数所用变量的一个独立副本.这些变量会被复制到每台机器上,并 ...

  5. 【整理】IC失效机理(持续更新)

    IC  四种常见失效机理如下: EM     -- electron migration,电子迁移)TDDB -- time dependent dielectric breakdown,与时间相关电 ...

  6. Docker常用命令和功能介绍

    可以搜索 dockerfile 定制创建一个redis镜像image 表示镜像docker search 搜索镜像的名称和标签docker 所在目录/var/lib/dockerdocker的镜像文件 ...

  7. ArcMap 发布 ArcGIS Server OGC(WMSServer,MapServer)服务

    完整的从ArcMap部署地图到ArcGIS Server 中作为地图服务的过程. 1. 添加图层数据-- 不能添加地图 baseMap 2. 安装ArcGIS Server ,记住登录Manager ...

  8. SQL Server 疑难杂症--转换科学计数法的数值字符串为decimal类型

    今天在操作数据库时,需要将字符串转换成Decimal类型.代码如下: select cast('0.12' as decimal(18,2)); select convert(decimal(18,2 ...

  9. 创建登录WEB UI页面的Business role.

    1: Define business role 2:  business role 中可以指定 config key,  该config key可以用于UI configurationo determ ...

  10. PP: Learning representations for time series clustering

    Problem: time series clustering TSC - unsupervised learning/ category information is not available. ...