js小贴士 checkbox check

检查复选框状态
本文介绍了一个用于检查HTML页面中复选框是否被选中的JavaScript函数。该函数遍历指定容器内的所有输入元素,判断是否有复选框被选中,并返回相应的布尔值。

function checkCheckBox(containerid){
var inputArr = document.getElementById (containerid).getElementsByTagName('input') ;
var input_num = inputArr.length;
if(input_num >0){
for(i =0;i<input_num;i++){
if(inputArr[i].type=='checkbox'){
if(inputArr[i].checked){
return true;
}
}
}
}
alert("Please select one at least!");
return false;
}
你当前的代码使用了 `layui.use()` 来加载模块,并渲染了一个 **树形表格(treeTable)**。你想知道: > ✅ **“后面我要写功能是在哪个位置写?”** --- ## ✅ 答案:**在 `layui.use()` 的回调函数内部,`treeTable.render()` 之后的位置写新功能** 因为 Layui 是基于模块化的异步加载机制,所有依赖 `layui` 的组件(如 `treeTable`)都必须在 `layui.use()` 回调中才能使用。 --- ### ✅ 正确的结构模板如下: ```js layui.use(function () { var treeTable = layui.treeTable; // 渲染树形表格 var inst = treeTable.render({ elem: '#Data-List', url: 'https://unpkg.com/outeres@0.1.3/json/2/treeTable/demo-1.json', cellMinWidth: 80, toolbar: '#Top-Search', defaultToolbar: ['filter', 'exports'], cols: [[ { type: 'checkbox', fixed: 'left' }, { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }, { field: 'name', title: '用户名', width: 180, fixed: 'left' }, { field: 'sex', title: '性别', width: 80, sort: true }, { field: 'experience', title: '积分', width: 90, sort: true }, { field: 'city', title: '城市', width: 100 }, { fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#Edit-List" } ]], page: true }); // =================================================================================== // ✅ ✅ ✅ 在这里写你的其他功能代码!!! // 所有与 treeTable、按钮事件、重载、监听等相关的逻辑都应该放在这里 // =================================================================================== // 示例 1:监听工具栏按钮点击(顶部工具栏) treeTable.on('toolbar(Data-List)', function(obj) { var checkStatus = treeTable.checkStatus('Data-List'); switch (obj.event) { case 'add': layer.msg('添加'); break; case 'delete': var data = checkStatus.data; // 获取选中行数据 if (data.length === 0) { layer.msg('请先选择要删除的行'); } else { layer.confirm('确定删除选中的 ' + data.length + ' 条记录?', function(index) { // 执行删除逻辑(比如发 AJAX) layer.close(index); // 重新加载表格 treeTable.reload('Data-List'); }); } break; } }); // 示例 2:监听行内操作按钮(如编辑、删除) treeTable.on('tool(Data-List)', function(obj) { var data = obj.data; // 当前行数据 if (obj.event === 'edit') { layer.open({ title: '编辑用户', content: '你要编辑的用户是:' + data.name, area: ['500px', '300px'] }); } else if (obj.event === 'del') { layer.confirm('真的删除【' + data.name + '】吗?', function(index) { obj.del(); // 删除这一行 layer.close(index); }); } }); // 示例 3:搜索功能(假设有一个搜索框) $('#searchBtn').on('click', function () { var value = $('#keyword').val(); treeTable.reload('Data-List', { where: { keyword: value }, // 传参给后端 page: { curr: 1 } // 从第一页开始 }); }); // 示例 4:手动刷新表格 $('#reloadTable').on('click', function () { treeTable.reload('Data-List'); }); }); ``` --- ## 🧩 关键点解释 | 位置 | 能做什么 | |------|----------| | 🔹 `treeTable.render({...})` 后面 | ✅ 写事件监听、按钮绑定、搜索、重载等功能 | | 🔹 必须在 `layui.use()` 内部 | ✅ 因为 `treeTable` 只在回调中可用 | | 🔹 不要写在 `render()` 前面 | ❌ 模块还没加载完,会报错 `Cannot read property 'render' of undefined` | --- ## 🚫 错误写法示例(不要这样) ```js // ❌ 错误1:写在外面,treeTable 未定义 treeTable.on('tool(Data-List)', function() { ... }); layui.use(function () { var treeTable = layui.treeTable; ... }); // ❌ 错误2:写在 render 前面 layui.use(function () { treeTable.on('tool(...)', ...); // 此时表格还没渲染,监听无效 treeTable.render({ ... }); }); ``` --- ## ✅ 推荐结构总结 ```js layui.use(['treeTable'], function () { var treeTable = layui.treeTable; // 1. 渲染表格 var inst = treeTable.render({ elem: '#Data-List', url: '...', cols: [...], page: true }); // 2. 监听事件(工具栏、行内按钮) treeTable.on('toolbar(Data-List)', function(obj){ ... }); treeTable.on('tool(Data-List)', function(obj){ ... }); // 3. 绑定 DOM 事件(搜索、刷新等) $('#searchBtn').on('click', function(){ ... }); $('#reloadBtn').on('click', function(){ ... }); // 4. 其他自定义逻辑 console.log('表格已就绪'); }); ``` --- ## 💡 小贴士:如何确认 `treeTable` 是否存在? 如果你不确定 `treeTable` 是否正确引入,可以在控制台打印: ```js console.log(layui.treeTable); // 应该输出一个对象或函数 ``` 如果输出 `undefined`,说明: - `treeTable` 插件没引入 - 或者没有通过 CDN / 本地文件正确加载 👉 你需要确保页面中引入了 `treeTable.js`: ```html <script src="https://unpkg.com/outeres@0.1.3/dist/js/layui-exts/treeTable.min.js"></script> ``` 并在 `layui.use()` 中声明依赖(虽然你用了匿名函数,但建议显式写出来更安全): ```js layui.use(['treeTable'], function () { var treeTable = layui.treeTable; // ... }); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值