layui 分页 复选框 全选 实例 事件监听

最新推荐文章于 2024-04-10 11:05:21 发布
最新推荐文章于 2024-04-10 11:05:21 发布
阅读量1.3k 收藏 1
点赞数 1
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/hanlengyao/p/10362384.html
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>数据表格 </title>
<link rel="stylesheet" href="../../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../../css/layui.css"/>
</head>
<body style="margin-top:5px;">
<div>
<div class="right-content">
<table class="layui-table" id="table1" lay-filter="table1"></table>
</div>
</div>
</body>
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../js/layui/layui.all.2.4.3.js"></script>
<script type="text/javascript" src="../../js/public.js"></script>

<!-- 因涉及公司敏感内容，部分省略，图为该段代码效果图 -->
<script type="text/javascript">
var myTable1Data; // 导出表格数据
var root = "http://.........."; 
var apis = {
MODAL_CONID_LIST: root + 'sdk/eventObject/queryPidInfo', // 模态框查询内容ID
};
// ajax请求（application/json格式）
function getData(url, params, fn) {
$.ajax({
type: "post",
url: url,
contentType: 'application/json;charset=UTF-8',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
dataType: 'json',
data: JSON.stringify(params),
timeout: 20000,
success: function (data) {
if(data.success || data.result == 0) { // 成功
fn.call(null, data);
} else { // 失败
layer.msg('未查询到数据');
}
},
error: function(error) {
layer.msg('服务异常', {icon: 2});
}
});
}
function queryModalContentId(params) {
getData(apis.MODAL_CONID_LIST, params, function(data) {
console.log(data);
var list = data.datas.pids;
if(data.datas.length <1){
layer.msg('未查询到数据');
return
}
list.forEach(function(item) {
item.checked = true;
item.LAY_CHECKED = true;
});
myTable1Data = list;
if(data.datas == 0 ) {
layer.confirm('是否显示其他正常的内容ID?', {
btn: ['确定','取消'] //按钮
}, function(index){
// table1渲染其他正确的PID
renderTable1(myTable1Data);
layer.close(index);
}, function(){
// layer.close();
});
} else { // 没有错误PID
// 渲染table1
renderTable1(myTable1Data);
}
})
}
// 渲染模态框表格 (参数：模态框数据)
function renderTable1(data) {
myTable1.reload({
data: data
})
}
$(function(){
var params = {
endTime: "201902112359",
queryType: "1",
startTime: "201901211500"
};
// 请求数据
queryModalContentId(params);
myTable1 = layui.table.render({ // 导出表格
elem: '#table1',
page: true,
cols: [[
{type: 'checkbox', title: '全选', event:'check'},
{field: 'startTime', title: '活动时间', templet: function(d) {
return formatStrTime(d.startTime, 'yyyy/MM/dd HH:mm') + "-" + formatStrTime(d.endTime, 'yyyy/MM/dd HH:mm');
}},
{field: 'pid', title: 'PID',},
{field: 'contentId', title: '内容ID',}
]],
done: function(data) { //数据渲染完回调
tableDone();
layui.table.render('checkbox','table1');
console.log(layui.table.cache.table1, data,'渲染后数据');
}
});

// table1行监听事件
var checkRow = {};
layui.table.on('row(table1)', function(obj) {
console.log(obj.data, '点击行数据')
checkRow = obj.data;
});

// table1监听复选框事件 （全选后第一个复选框切换无法获取选中行数据）
layui.table.on('checkbox(table1)', function(obj) {
console.log(obj.checked);
if(obj.type == 'all') {
// 复选框全选切换
myTable1Data.forEach(function(item) {
item.checked = obj.checked;
item.LAY_CHECKED = obj.checked;
});
} else if(obj.type == 'one') {
// 单行复选框切换（当单行和全选同时 选中行数据解决采用行监听事件获取 ）
if(!obj.data.contentId) {
myTable1Data.forEach(function(item) {
if(item.contentId === checkRow.contentId && item.pid === checkRow.pid) {
item.checked = obj.checked;
item.LAY_CHECKED = obj.checked;
console.log(item);
}
});
} else {
myTable1Data.forEach(function(item) {
if(item.contentId === checkRow.contentId) {
item.checked = obj.checked;
item.LAY_CHECKED = obj.checked;
}
});
}
}
});

})

</script>
</html>
 

 

转载于:https://www.cnblogs.com/hanlengyao/p/10362384.html

「已注销」
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui监听当前页_layui 数据表格 点击分页按钮 监听事件的实例
weixin_39794734的博客
12-22 2985
找了 很多 关于表格分页 点击事件 请求， table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起(我也不想写分页的，但是后台讲数据多 ，要加分页，被逼无奈 ，想了一个方法)先上图代码.html.js//页面第一次请求 默认 1页 10条function dataLists(pageNum, numPerPage) {$.p...
layui 监听表格复选框选中值的方法
10-18
今天小编就为大家分享一篇layui 监听表格复选框选中值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui复选框勾选取消勾选事件监听
最新发布
weixin_44991324的博客
04-10 533
【代码】layui复选框勾选取消勾选事件监听。
layui.table(表格)跨页多选
zjh19961213的博客
07-19 5065
layui版本：2.5.4 使用数据表格时可能会需要在翻页时保留各个页面选中行的信息，效果如下。 效果演示 实现思路 实现思路大致分为以下三步 1.定义两个全局变量用于保存选中行的id，以及当前页所有行的id（全选时使用） 2.监听表格复选框的勾选事件，将选中行的信息存入全局变量（包括全选） 3.在表格加载完成的回调方法（done）中根据保存的变量回显选中行 示例代码 layui.use('ta...
layui 数据表格 点击分页按钮 监听事件
热门推荐
碌碌无为的程序猿
08-30 1万+
找了 很多 关于表格分页 点击事件 请求， table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 （我也不想写分页的，但是后台讲数据多 ，要加分页，被逼无奈 ，想了一个方法） 先上图 代码 .html <div> <table class="layui-hide" id="test" lay...
Layui的事件监听
weixin_44556271的博客
06-09 7906
开发工具与关键技术：vs mvc 作者 撰写时间：2019年6月 6日 在这里主要是说的是layui的事件监听部分，那么目前用的是2.x以上的版本，在这些版本中对数据表格进行了很大的优化，以越来越好用了，在layui中事件监听的语法是table.on(‘event(fiter)’,callback),event为内置事件名，filter是容器设定的值，这个模块在layui有专属的事件，在一般情况下...
layui表格分页 记录勾选的实例
12-10
首先，监听表格的复选框点击事件 ， 将单选或全选全部记录下来 var checkArray = new Array(); // 当前页数据 var currentArray ; //监听行单击事件（单击事件为：rowDouble） table.on('checkbox(test)', ...
layui获取选中行数据的实例讲解
10-18
表格的列头通过`<th>`元素定义，其中包含了一个复选框列（用于多选）和其他数据列。按钮组使用`layui-btn-group`类，包含三个按钮，分别用于获取选中行数据、获取选中数目和验证是否全选。 ```html <div class="...
JS实现“全选”和"全不选"功能代码实例
10-15
每个复选框都有`type="checkbox"`属性，而按钮则有`onclick`事件监听器，分别调用`clickon()`和`unclick()`两个函数。 接着，我们来看JS代码： 1. `clickon()`函数：这个函数的作用是全选所有的复选框。它首先通过...
silverlight实现datagrid全选、反选、分页、导出EXCEL
05-14
3. **全选/反选实现**：添加一个复选框到DataGrid的Header，添加事件监听器来处理全选和反选操作。 4. **分页实现**：配置数据源的分页属性，并设置DataGrid的Paging属性。 5. **导出Excel**：在后端代码中实现数据...
DataGridSelectSample
10-31
总结来说，“DataGridSelectSample”是一个关于如何在Silverlight的DataGrid中集成复选框并实现全选功能的实例。这个示例涵盖了数据绑定、UI模板定制、事件处理和状态同步等多方面的技术，对于学习和掌握Silverlight...
Layui 带多选框表格监听事件以及按钮自动点击写法实例
12-29
不话不多说了，直接上代码吧： <div class=layui-btn-group xss=removed>   <button class=layui-btn id=hqsj data-type=getCheckData>获取选中行数据</button>   <button class=layui-btn data-type=getCheckLength>获取选中数目</button>   <button class=layui-btn data-type=isAll>验证是否全选</button>   <button
layui监听复选框点击事件
q1519187064的博客
10-28 2025
form.on('checkbox(serviceType)', function(data){ //serviceType 为复选框id if(data.elem.title=="其他" & data.elem.checked){ $('#serviceTypeInput').show() } if(data.elem.title=="其他" & data.elem.checked=.
layui监听当前页_layui 事件监听触发
weixin_39559469的博客
12-22 457
1：监听select 改变下拉选择框写作阅读听歌游戏layui.use('form', function(){var form = layui.form;form.on('select(aihao)',function(data){console.log(data);console.log(data.elem); //得到select原始DOM对象console.log(data.value); ...
layui监听复选按钮点击
weixin_30394633的博客
05-30 542
layui.form.on('checkbox(resultQuery)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //是否被选中，true或者false console.log(data.value); /...
layui 分页勾选。
qq_1521514763的博客
02-24 587
话不多说直接上图，上代码 ui:layui 后台用的thinkphp5 不用安装啥，只要自己有layui的js，引入后提取你需要的部分。 主要部分：parseData返回数据处理、工具栏事件、单选事件方法。 有想过按照不同页面来进行，但万一选择了页数，又发生改变，数据又对不上号，又得重新来选，就直接把所有id直接存起来，勾选后保存id，取消勾选删除id，加载后匹配id设置勾选效果。 又不懂的可以私信我 <!DOCTYPE html> <html> <head>
layui表格监听全选_Layui 带多选框表格监听事件以及按钮自动点击写法实例
weixin_42164685的博客
01-14 703
获取选中行数据获取选中数目验证是否全选提交选择ID运动名运动时长运动类型var msg="";var idlist="";layui.use('table', function(){var table = layui.table;//监听表格复选框选择table.on('checkbox(demo)', function(obj){});var $ = layui.$, active = {get...
layui.table（表格）跨页多选
u011964241的专栏
10-16 2633
layui.table（表格）跨页多选 layui版本：2.5.6 使用数据表格时可能会需要在翻页时保留各个页面选中行的信息，效果如下。 实现思路，1.选中的时候刷新全选框状态 2.全选/全不选的时候刷新勾选框状态 3.翻页后刷新勾选和全选状态。 已有大佬实现类似功能，但稍有瑕疵，我追加改进，大佬文章：https://blog.csdn.net/zjh19961213/article/details/96482133 代码片段，第一次发，不知道怎么给代码着色，见谅： //保存所有页的数据，仅.
layui分页时复选框被选中问题
九亿宅男的梦的博客
09-02 934
<table class="layui-hide" id="test" lay-filter="demo"></table> layui.use(['form','table'], function(){ var table = layui.table; var form = layui.form; table.render({ elem: '#test' ,url:'/zjzk/expert/listPage' ,request:{ pa..
layui treegrid 复选框全选
06-10
4. 监听全选复选框的change事件，当全选复选框的状态改变时，通过循环遍历每行数据的复选框，来改变每行数据的选中状态。 下面是示例代码： HTML代码： ```html <table class="layui-table" id="treegrid"> ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值