根据要求使layui的table数据表格复选框默认选中修改更新保存

最新推荐文章于 2024-02-04 16:46:55 发布

萌萌草的屋

最新推荐文章于 2024-02-04 16:46:55 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java layui JavaScript

本文链接：https://blog.csdn.net/meng70345meng/article/details/100153373

最近项目前端用的layui框架

首先是需求：页面点击选择的时候，根据联通资费框中的内容，选中弹出表格中的相应数据，ZE_9999和ZE_9998是我们要选中的，选择完毕之后点击保存，我们要重新更新联通资费的文本域内容

应该先了解下layui.data();

https://www.layui.com/doc/base/infrastructure.html#data

然后先看代码

<table class="layui-table" id="vop_expenses_package_table"
		lay-filter="vop_expenses_package_table">
</table>
<script type="text/html" id="toolbarDemo">
  	<div class="layui-btn-container">
   		<button class="layui-btn layui-btn-sm" lay-event="getCheckData">保存</button>
  	</div>
</script>

//表格是否全选标示
var ziFeiAllChecked = false;
//用来保存表格 选中数据ID
layui.data("ziFeiIds",null);
//用来保存在联通资费的文本域里显示的文本
layui.data("ziFeiInfo",null);

//监控表格的复选框事件
table.on('checkbox(vop_expenses_package_table)', function(obj){
    console.log(obj.checked); //当前是否选中状态
    console.log(obj.data); //选中行的相关数据
    console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one		 
    var data = obj.data;
	if(obj.type === "one"){
		if(obj.checked){//选中，存放数据
			layui.data('ziFeiIds', {
				    	key: data.vopExpensesPackageId,
				        value: data.expensesPkName
				});
			layui.data("ziFeiInfo",{
				    	key: data.vopExpensesPackageId
				    	,value: data.expensesPkName+"-"+data.expensesPkCode+"-   
                            "+data.volume+"-"+data.typeName+ "\