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

最新推荐文章于 2025-02-06 11:17:39 发布

1°叁柒

最新推荐文章于 2025-02-06 11:17:39 发布

阅读量2.4k

点赞数

分类专栏： layer js 文章标签： layui 前端 javascript

本文链接：https://blog.youkuaiyun.com/zhu_nana/article/details/121464551

版权

js 同时被 2 个专栏收录

41 篇文章

订阅专栏

layer

7 篇文章

订阅专栏

这段代码展示了如何在layui表格中通过点击单元格来更新单个数据和整个列的数据。当用户点击单元格时，会弹出一个窗口进行状态设置，点击保存后，将更新选定单元格及其所在行的特定列。此外，还提供了修改整列数据的逻辑，通过AJAX获取新数据并刷新表格对应列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、点击单元格更新数据

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');
					}
				}
			});
        }
    });
});