bootstrap-table 实现单击单元格可编辑

来源：互联网发布：linux查看端口被占用编辑：程序博客网时间：2024/05/16 11:44
要使bootstrap-table实现可编辑，需要配合使用x-editable插件。
先在页面上导入必要的css和js文件
<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">  <title>bootstrap-table demo</title>  <!-- Bootstrap 3.3.6 -->  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  <!-- Bootstrap table -->  <link rel="stylesheet" href="bootstrap-table-1.11.0/bootstrap-table.css">  <!-- x-editable -->  <link rel="stylesheet" href="x-editable/bootstrap3-editable/css/bootstrap-editable.css"></head><body>  <div class="container">    <p></p>    <table id="table" class="table table-bordered table-hover">    </table>  </div>  <!-- jQuery 2.2.0 -->  <script src="jQuery-2.2.0.min.js"></script>  <!-- Bootstrap 3.3.6 -->  <script src="bootstrap/js/bootstrap.min.js"></script>  <!-- bootstrap table -->  <script src="bootstrap-table-1.11.0/bootstrap-table.js"></script>  <script src="bootstrap-table-1.11.0/extensions/editable/bootstrap-table-editable.js"></script>  <script src="x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>  <script src="bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>  <script type="text/javascript">    $(function(){        $('#table').bootstrapTable({            url:'data.json',            columns:[                {field: 'id',title: 'ID'},                {field: 'name',title: '名称'},                {field: 'price',title: '单价'},                {field: 'number',title: '数量', sortable:true,                    cellStyle:function(value,row,index) {                        return {                            "css":{                                padding:'0px'                            }                        };                    },                    formatter:function(value,row,index){                        if(value == undefined) return "0";                        else return value;                    },                    editable:{                        type:'text',                        clear:false,                        validate:function(value){                            if(isNaN(value)) return {newValue:0, msg:'只允许输入数字'};                            else if(value<0) return {newValue:0, msg:'数量不能小于0'};                            else if(value>=1000000) return {newValue:0, msg:'当前最大只能输入999999'};                        },                        display:function(value){                            $(this).text(Number(value));                        },                        //onblur:'ignore',                        showbuttons:false,                        defaultValue:0,                        mode:'inline'                    }                },                {field:'amount', title: '总价'}            ],            //height:300,            idField:'id',            onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发                if(reason === 'save') {                    var $td = $el.closest('tr').children();                    $td.eq(-1).html((row.price*row.number).toFixed(2));                    $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动                } else if(reason === 'nochange') {                    $el.closest('tr').next().find('.editable').editable('show');                }            }        });        $('#table').on( 'click', 'td:has(.editable)', function (e) {            //e.preventDefault();            e.stopPropagation(); // 阻止事件的冒泡行为           $(this).find('.editable').editable('show'); // 打开被点击单元格的编辑状态        } );    });  </script></body></html>
0 1