欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap table可编辑

程序员文章站 2022-06-08 16:10:58
...

在table init中加入此段代码

onDblClickCell: function(field,value,row,$element) {
                        var upIndex = $element[0].parentElement.rowIndex - 1;
                        var params = options.editFiled.split(",");
                        for (item in params) {
                            if (params[item] == field) {
                                $element[0].innerHTML = "<input id='inputCell' type='text' name='inputCell' style ='width: 40px' value='" + value + "'>";
                                $("#inputCell").focus();
                                $("#inputCell").blur(function () {
                                    var newValue = $("#inputCell").val();
                                    row[field] = newValue;
                                    $(this).remove();
                                    $('#bootstrap-table').bootstrapTable('updateCell', {
                                        index: upIndex,
                                        field: field,
                                        value: newValue
                                    });
                                });
                            }
                        }
                    }

在options中加入

editFiled: "model,num,unitPrice,totalAmount,outStockId,remark,wareTime",//多个用逗号隔开

可编辑select,需加入bootstrap-editable.css,bootstrap-table-editable.js

editable: {
                            type: 'select',
                            title: '类型',
                            name: 'type',
                            emptytext: "请选择类型",
                            placement: 'top',
                            source : function() {//动态获取数据
                                var result = [];
                                result.push({
                                    value : 1,
                                    text : '配件入库'
                                });
                                return result;
                            },
                            select: {
                                allowClear: true,
                                multiple: false,
                                tokenSeparators: [",", " "],
                                width: '150px'//设置宽
                            }
                        }
相关标签: table可编辑