WebBrower控制LayUI 实现表格数据全选

gear1023

已于 2022-08-05 17:00:33 修改

阅读量562

点赞数

分类专栏： web delphi 文章标签： layui javascript servlet jquery c#

于 2022-08-02 17:43:33 首次发布

本文链接：https://blog.csdn.net/gear1023/article/details/126125682

版权

web 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

delphi

1 篇文章 0 订阅

订阅专栏

4、还是要模拟点击才行，调整代码，结果正确

5、精简代码

6、脚本集成，将脚本集成到Host程序中

7、总结对比

摘要

某网站用到了LayUI数据表格，想将此网站集成到Webbrowser里面，需要控制列表里的数据全选。理论上很简单，但队LayUI及其内嵌的Jquery不是太熟悉，只好请教度娘，查询了好一轮，找到几个介绍的挺好的，但不是很适合，改造下，还是基本可用，下面拿layUI官网来演示

1、需求，外面控制全选

https://layuion.com/demo/table.html

执行前：

执行后：

2、马上实现

思路：使用Jquery选择器，选择到所有的checkbox，打上钩就可以了

但是经测试LayUI内置的JQuery好像不能用，原因不清，也没仔细去看说明，所以只能先加载个新的JQuery，加载完成就执行打钩就好了，以下打勾代码问度娘要的。

这里注意：加载新的JQuery是增加个<script>节点，需要加到原来的代码里，下面代码是在<head>里新增一个<script>子节点

var jquery3 = document.createElement('script')
jquery3.type = 'text/javascript';
jquery3.src = 'https://code.jquery.com/jquery-3.5.0.js';
jquery3.onload = function(){
    $("input:checkbox").each(function() {
        $(this).attr('checked','')
    });
    $(".layui-form-checkbox").each(function() {
        $(this).addClass('layui-form-checked');
    });
}
document.getElementsByTagName('head')[0].appendChild(jquery3)

3、好像结果并不对

虽然打上勾了，但实际取不到~

4、还是要模拟点击才行，调整代码，结果正确

改成模拟点击

var jquery3 = document.createElement('script')
jquery3.type = 'text/javascript';
jquery3.src = 'https://code.jquery.com/jquery-3.5.0.js';
jquery3.onload = function(){
	$(".layui-form-checkbox").click()
	/*
	$("input:checkbox").each(function() {
		$(this).attr('checked','')
	});
	$(".layui-form-checkbox").each(function() {
		$(this).addClass('layui-form-checked');
	});
	*/
}
document.getElementsByTagName('head')[0].appendChild(jquery3)

验证结果正确：

5、精简代码

不用JQuery，改成一行代码即可实现，如下两种实现方式：

// 不加载JQUERY，原生选择：
document.querySelector(".layui-form-checkbox").click()


// 或者（取第一个checkbox，调用它的点击，如果你要操作的不是第一个，就要再看下到底是哪一个，按需调整）
document.getElementsByClassName("layui-form-checkbox")[0].click()


// 或者健壮点（似乎也没必要）
var ckboxes = document.getElementsByClassName("layui-form-checkbox")
if (ckboxes.length > 0) ckboxes[0].click()

验证结果正确：