x-editable插件支持行编辑
首先,引入Jquery的JS,Bootstrap的CSS和JS
然后,引入插件的CSS和JS
<link type="text/css" href="${ctx}/static/comp/jquery-ui-bootstrap/css/bootstrap-editable.css" rel="stylesheet">
<script src="${ctx}/static/comp/jquery-ui-bootstrap/js/bootstrap-editable.js" type="text/javascript"></script>
页面代码
业务需要这个表格是拼的,列举两个字段
td = $('<td style="text-align:center;" class="assayItemData" columnName="' + filedName + '" >' + '<a href="#" class="isNormal" data-pk="' + filedName + ',' + sampleData['id'] + '" data-assayItemID="' + sampleData['id'] + '" data-defaultValue="' + sampleData['defaultValue'] + '" data-type="text" data-title="">' + dataName + '</a></td>');
td = $('<td style="text-align:center;" columnName="' + filedName + '" >' + '<a href="#" class="isData" data-pk="' + filedName + ',' + sampleData['id'] + '" data-type="date" data-title="">' + dataName + '</a></td>');
JS代码
这里,isNormal和isData是对应td中a标签的class
// 化验结果
function isNormal() {
$('.isNormal').editable({
type: "text",
title: "",
disabled: false,
showbuttons: false,
emptytext: "———",
mode: "inline",
validate: function (value) {
alert(value);
if (!$.trim(value)) {
return '不能为空';
}
},
url: function (param) {
var value = '';
value = '' + param.pk + ',' + param.value + '';
$.ajax({
type: 'POST',
url: ctx + "/biz/assay-item-data/update",
data: {value: value},
dataType: 'JSON',
success: function (res) {
if (res.message != null && res.message != '') {
setMessage(res.message);
}
},
error: function () {
}
});
}
});
}
// 完成时间
function isData() {
$('.isData').editable({
type: 'datetime',
field: "data",
title: "日期",
showbuttons: false,
emptytext: getDatetime(),
formatter: function (value, row, index) {
var date = eval('new ' + eval(value).source);
return date.format("yyyy-MM-dd HH:mm:ss");
},
editable: {
type: 'date',
title: '日期'
},
url: function (param) {
var data = '';
data = param.pk + ',' + param.value;
$.ajax({
type: 'POST',
url: ctx + "/biz/assay-item-data/update",
data: {value: data},
dataType: 'JSON',
success: function (res) {
if (res.message != null && res.message != '') {
// setMessage(res.message);
}
},
error: function () {
}
});
}
});
}
官网
http://vitalets.github.io/x-editable/
http://vitalets.github.io/x-editable/docs.html#editable
有问题,看文档