bootstrap-table 行内编辑

所需的样式和js文件: https://pan.baidu.com/s/1eSAKzyM 密码: s3wh

参考 : http://www.cnblogs.com/landeanfen/p/5005367.html

columnsDefined()  处需要加行内编辑的可这么设置

{
    title : ‘备注‘,
    field : ‘remark‘,
    formatter : function(value, row, index){
        if(value == null){
            return "添加";
        }else{
            return value;
        }
    },
    editable:{
        title : ‘添加备注‘,
        type  : "text"
    }
},
onEditableSave的设置
onEditableSave: function (field, row, oldValue, $el) {
    $.ajax({
        type: "POST",
        url: home + editUrl,(此处根据自己项目的配置填,反正就是目标请求url)
        data:{"param" : JSON.stringify(row)},
        success: function (data, status) {
            if (data == "success") {
                swal("修改成功");
            }else if(data == "failure"){
                swal("修改失败");
            }else{
                $("#bootstrapTable").bootstrapTable(‘refresh‘);
                swal("修改失败");
            }
        },
        error: function () {
            $("#bootstrapTable").bootstrapTable(‘refresh‘);
            swal("修改失败");
        },
        complete: function () {
//            $("#bootstrapTable").bootstrapTable(‘refresh‘);
        }
    });
}
时间: 2024-11-05 15:42:34

bootstrap-table 行内编辑的相关文章

[转]Laravel与bootstrap-editable实现table的行内编辑

[转]Laravel与bootstrap-editable实现table的行内编辑 准备需要的库 bootstrap3.0下载 bootstrap-table下载 x-editable-develop下载 前端处理 引入库 要使用插件,首先要在blade模板(或者说html)里引入对应的js文件和css文件 bootstrap引入 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器:bootstrap table. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5821192.html 一.x-editable组件介绍 x

Easy UI实现行内编辑

最近跟着勇霞师姐做我们高校云平台的UI系统,各个系统界面的管理.UI的系统虽然很小,但是技术内容很新鲜,这篇博文就像大家介绍一下我新接触的EasyUI的知识:开启行内编辑. 效果图如下: 一.View页面 首先,引入easyui的js文件. [html] view plaincopy <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/theme

EasyUI-Datagrid行内编辑

接上一篇,这次介绍easyUI的datagrid的行内编辑单元格的功能. 关于行内编辑,我之前写过一个demo <jQuery:页面可编辑表格>,但是easyui 中早已经封装了行内单元格编辑的功能,我们在调用时只需要使用人家封装好的方法就行.这里就使用封装好的方法. 实现思路: 1.定义table 时写上监听单击事件的方法:onClickCell:onClickCell: 2.将需要编辑的<th>和<td>设置编辑的触发响应:editor:'text'.其中text只

ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 #是否,已经可以看到效果了. 对于分类ID列,通常显示的是分类名称,而不是ID值. 可是分类名称不在文章表里,在文章分类表,怎么关联格式化呢? 我们有文章分类表: 所以我们写个下拉配置: 然后在配置表头里把它配置上: 效果: PS:通过自定义语句来翻译下拉项的注意事项: 1:翻译项的数量在100以下,

vxe-table 可编辑表格 行内编辑以及验证 element-UI集成

<vxe-table border show-overflow ref="xTable"  --------------------------------------------------------------------------------------------可根据此变量控制表格内容 class="vxe-table-element" height="600" :data="tableData"-----

EasyUI之dataGrid的行内编辑

1 $(function () { 2 var datagrid; //定义全局变量datagrid 3 var editRow = undefined; //定义全局变量:当前编辑的行 4 datagrid = TskupluAddPacket.datagrid({ 5 url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源 6 iconCls: 'icon-save', //图标 7 pagination: true, //显

bootstrap行内编辑后提交多条数据到ssm

先定义一个数组用于接收修改的数据:var changeRows = new Array();在bootstrap属性定义上添加类似:onEditableSave: function (field, row, oldValue, $el) {$table.bootstrapTable('updateRow', {index: row.rowId, row: row});//将 行对象转化为json字符串并放入changeRows数组var result = JSON.stringify(row);

Bootstrap table 行编辑导航

/*开启表格编辑方向键导航 方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) */ function OpenTableEditKeyNavigation() { $(document).on("keyup", "tr.editable-select input", function (event) { var keyCode = event.keyC