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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值