Bootstrap的x-editable行编辑

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
有问题,看文档

猜你喜欢

转载自blog.csdn.net/nangeali/article/details/80823600