html表格禁止编辑,bootstrap table 如何禁用单元格编辑?

x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：

首先下载基于bootstrap的源码到本地。引用相关文件。

页面元素

用户名

js初始化

$(function () {

$('#username').editable();

});

上面是通过html的data属性去设置x-editable的参数

js初始化

复制代码

$(function () {

$('#username').editable({

type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等

title: "用户名",              //编辑框的标题

disabled: false,             //是否禁用编辑

emptytext: "空文本",          //空值的默认文本

mode: "inline",              //编辑框的模式：支持popup和inline两种模式，默认是popup

validate: function (value) { //字段验证

if (!$.trim(value)) {

return '不能为空';

}

}

});

});

选择部门

$(function () {

$('#department').editable({

type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等

source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, {value:3,text:"行政部"}],

title: "选择部门",           //编辑框的标题

disabled: false,           //是否禁用编辑

emptytext: "空文本",       //空值的默认文本

mode: "popup",            //编辑框的模式：支持popup和inline两种模式，默认是popup

validate: function (value) { //字段验证

if (!$.trim(value)) {

return '不能为空';

}

}

});

});

var curRow = {};

$(function () {

$("#tb_user").bootstrapTable({

toolbar: "#toolbar",

idField: "Id",

pagination: true,

showRefresh: true,

search: true,

clickToSelect: true,

queryParams: function (param) {

return {};

},

url: "/Editable/GetUsers",

columns: [{

checkbox: true

}, {

field: "UserName",

title: "用户名",

formatter: function (value, row, index) {

return "" + value + "";

}

}, {

field: "Age",

title: "年龄",

}, {

field: "Birthday",

title: "生日",

formatter: function (value, row, index) {

var date = eval('new ' + eval(value).source)

return date.format("yyyy年MM月dd日");

}

},

{

field: "DeptName",

title: "部门"

}, {

field: "Hodd",

title: "爱好"

}],

onClickRow: function (row, $element) {

curRow = row;

},

onLoadSuccess: function (aa, bb, cc) {

$("#tb_user a").editable({

url: function (params) {

var sName = $(this).attr("name");

curRow[sName] = params.value;

$.ajax({

type: 'POST',

url: "/Editable/Edit",

data: curRow,

dataType: 'JSON',

success: function (data, textStatus, jqXHR) {

alert('保存成功！');

},

error: function () { alert("error");}

});

},

type: 'text'

});

},

});

});

$(function () {

$("#tb_user").bootstrapTable({

toolbar: "#toolbar",

idField: "Id",

pagination: true,

showRefresh: true,

search: true,

clickToSelect: true,

queryParams: function (param) {

return {};

},

url: "/Editable/GetUsers",

columns: [{

checkbox: true

}, {

field: "UserName",

title: "用户名",

editable: {

type: 'text',

title: '用户名',

validate: function (v) {

if (!v) return '用户名不能为空';

}

}

}, {

field: "Age",

title: "年龄",

}, {

field: "Birthday",

title: "生日",

formatter: function (value, row, index) {

var date = eval('new ' + eval(value).source)

return date.format("yyyy-MM-dd");

}

},

{

field: "DeptName",

title: "部门"

}, {

field: "Hobby",

title: "爱好"

}],

onEditableSave: function (field, row, oldValue, $el) {

$.ajax({

type: "post",

url: "/Editable/Edit",

data: row,

dataType: 'JSON',

success: function (data, status) {

if (status == "success") {

alert('提交数据成功');

}

},

error: function () {

alert('编辑失败');

},

complete: function () {

}

});

}

});

});