废话不多说啦,我就直接上代码吧,需要的朋友可以过来参考下
layui.use([ tree ], function() {
$ = layui.jquery;
form = layui.form;
//获取节点数据
getTreeData();
});function getTreeData()
{
$.ajax({
url : path+"/RoleController/getResourceTree.do",
type : "post",
dataType : "json",
data :{
"roleId":roleId,
"id":null,
"t":Math.random()
} ,
error : function() {
},
success : function(data) {
treeData = JSO...
通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式在初始化加载样式的时候始终加载不上.
前端js拼接列表代码:在这种情况下,你会发现初始化的checkbox属性只能用一下.当你点击下一页或者是搜索查询的时候你的这个列表的checkbox样式是不生效的.这个时候你就需要在js那边引用一个重新初始化的方法了:form.render();但当你用这个的时候,你会发现...
方法1在返回的json中设置LAY_CHECKED为true,页面上的checkbox就是选中状态了。data":[{"name":"北京市","areaType":"省/直辖市","id":"110000","LAY_CHECKED":true},{"name":"市辖区","areaType":"地市","id":"110100","LAY_CHECKED":true},{"name":"县","areaType":"地市","id":"110200","LAY_CHECKED":false}
]相关推荐:《layui框架教程》方法2如果返回的数据中没有LAY_CHECKED怎么办?比如说返回的是这样的数据:data":[{"nam...
下面我就为大家分享一篇layui表格checkbox选择全选样式及功能的实例,具有很好的参考价值,希望对大家有所帮助。在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。1、layui版本号为 v1.0.9 rls版本(当前最新版本)<span style="white-space:pre;"> </span><p class="layui-form"><table class="layui-table"><thead><t...
这次给大家带来用checkbox操作layui表格,用checkbox操作layui表格的注意事项有哪些,下面就是实战案例,一起来看一下。在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。1、layui版本号为 v1.0.9 rls版本(当前最新版本)<span style="white-space:pre;"> </span><p class="layui-form"><table class="layui-table"><t...
本文主要为大家分享一篇layui表格checkbox选择全选样式及功能的实例,希望能帮助到大家。在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。1、layui版本号为 v1.0.9 rls版本(当前最新版本)<span style="white-space:pre;"> </span><p class="layui-form"><table class="layui-table"><thead><tr><th><input type="che...
废话不多说啦,我就直接上代码吧,需要的朋友可以过来参考下
layui.use([ tree ], function() {
$ = layui.jquery;
form = layui.form;
//获取节点数据
getTreeData();
});function getTreeData()
{
$.ajax({
url : path+"/RoleController/getResourceTree.do",
type : "post",
dataType : "json",
data :{
"roleId":roleId,
"id":null,
"t":Math.random()
} ,
error : function() {
},
success : function(data) {
treeData = JSO...
通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式在初始化加载样式的时候始终加载不上.
前端js拼接列表代码:在这种情况下,你会发现初始化的checkbox属性只能用一下.当你点击下一页或者是搜索查询的时候你的这个列表的checkbox样式是不生效的.这个时候你就需要在js那边引用一个重新初始化的方法了:form.render();但当你用这个的时候,你会发现...
这个问题需要后台返回的数据格式跟layui中的示例中返回数据格式一模一样
下面是数据格式参考,第一个LAY_CHECKED:true是让checkbox选中的最重要的参数
LAY_CHECKED:true
city:"浙江杭州"
email:"xianxin@layui.com"
experience:"12"
id:"10002"
ip:"192.168.0.8"
joinTime:"2016-10-14"
logins:"106"
sex:"男"
sign:"君不见,黄河之水天上来,奔流到海不复回。 君不见,高堂明镜悲白发,朝如青丝暮成雪
。 人生得意须尽欢,莫使金樽...
思路,根据 data-index 找到 点击到的tr,获取tr下的 div,js 模拟点击
function iniTable()
{layui.use(table, function(){var table = layui.table; //展示已知数据table.render({elem: tableid,cols: [[ //标题栏{type:checkbox,id:goodsLimitSeqNo}, {field: goodsLimitSeqNo, title: 序号,event: setSign, width: 50},{field: licTypeCode, title: 许可证类别代码,event: setSign, width: 140},{field: licTypeName, title: 许...
废话不多说,直接上代码吧:
var arr = res.data;
var myCheckbox = $("input[name=MenuArr]");
myCheckbox.prop(checked, false); //切换下拉选项时,清空所有选中状态
form.render(checkbox);//记得每次操作后要渲染该元素for (var j = 0; j < arr.length; j++) { //数据库返回的需要选中项的值,我这里只返回了value,有需要可以返回数组对象
for (var i = 0; i < myCheckbox.length; i++) {//遍历checkbox所有项
i...
1.页面引入layui.js和layui.css
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>手机银行权限配置</title><link type="text/css" rel="stylesheet" href="common/layui/css/layui.css" rel="external nofollow" /><link type="text/css" rel="stylesheet" href="css/index.css" rel="external nofollow" /><link rel="shortcut icon" href="images/favicon.ico" rel="external nofollow" />
</head>
<body>
<br>
<h1 ...
吐槽一下,layui的checkbox简直就是一个坑...(不能提交数组)
数据是从后台来的
<div class="layui-form-item" ><label class="layui-form-label">品种</label><div class="layui-input-inline">{foreach $quotation_type as $key=>$val}<input name="quotation_type" lay-skin="primary" value="{$key}" title="{$val}" type="checkbox">{/foreach}</div>
</div>看看JS部分,有点绕,先把数据写进数组,然后,数组转成json格式,覆盖掉原...
1、情景
使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示2、解决办法
通过layui官方社区,找到如下代码,只需要添加如下样式即可解决
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: 50%;transform: translateY(-50%);
}以上这篇解决Layui数据表格中checkbox位置不居中的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
如下所示:
//单击行勾选checkbox事件
$(document).on("click",".layui-table-body table.layui-table tbody tr", function () {var index = $(this).attr(data-index);var tableBox = $(this).parents(.layui-table-box);//存在固定列if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");} else {tableDiv = tableBox.find(".layui-tab...