layui之普通数据表格显示switch选择表单组件
先看效果:

一般这写什么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选择表单组件的更多相关文章
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- Layui 监听 复选框 提交表单
表单数据这一块 layui 做的是真的不好,无论是在渲染还是在交互方面,每次都要自己来重新实现代码 #贴上代码 <!DOCTYPE html> <head> <meta ...
- 微信小程序-表单组件
button 按钮 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 示例代码: /** wxss **/ ...
- 「小程序JAVA实战」小程序的表单组件(25)
转自:https://idig8.com/2018/08/18/xiaochengxujavashizhanxiaochengxudebiaodanzujian25/ 来说下 ,小程序的基础组件.源码 ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- 封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
- Django form表单 组件
目录 Django form表单 组件 Form 组件介绍 普通方式手写注册功能 使用form组件实现注册功能 Form 常用字段与插件 常用字段(必备) 字段参数(必备) 内置验证(必备) 自定义效 ...
- Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...
随机推荐
- 项目在UAP可以直接启动,但是在eclipse上面不能直接启动
上面两个eclipse都是用友的开发人员给我的,左边是驻场开发给我的,但是没有教我怎么用和哪里好用,所以一直用UAP来做开发.右边的eclipse是提ISM问题,北京用友远程调试问题时给我的,而且终于 ...
- ng-模板语法
插值 文本绑定 <p>Message: {{ msg }}</p> <p [innerHTML]="msg"></p> 属性绑定 & ...
- 【Unity|C#】基础篇(1)——基础入门
[学习资料] <C#图解教程>(第2~12章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baid ...
- 基于Python接口自动化测试框架(初级篇)附源码
引言 很多人都知道,目前市场上很多自动化测试工具,比如:Jmeter,Postman,TestLink等,还有一些自动化测试平台,那为啥还要开发接口自动化测试框架呢?相同之处就不说了,先说一下工具的局 ...
- Flask之RESTFul API前后端分离
Flask之RESTFul API前后端分离 一:虚拟环境搭建的两种方式 1 pipenv的使用 pip install --user pipenv安装pipenv在用户目录下 py -m site ...
- jQuery---弹幕效果
弹幕效果 <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...
- Hive0.13_函数
Hive函数大全 一.关系运算: 1. 等值比较: = 2. 等值比较:<=> 3. 不等值比较: <>和!= 4. 小于比较: < 5. 小于等于比较: <= 6 ...
- [ZJOI2011] 最小割 - 最小割树
最小割树裸题 建树后,以每个点为根跑DFS求出距离矩阵,然后暴力回答询问即可 #include <bits/stdc++.h> using namespace std; #define i ...
- MyBatis的手动映射与模糊查询
一.手动映射 当实体类属性与数据库字段名不同时,无法自动映射,导致查询出空值,这时候可以使用手动映射 在select节点添加resultMap属性与resultMap节点建立关系
- Ubutu安装oracle jdk1.8
环境: Ubuntu 18.04 LTS x64位 系统用户 hou 工具: jdk-8u171-linux-x64.tar.gz 实验的心 步骤: 第一步: 查看有没有装jdk,按住 ctr+a ...