LayUI表格在线编辑动态修改列数据

每次只能修改指定属性是 edit 定义的列

{field:'aname', width:80, title: '昵称', minWidth: 100,  edit: 'text', algin : 'center',templet : function( res ){   return  res.aname == "null" ? '未知' :  res.aname;
}}

点击列修改数据失焦触发修改请求实现数据的修改

实际操作中发现因为每次修改的内容不同发送到后台的键值对也需要同步变化

数据模拟

// 当 field变量变化时  params对象中的键 也会同步变化  只要套上中括号[ ] 对field变量解析就行
let params = {  [field] : util.escape(value) };
console.log( params );  // aObject { aname: "张无忌" }

请求测试

  //监听单元格编辑table.on('edit', function(obj){var value = obj.value //得到修改后的值,data = obj.data //得到所在行所有键值,field = obj.field; //得到字段//  layer.msg('[AID: '+ data.aid +'] ' + field + ' 字段更改值为：'+ util.escape(value));// TODO 管理员信息修改 注意： filed 放在请求参数中 做键时  动态键变化  // 方案二  JSON对象中解析 动态键   [] $.post("../../admin/updateInfo", { aid : data.aid, [field] : util.escape(value)}, res=>{if( res > 0 ){  // 密码更新成功showMsg("管理员信息修改成功...")return;}showMsg("管理员信息修改失败...")})});

DAO层动态SQL实现

// 动态SQL 修改不同的用户信息
@Override
public int update(AdminInfo admin) {DBHelper db = new DBHelper();String sql = "update admininfo set  ";List<Object> params = new ArrayList<Object>();if( admin.getAname() != null) { // 昵称不为空 sql += " aname = ? , ";params.add( admin.getAname() );}if( admin.getPwd() != null) { // 密码不为空 sql += " pwd = md5(?) , ";params.add( admin.getPwd() );}if( !sql.contains(",")) {return -1;}sql = sql.substring(0, sql.lastIndexOf(","));// 处理最后一个逗号sql += " where aid = ? ";if( admin.getAid() == null) {return -1;}params.add( admin.getAid() );// 底层不是不定参数  故把动态列表转换成数组 传入 否则   类型不匹配会报错return db.update(sql, params);
}

Controller层转换成对象

 // 修改管理员信息  账号 和 密码 等信息   admin/updateInfo  protected void updateInfo(HttpServletRequest request, HttpServletResponse response) throws IOException {// 请求参数封装成对象 AdminInfo admin = RequestToObject.getParamesToObject(AdminInfo.class, request);IAdminInfoBiz biz = new  AdminInfoBizImpl();this.send(response, biz.update(admin));}

LayUI表格在线编辑动态修改列数据相关推荐

layui 表格在点表头排序时数据错乱
layui 表格在点表头排序时数据错乱问题问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回 ...
IOS小组件（4-2）：创建可配置小组件（动态修改配置数据）
IOS小组件(4-2):创建可配置小组件(动态修改配置数据) 引言在项目中添加"Intens Extension" 在 xxx.intentdefinition文件中增加一个动态 ...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
vue.js的element表格在线编辑的正确姿势vue-element-extends
我觉得数据即表格,数据即echarts,用表格或图形来表达数据,是人类的本能. 而表格在线编辑--点击单元格即进行编辑,可以少了弹框,除了输入文本,还可以下拉选项,多级选项,简直太多好处了.新增数据, ...
Python语言学习之pandas：DataFrame二维表的简介、常用函数、常用案例(增删改查排序之选择指定列、根据条件选择特定数据、赋值、列名重命名、修改列数据、处理缺失值、列合并、分组之详细攻略
Python语言学习之pandas:DataFrame二维表的简介.常用函数.常用案例(增删改查排序之选择指定列.根据条件选择特定数据.赋值.列名重命名.修改列数据.处理缺失值.列合并.分组之详细攻略 ...
wps excel查找不定位_【WPS神技能】如何在WPSExcel表格中批量查找两列数据的不同？...
当我们需要在Excel表格中快速查找两列数据的不同时,如下图所示:如何快速找出"一月业绩"和"二月业绩"的不同. 在office-Excel表格中,我们可以通过 ...
layui表格中给对应的列加背景色
layui表格中给对应的列加背景色直接在style加样式即可,里面的status跟列的field对应上,data-content是field的值. <style>td[data-fiel ...
matlab把某一列作为x轴,excel表格怎么把某一列数据作为x轴-EXCEL表中的两列数据怎样作为X轴和Y轴放在图表里...
excel表格制作坐标图,如何设定某列(数据直接非线... 只能邦你一半.x轴调整我会,生成图表--图表上方右键--选择数据--水平(分类)标签编辑,点进去,选择你要作为X轴的数据区域,即可. 使用e ...
LayUI表格筛选功能出现隐藏列的解决办法
某些业务场景需要把一些信息带入页面,而这些信息又不用给展示出来,一般来说想到的就是隐藏列,利用LayUI表格的 hide:true 就能实现,它还提供筛选功能,但LayUI的表格筛选功能就有个问题,就 ...

LayUI表格在线编辑动态修改列数据

LayUI表格在线编辑动态修改列数据相关推荐

最新文章

热门文章