bootstrap-editable行内编辑效果如下:
需要引入插件
列初始化代码,为可编辑的列添加editable属性:
columns = [ { title: '文件名', field: 'Name', align: 'center', valign: 'middle', sortable: true, width: '20%' }, { title: '文件版本号', field: 'VerNum', align: 'center', valign: 'middle', sortable: true, width: '20%', editable:{ emptytext: '-', } }, { title: '文件描述', field: 'Description', align: 'center', valign: 'middle', editable: { emptytext: '-' } }, { title: '文件ID', field: 'ObjectId', visible: false } ]
保存修改后台调用方法:
function $onRowEditableSave(field, row, oldValue, $el) { $.ajax({ type: "post", url: "../FilesDownload/Edit?type=FileInfo", data: { strJson: JSON.stringify(row) }, success: function (data, status) { if (data == "1" && status == "success") { showTip('修改成功!', "success"); refreshTable(); $('#table .editable').editable('enable'); $('#btn_offeditfile').hide(); $('#btn_editfile').show(); } else { showTip('修改失败!', "error"); refreshTable(); $('#table .editable').editable('enable'); $('#btn_offeditfile').hide(); $('#btn_editfile').show(); } }, error: function () { showTip('连接服务器超时!', "error"); }, complete: function () { } }); }
通过js动态控制是否可编辑:
$('#table .editable').editable('disable');