使用EditTable实现可编辑列表

使用BootStrap中的EditTable插件实现可编辑列表

业务需求：

列表中某一列要求可以直接点击进行编辑保存

实现效果：

点击序号列，出现弹窗实现编辑保存

具体功能实现

下载环境所需的 js、css放到项目的静态资源目录下

百度云链接：
链接：https://pan.baidu.com/s/1u0Dvr2JgySGsM8MJtP03Wg
提取码：drr1

页面中引入静态资源（注：根据自己的静态资源文件位置改写下方代码）

<link href="/js/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="/js/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script type="text/javascript" src="/js/common/bootstrap-table-edittable.js"></script>

修改对应页面的js文件

function imageinfoload() {//注意此处，将表单放在 bootstrapTable 方法体中$('#FormTableId').bootstrapTable({id: "FormTableId",type: 0, // 0 代表bootstrapTable 1代表bootstrapTreeTablemethod : 'get', // 服务器数据的请求方式 get or posturl: kpsfgcBasicinfoPrefix + "/toSubmitListData", // 服务器数据的加载地址iconSize : 'outline',toolbar : 'toolbar',striped : true, // 设置为true会有隔行变色效果dataType : "json", // 服务器返回的数据类型pagination : true, // 设置为true会在底部显示分页条// queryParamsType : "limit",// //设置为limit则会发送符合RESTFull格式的参数singleSelect : false, // 设置为true将禁止多选// contentType : "application/x-www-form-urlencoded",// //发送到服务器的数据编码类型pageSize : 10, // 如果设置了分页，每页数据条数pageNumber : 1, // 如果设置了分布，首页页码//search : true, // 是否显示搜索框showColumns : false, // 是否显示内容下拉框（选择显示的列）sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"queryParams : function(params) {return {limit: params.limit,offset:params.offset,unitName : $("#unitName").val(),principal : $("#principal").val(),sblb : $("#sblb").val(),declarationDate : $("#declarationDate").val()};},columns : [{checkbox : true},{field : 'codeIndex',title : '序号',color : '#FFFFFF',align: 'center',editable: {  //此处为序号编辑弹框及校验type: 'codeIndex',title: "序号",autohide : false,width : '30px',color : '#FFFFFF',validate: function (value) { //字段验证if (!$.trim(value)) {return '不能为空';}var r = /^\+?[1-9][0-9]*$/;　　//正整数if(!r.test(value) || value > 10000){return '请输入正确的序号';}}},formatter: function (value, row, index) {var htmlText = isNull(row.codeIndex) || row.codeIndex == '0' ? "编号" : row.codeIndex;return htmlText;}},{field: 'startTime',title: '起始日期',align: 'center',},{field: 'sblbName',title: '结束日期',align: 'center',},{field: 'deptName',title: '学术组织或机构名称',align: 'center',},{field: 'dutiesName',title: '职务',align: 'center',}],//点击后的回调函数onEditableSave: function (field, row, oldValue, $el) {//提交行内编辑数据$.ajax({cache : true,type : "POST",url : "更新接口",data : {id : row['id'],codeInde: row['codeInde']},async : false,success : function(data) {if (data.code == 0) {parent.layer.msg("操作成功");imageinfoload();//回调} else {parent.layer.alert(data.msg);imageinfoload();//回调}}});}});
}

编辑后回调函数理解

/*
* editTable 编辑后执行保存函数的方式有两种
*///方式一: 可直接在每一个column中进行编辑保存
{field : 'codeIndex',title : '序号',color : '#FFFFFF',align: 'center',editable: {type: 'codeIndex',title: "序号",autohide : false,width : '30px',color : '#FFFFFF',validate: function (value) { //字段验证if (!$.trim(value)) {return '不能为空';}var r = /^\+?[1-9][0-9]*$/;　　//正整数if(!r.test(value) || value > 10000){return '请输入正确的序号';}}},url:'接口映射',        formatter: function (value, row, index) {var htmlText = isNull(row.codeIndex)|| row.codeIndex == '0' ? "编号" : row.codeIndex;return htmlText;
}//方式二： 使用onEditableSave 进行编辑保存 （注：上述代码使用方式二）onEditableSave: function (field, row, oldValue, $el) {//提交行内编辑数据$.ajax({cache : true,type : "POST",url : "更新接口",data : {id : row['id'],codeInde: row['codeInde']},async : false,success : function(data) {if (data.code == 0) {parent.layer.msg("操作成功");imageinfoload();//回调} else {parent.layer.alert(data.msg);imageinfoload();//回调}}});}});

使用EditTable实现可编辑列表相关推荐

天纵智能软件快速开发平台编辑+列表数据管理插件
定义编辑+列表数据管理插件可以在数据管理界面进行进行数据添加和修改,无需点出弹出窗口进行数据编辑.其样式为在标准数据管理插件中间数据列表的上面加入一个数据编辑面板,点击记录,此面板即显示记录详细,这 ...
可编辑列表标签_好用的音频标签管理工具Music Tag Editor Pro Mac4.0.1 中文版
Music Tag Editor Pro Mac版是Mac os系统上一款音频标签管理工具,支持UNICODE,软件带有PLS/M3U列表生成器,还可以生成XML/TXT/CSV格式的播放列表,通过它 ...
list control双击事件编辑列表框
关于这点知识网上的资源其实非常多,这里给个讲的非常好的博客链接,希望你们少走点弯路点击打开链接环境VS2005 1.目标:实现在双击列表框时的动态修改,包括: 1)双击空白处时自动添加一行: 2) ...
DreamweaverCS6 - BUG(2) —— 编辑浏览器列表无法添加浏览器
需求分析 DWCS6安装成功,由于默认使用IE 为了便捷运行网页和使用习惯的浏览器,例如:Firefox和Google, 我们通常会在编辑浏览器列表添加新的主浏览器还原现场 1.点击浏览器中预览/调 ...
dwcs6中php为什么浏览不了,dreamweaver CS6编辑浏览器列表无法添加浏览器的解决处理...
各位朋友们想知道dreamweaver编辑浏览器列表无法添加浏览器应该怎样处理吗?你们可以跟随小编一起去下文教程中学习一下dreamweaver编辑浏览器列表无法添加浏览器的详细操作流程. dream ...
markdown_typora排版编辑技巧(样式嵌套/撤销/列表缩进)/表格内换行
文章目录 typora 样式嵌套中的样式化与反操作通用小技巧表格内换行快捷键方式方案1:(打断上下文独立样式化) 方案2(原码编辑) 列表项缩进错误做法: 数学公式块出入到列表中表格位于列 ...
MFC List Control 控件添加单元格编辑，实现可编辑重写
在实现随机生成四则运算的个人项目中,目前已经完成基本功能,想要把程序变成一个Windows界面的程序.原本以为学习过MFC,应该很快就能完成.但是由于以前用的都是VC6.0,这次用了VS2010,稍微 ...
Qt Creator列表和其他数据模型
Qt Creator列表和其他数据模型列表和其他数据模型列表和网格视图委托缓存查看重点编辑列表模型路径检视列表和其他数据模型应用程序通常需要处理和显示组织为列表视图或网格视图的数据.Q ...
html文字列表,文字列表模板
文字列表模板 1.如何编辑列表模板文字列表模板存放在模板包archive文件夹中,命名以list_text为前缀在模板包中找到list_text.html 模板,复制另存为一个新模板,命名为lis ...

使用EditTable实现可编辑列表

使用BootStrap中的EditTable插件实现可编辑列表

业务需求：

实现效果：

具体功能实现

使用EditTable实现可编辑列表相关推荐

最新文章

热门文章