layui table 修改页面值,不刷新页面

7 篇文章 0 订阅
这段代码展示了如何在layui表格中通过点击单元格来更新单个数据和整个列的数据。当用户点击单元格时,会弹出一个窗口进行状态设置,点击保存后,将更新选定单元格及其所在行的特定列。此外,还提供了修改整列数据的逻辑,通过AJAX获取新数据并刷新表格对应列。
摘要由CSDN通过智能技术生成

一、点击单元格更新数据

table.on('tool(tbEvent)', function(obj) {
    var data = obj.data,layEvent = obj.event;
    var $this = $(this);
    layer.open({
	    title: '设置状态', type: 1,shade: false,
		maxmin: true, shade: 0.5,anim: 1,skin: 'layer-ext-myskin',
		area: ['650px', '200px'],content:$('#checkDiv'),
		btn:['保存','取消'],
		yes: function(index){
            //后台操作方法
			$this.text('');//点击的单元格赋值
            //给该行指定列赋值
            var rowindex = obj.tr[0].rowIndex;//点击行
			var tr = $('tr[data-index=\''+rowindex +'\']');
            tr.find('td[data-field = \'VC_CHUQIN\']').html('<div class="layui-table-cell">'+新值+'</div>');
			//tr.find('td[data-field = \'VC_CHUQIN\']').css('color','red');//改变颜色
        }
    });
});

二、点击单元格修改整列数据

table.on('tool(tbEvent)', function(obj) {
    var data = obj.data,layEvent = obj.event;
    var $this = $(this);
    layer.open({
	    title: '设置状态', type: 1,shade: false,
		maxmin: true, shade: 0.5,anim: 1,skin: 'layer-ext-myskin',
		area: ['650px', '200px'],content:$('#checkDiv'),
		btn:['保存','取消'],
		yes: function(index){
            //后台操作方法
            var cellIndex = $this[0].cellIndex;
			if(parseInt(cellIndex,10) < 10) cellIndex = '0'+cellIndex;
			var n = 'td[lay-event=\''+cellIndex+'\']'; //td中lay-event相同的
			$(n).html('<div class="layui-table-cell">要赋的值</div>');
			//$this.text('');//点击的单元格赋值
//以上是刷新点击框,下面刷新指定列
			$.ajax({
				url: basePath + '/findData.do?orgId=',
				type: 'post', async: false, dataType: 'json',
				success: function (result) {
					var newshuju = result.data;
					for(var b=0;b<=newshuju.length;b++){
						var v = newshuju[b];
						var tr = $('tr[data-index=\''+b+'\']');
						tr.find('td[data-field = \'VC_CHUQIN\']')
								.html('<div class="layui-table-cell">'+v.VC_CHUQIN+'</div>');
						//tr.find('td[data-field = \'VC_CHUQIN\']').css('color','red');
					}
				}
			});
        }
    });
});

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui中,要刷新当前页面而不重置页码,可以采取以下几种方法: 1. 使用layuitable模块的reload函数,该函数可以重新加载数据源,并保持当前页码不变。具体的做法是,在刷新按钮的点击事件中调用该函数,传递当前的页码参数即可。例如: ``` $('#refreshBtn').on('click', function(){ var currPage = tableIns.config.page.curr; //获取当前页码 tableIns.reload({ page: { curr: currPage //将当前页码传递给reload函数 } }); }); ``` 2. 在刷新页面时,将当前页码保存到localStorage或sessionStorage中,然后在页面重新加载完成后,再从localStorage或sessionStorage中读取当前页码,并手动设置到layuitable模块中。具体的实现步骤如下: - 在刷新按钮的点击事件中,将当前页码保存到localStorage或sessionStorage中: ``` $('#refreshBtn').on('click', function(){ var currPage = tableIns.config.page.curr; //获取当前页码 sessionStorage.setItem('currPage', currPage); //将当前页码保存到sessionStorage中 location.reload(); //刷新页面 }); ``` - 在页面加载完成后,读取localStorage或sessionStorage中的当前页码,并设置到layuitable模块中: ``` layui.use('table', function(){ var table = layui.table; var currPage = sessionStorage.getItem('currPage'); //从sessionStorage中读取当前页码 if(currPage){ table.reload('data', { page: { curr: currPage //将保存的当前页码设置到table模块中 } }); } }); ``` 通过以上两种方法,我们可以在刷新页面时保持当前页码不变,实现无重置页码的刷新效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值