layui table 插入自定义行

最新推荐文章于 2024-05-07 15:27:01 发布

一溪风月7

最新推荐文章于 2024-05-07 15:27:01 发布

阅读量1k

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/Aura7777/article/details/119861698

版权

这段代码展示了如何使用layui库实现表格数据的编辑和后台交互。当表格单元格被编辑时，会发送POST请求到指定URL更新数据，并在修改不满足条件（如调整额度大于500且无备注）时给出提示。此外，还有搜索和重载功能，以及对合计行的处理。

摘要由CSDN通过智能技术生成

 <script>
        $(function () {
            layui.use('table', function () {
                var table = layui.table
                var initParam = tableQueryParam();
                table.render({
                    elem: '#btable',
                    url: '/Portal/JiXiaoTiaoZheng/GetJiXiaoGongZi',
                    id: "btable",
                    totalRow: true,
                    page: false,
                    where: initParam,
                    cols:
                    [
                         [
                            { field: 'xuhao', title: '序号', align: "center", templet: '#xuhao', width: '4%', totalRowText: '合计' },
                            { field: 'GONGZIFENLEI', title: '工资分类', align: "center", width: '10%' },//hide:true 隐藏列
                            { field: 'YUANGONGHAO', title: '工号', align: "center", width: '5%' },
                            { field: 'YUANGONGXINGMING', title: '姓名', align: "center", width: '7%' },
                            { field: 'BUMENTIAOZHENG', title: '调整额度(元)', align: "center", edit: 'text', width: '15%', totalRow: true },
                            { field: 'QITAKOUKUAN', title: '其他调整(元)', align: "center", edit: 'text', width: '15%', totalRow: true },
                            { field: 'TIAOZHENGYUANYIN', title: '备注', align: "center", edit: 'text', width: '44%' },                             
                         ]
                    ],
                    done: function (res, curr, count) { 
                        
                        //此为给layui table 手动拼接一行  
                        //$.ajax({
                        //    url: '/Portal/JiXiaoTiaoZheng/GetJiXiaoJinEr',
                        //    method: 'post',
                        //    //data:data.field,
                        //    dataType: 'JSON',
                        //    success: function (result) {
                        //        if (result) {
                        //            var tr = " <tr style='text-align:center'>" +
                        //            "  <td><div class='layui-table-cell laytable-cell-1-0-0'>提留原因</div></td>" +
                        //            "  <td data-field='tiliuyuanyin' data-edit='text' colspan='5'><div class='layui-table-cell'></div></td>"
                        //            "  </tr>";
                        //            $(".layui-table-body .layui-table tbody").append(tr);
                        //            //$table.append(tr);
                        //            var tb1 = $(".layui-table-total").find("td").eq('0').find("div").html(result.data[0].YuanGongFenLei + "：" + result.data[0].HeJi);//赋值文本
                        //            var tb1 = $(".layui-table-total").find("td").eq('1').find("div").html(result.data[1].YuanGongFenLei + "：" + result.data[1].HeJi);//赋值文本
                        //            var tb1 = $(".layui-table-total").find("td").eq('2').find("div").html(result.data[2].YuanGongFenLei + "：" + result.data[2].HeJi);//赋值文本
                        //            var tb1 = $(".layui-table-total").find("td").eq('3').find("div").html('绩效总额：' + (Number(result.data[0].HeJi) + Number(result.data[1].HeJi) + Number(result.data[2].HeJi)));//赋值文本
                        //            var tb1 = $(".layui-table-total").find("td").css("background-color", "#e9e9e9");//赋值文本
                        //        }
                        //        else {

                        //        }
                        //    }
                        //})

                        var BUMENTIAOZHENGTotal = this.elem.next().find('.layui-table-total td[data-field="BUMENTIAOZHENG"] .layui-table-cell').text();
                        var QITAKOUKUANTotal = this.elem.next().find('.layui-table-total td[data-field="QITAKOUKUAN"] .layui-table-cell').text();
                        var yuliu = parseInt(BUMENTIAOZHENGTotal);
                        $("span[name='yuliu']").each(function() { 
                            $(this).text(yuliu);
                        }); 
                        debugger;
                      


                    }
                });
                //监听单元格编辑
                table.on('edit(btable)', function (obj) {
                    var value = obj.value;//修改后的数据
                    var field = obj.field;//修改的字段名
                    var data = obj.data;//修改的当行数据
                    var id = data.OBJECTID;
                    if (field == 'BUMENTIAOZHENG' && obj.data.BUMENTIAOZHENG >= 500 && obj.data.TIAOZHENGYUANYIN == null)
                    {
                        alert("修改失败");                        
                        table.reload('btable', {});
                        return;
                    }
                    $.post("/Portal/JiXiaoTiaoZheng/UpdateJiXiao"
                        , {
                            ziduanName: field,
                            value: value,
                            id: id
                        }
                        , function (data) {
                            var datas = JSON.parse(data);
                            if (datas.code == 1) {
                                layer.msg("修改成功!");
                                table.reload('btable', {})
                            } else {
                                layer.msg("修改失败");
                                table.reload('btable', {})
                            }
                        });
                });
                var $ = layui.$, active = {
                    commit: function () {

                    },
                    search: function () {
                        var demoReload = $('#demoReload');
                        var initParam = tableQueryParam();
                        //执行重载
                        table.reload('btable', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            },
                            where: initParam
                        }, 'data');
                    }
                };
            });


        });



    </script>

");
table.reload('btable', {});
return;
}
$.post("/Portal/JiXiaoTiaoZheng/UpdateJiXiao"
, {
ziduanName: field,
value: value,
id: id
}
, function (data) {
var datas = JSON.parse(data);
if (datas.code == 1) {
layer.msg("修改成功!");
table.reload('btable', {})
} else {
layer.msg("修改失败");
table.reload('btable', {})
}
});
});
var $ = layui.$, active = {
commit: function () {

},
search: function () {
var demoReload = $('#demoReload');
var initParam = tableQueryParam();
//执行重载
table.reload('btable', {
page: {
curr: 1 //重新从第 1 页开始
},
where: initParam
}, 'data');
}
};
});

});

</script>