Layui表格单元格编辑保存

最新推荐文章于 2024-10-24 14:15:23 发布

³²⁶

最新推荐文章于 2024-10-24 14:15:23 发布

阅读量1.2w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ASP.NET.MVC 文章标签： Layui表格单元格编辑保存

本文链接：https://blog.youkuaiyun.com/weixin_44547598/article/details/93787102

本文展示了如何使用Layui框架在网页表格中实现单元格的编辑功能。通过添加特定属性（edit: 'text'）使得单元格可编辑，并利用layui表格的事件监听回调函数捕获编辑后的值。控制器方法处理POST请求，完成数据保存，最终实现了一个功能完整的单元格编辑并保存的示例。

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

话不多说，直接上代码
页面上的HTML代码

<div class="row">
     <div class="col">
<table id="tabSupplierCategoryDetails"lay-filter="tabSupplierCategoryDetails">                         </table>
     </div>
</div>

Js的代码

var tabSupplierCategoryDetails, layer, layuiTable;
$(function () {
     layui.use(["table", "layer"], function () {
          layer = layui.layer;
          layuiTable = layui.table;
          tabSupplierCategoryDetails = layuiTable.render({
              elem: "#tabSupplierCategoryDetails",
              url: "/BackStageManagement/IinventoryManagement/selectSupplierCategoryDetails",
              data: [],
              page: {
                     limit: 4,
                     limits:[2 , 4 , 6 , 8 , 10],
               },
              cols:[[
                   { type: 'radio', fixed: 'left' },//单选框列,fixed:'left' 将列固定在左边
                    { type: