layui 可编辑表格、获取数据 作者:马育民 • 2021-10-24 16:22 • 阅读:10254 # 关键 ### 表格 增加:`edit: 'text'` ,单击单元格就会出现 输入框 更多代码如下: ``` table.render({ elem: '#main_table' ,url:'/materialAll' ,method:'post', contentType: 'application/json;charset=utf-8' ,where: { "status":1, } ,cols: [[ {type:'checkbox'} ,{field:'id', width:80, title: 'ID',hide:true} ,{field:'name',align:'center', width:155, title: '原料名称' ,templet: '{{d.name}}' } ,{ field:'wm_type',width:155, title: '原料种类', templet: '{{d.name}}' },{ field:'code',width:155, title: '原料编号', templet: '{{d.code}}' },{ field:'price',width:155, title: '库存类型', templet: '{{d.type_2_text}} ' },{ field:'unit',width:155, title: '单位', templet: '{{d.unit}} ' },{ field:'purchase_price',width:155,title: '采购成本价', edit: 'text', templet: '{{d.purchase_price}} ' } ,{align:'center', title: '操作', toolbar: '#operation_bar'} ]] ,page: true ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据 return { "code": res.code, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.total, //解析数据长度 "data": res.data //解析数据列表 }; } ,id:'main_table' }); ``` ### 获取修改后的数据 按钮: ``` 保存 ``` 点击事件函数: ``` //点击保存按钮,获取表格所有数据 $('#save').on('click', function(){ var data=layui.table.cache["main_table"];//获取表格的数据 console.log(data); //通过ajax提交数据 }); ``` # 完整代码 ``` 首页 原料管理 添加 批量删除 保存 ``` 原文出处:http://malaoshi.top/show_1IX26HSOq6sY.html