bootstrap表格 行编辑状态_bootstrap table 以及行内编辑x-editable组件的使用

dfldx.gif

引入文件

页面元素

js代码

$("#tb_user").bootstrapTable({

columns: [{

checkbox: true,

}, {

field: 'username',

title: '用户名',

width: '10%',

align: 'center',

editable: {

type: 'text',

title: '用户名',

placement: 'right',

emptytext: "空文本",

validate: function(v) {

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

}

},

}, {

field: 'password',

title: '密码',

width: '10%',

align: 'center',

editable: {

type: 'text',

title: '修改密码',

placement: 'right',

validate: function(v) {

if (!v) return '密码不能为空';

}

},

}, {

field: 'power',

title: '权限',

align: 'center',

editable: {

type: 'select2',

title: '修改权限',

placement: 'left',

mode: "inline",

inputclass: 'input-large',

select2: {

multiple: true,

tags: true,

data: [{

id: 'bsb',

text: '篮球'

}, {

id: 'ftb',

text: '足球'

}, {

id: 'wsm',

text: '游泳'

}],

},

}

}],

striped: true, //隔行变色

url: 'json/data1.json',

cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性(*)

pagination: true, //是否显示分页(*)

sortable: false, //是否启用排序

// sortOrder: "asc", //排序方式

sidePagination: "client", //分页方式：client客户端分页，server服务端分页(*)

pageNumber: 1, //初始化加载第一页，默认第一页

pageSize: 10, //每页的记录行数(*)

pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)

search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

strictSearch: false,

showColumns: false, //是否显示所有的列

showRefresh: false, //是否显示刷新按钮

minimumCountColumns: 2, //最少允许的列数

clickToSelect: false, //是否启用点击选中行

// height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

uniqueId: "id", //每一行的唯一标识，一般为主键列

showToggle: false, //是否显示详细视图和列表视图的切换按钮

cardView: false, //是否显示详细视图

detailView: false, //是否显示父子表

onLoadSuccess: function() {}

});

详细请看官网api