bootstrap table可编辑

最新推荐文章于 2024-08-17 01:00:00 发布

jokewinl

最新推荐文章于 2024-08-17 01:00:00 发布

阅读量2.9k

点赞数 1

分类专栏： bootstrap 文章标签： table可编辑

本文链接：https://blog.csdn.net/jokewinl/article/details/91526581

版权

bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在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'//设置宽
                            }
                        }