bootstraptable-edit使用问题

图片说明
外部的表格无法获取数据,检查contentType属性配置问题。

$(function() {
            //初始化Table
            var oTable = new TableInit();
            oTable.Init();
        });
        var TableInit = function() {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function() {
                $('#table').bootstrapTable({
                    url : 'list',//请求后台的URL(*)
                    method : 'post',//请求方式(*)
                    toolbar : '#toolbar',//工具按钮用哪个容器
                    striped : true,//是否显示行间隔色
                    cache : false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                    pagination : true,//是否显示分页(*)
                    sortable : false,//是否启用排序
                    sortOrder : "asc",//排序方式
                    queryParams : oTableInit.queryParams,//传递参数(*)
                    sidePagination : "server",//分页方式:client客户端分页,server服务端分页(*)
                    pageNumber : 1,//初始化加载第一页,默认第一页
                    pageSize : 10,//每页的记录行数(*)
                    pageList : [ 10, 25, 50, 100 ],//可供选择的每页的行数(*)
                    search : true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
                    contentType : "application/x-www-form-urlencoded",
                    strictSearch : true,
                    showColumns : true,//是否显示所有的列
                    showRefresh : true,//是否显示刷新按钮
                    minimumCountColumns : 2,//最少允许的列数
                    clickToSelect : true,//是否启用点击选中行
                    height : 700,//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                    uniqueId : "id",//每一行的唯一标识,一般为主键列
                    showToggle : true,//是否显示详细视图和列表视图的切换按钮
                    cardView : false,//是否显示详细视图
                    detailView : false,//是否显示父子表
                    columns : [ {
                        field : 'id',
                        title : '编号'
                    }, {
                        field : 'name',
                        title : '名字'
                    }, {
                        field : 'price',
                        title : '价格'
                    }, {
                        field : 'operate',
                        title : '操作',
                        formatter : operateFormatter
                    //自定义方法,添加操作按钮
                    }, ],
                    rowStyle : function(row, index) {
                        var classesArr = [ 'white', 'lightblue' ];
                        var strclass = "";
                        if (index % 2 === 0) {//偶数行
                            strclass = classesArr[0];
                        } else {//奇数行
                            strclass = classesArr[1];
                        }
                        return {
                            classes : strclass
                        };
                    },//隔行变色
                });
            };
            //得到查询的参数
            oTableInit.queryParams = function(params) {
                var temp = {//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                    limit : params.limit,//页面大小
                    //pageNumber: params.pageNumber,//页码
                    offset : params.offset
                };
                return temp;
            };
            return oTableInit;
        };

        function operateFormatter(value, row, index) {//赋予的参数
            return [
                    '<a href="#" style="color:blue;" οnclick="edit(' + row.id
                            + ')">编辑</a>|',
                    '<a href="#" style="color:red;" οnclick="del(' + row.id
                            + ')">删除</a>', ].join('');
        }

table-edit.js

(function($){
    'use strict';

    $.extend($.fn.bootstrapTable.defaults, {
        editable: false
    });

    var BootstrapTable = $.fn.bootstrapTable.Constructor,
        _init = BootstrapTable.prototype.init,
        _initBody = BootstrapTable.prototype.initBody,
        _onSort = BootstrapTable.prototype.onSort,
        _append = BootstrapTable.prototype.append,
        _initHeader = BootstrapTable.prototype.initHeader ;
    //添加编辑表格默认属性,如何edit设置为false时,表示该列不可编辑
    $.extend(true,BootstrapTable.COLUMN_DEFAULTS,{
        edit:{
            type:'text'//目前只支持 文本:text 下拉:select 日期:date 
        }
     });
    BootstrapTable.prototype.init = function () {
        _init.apply(this, Array.prototype.slice.apply(arguments));
        var that = this;
        that.prevEditRow = null;//上一次编辑的行
        that.columns = {};//列配置信息
        that.insertRowVal = {};//新插入行的默认值
        that.enableAppend = true;//允许添加新行
        if (that.options.editable) {
            var columnObj = this['getColumns']();
            $.each(columnObj,function(i,obj){
                $.each(obj,function(z,col){
                    if(!isNaN(col.fieldIndex) && col.fieldIndex >= 0){
                        if(col.checkbox)col.edit = false;
                        that.columns['column'+col.fieldIndex] = col;
                        that.insertRowVal[col.field] = '';
                    }
                });
            });
            //this.initEdit();
        }
    };
    /*BootstrapTable.prototype.initHeader = function(){
        _initHeader.apply(this, Array.prototype.slice.apply(arguments));
        this.$container.find('.fixed-table-header').addClass('success');
    };*/
    BootstrapTable.prototype.initBody = function () {
        var that = this;

        _initBody.apply(this, Array.prototype.slice.apply(arguments));
        if (!that.options.editable) return;
        this.initEdit();

        //如果列是下拉框,则转换值为对应的文本
        $.each(that.columns,function(indx,col){
            if(col.edit && col.edit.type == 'select'){
                col.edit = $.extend({},$.fn.bootstrapSelect.defaults,col.edit);
                if(col.edit.data.length > 0){
                    that.$body.find('>tr').each(function(){
                        if(that.getData().length < 1)return true;
                        var rowData = that.data[$(this).data('index')];//当前点击td所在行的数据
                        var $td = $(this).find('td').eq(col.fieldIndex);
                        $.each(col.edit.data,function(i,data){
                            if(data[col.edit.valueField] == rowData[col.field]){
                                $td.html(data[col.edit.textField]);
                            }
                        });
                    });
                }
                else if(col.edit.url){
                    $.ajax({
                        url:col.edit.url,
                        type:'post',
                        data:col.edit.paramsType == 'json' ? JSON.stringify(col.edit.params) : col.edit.params,
                        dataType:'json',
                        success: function(jsonLst) {
                            col.edit.onLoadSuccess.call(this,jsonLst);
                            that.$body.find('>tr').each(function(){
                                if(that.getData().length < 1)return true;
                                var rowData = that.data[$(this).data('index')];//当前点击td所在行的数据
                                var $td = $(this).find('td').eq(col.fieldIndex);
                                $.each(jsonLst,function(i,data){
                                    if(data[col.edit.valueField] == rowData[col.field]){
                                        $td.html(data[col.edit.textField]);
                                    }
                                });
                            });
                            col.edit.data = jsonLst;
                            col.edit.url = null;
                        },
                        error: function(xhr, textStatus, errorThrown){
                            col.edit.onLoadError.call(this);
                            col.edit.data = [];
                            col.edit.url = null;
                            throw col.field+' 列下拉框数据加载失败';
                        }
                    });
                }
            }
        });
    };
    //根据行号删除指定行
    BootstrapTable.prototype.removeRow = function (rowNum) {
        var that = this;
        var len = that.options.data.length;
        if (isNaN(rowNum)){
            return;
        }
        if(that.$body.find('.editable-select').data('index') != rowNum){
            recover(that);
        }
        //删除数据
        that.options.data.splice(rowNum,1);
        if (len === that.options.data.length){
            return;
        }
        var oldClass = {};//保存被标记修改的样式
        that.$body.find('>tr').each(function(indx){
            if($(this).hasClass('editable-modify')){
                if(indx > rowNum){
                    oldClass[indx-1] = 'editable-modify';
                }
                else{
                    oldClass[indx] = 'editable-modify';
                }
            }
        });
        //this.prevEditRow = null;
        //this.$body.find('>tr').removeClass('editable-select');
        that.initBody();
        //将标记改变过行的样式从新设置回去
        for(var key in oldClass){
            that.$body.find('>tr').eq(key).addClass(oldClass[key]);
        }
        //this.initEdit();
        //没有数据时给提示加上样式
        if(that.getData().length < 1){
            that.$body.find('>tr').addClass('no-records-found');
        }
    };
    BootstrapTable.prototype.append = function (){
        var that = this;
        //if(!that.enableAppend)return;
        var oldClass = {};//保存被标记修改的样式
        that.$body.find('>tr').each(function(indx){
            if($(this).hasClass('editable-modify') || $(this).hasClass('editable-insert')){
                oldClass[indx] = 'editable-modify';
            }
        });
        arguments[0] = $.extend({},that.insertRowVal,arguments[0]);
        _append.apply(this,Array.prototype.slice.apply(arguments));
        if (that.options.editable){
            //that.initEdit();
            setTimeout(function (){
                //将标记改变过行的样式从新设置回去
                for(var key in oldClass){
                    that.$body.find('>tr').eq(key).addClass(oldClass[key]);
                }
                that.$body.find('>tr:last').addClass('editable-modify');
                that.$body.find('>tr:last').addClass('editable-insert');//双重保险,防止在快速点击添加时,为给新增行设置editable-modify属性
                that.$body.find('>tr:last').click();
            },60);
        }

    };

    BootstrapTable.prototype.onSort = function () {
        _onSort.apply(this, Array.prototype.slice.apply(arguments));
        var that = this;
        if (that.options.editable) {
            this.initEdit();
        }
    };
    BootstrapTable.prototype.getData = function () {
        return (this.searchText || this.searchCallback) ? this.data : this.options.data;
    };

    BootstrapTable.prototype.getColumns = function () {
        return this.options.columns;
    };
    /**
     * 获取有被修改过行的值
     */
    BootstrapTable.prototype.getModiDatas = function (){
        var that = this;
        var datas = [];
        that.$body.find('.editable-modify').each(function(){
            if(that.data[$(this).data('index')]){
                datas.push(that.data[$(this).data('index')]);
            }
        });
        return datas;
    };

    /**
     * 获取指定列的和,参数为列下标
     */
    BootstrapTable.prototype.getColTotal = function (num){
        var retVal = 0;
        this.$body.find('>tr').each(function(){
            var colNum = 0;
            if($(this).hasClass('editable-select')){
                colNum = $(this).find('td').eq(num).find('input').val();
            }
            else{
                colNum = $(this).find('td').eq(num).html();
            }

            if(!isNaN(colNum)){//是数字才做想加
                retVal += Number(colNum);
            }
        });
        return retVal;
    };

    /**
     * 创建可编辑表格
     */
    BootstrapTable.prototype.initEdit = function(){
        var that = this,
        data = this.getData();
        //this.$body.find('> tr').unbind('click').on('click'
        //this.$body.delegate('>tr','click'
        this.$body.find('> tr').unbind('click').on('click',function(){
            var $tr = $(this);
            if($tr.hasClass('editable-select') || data.length < 1 || $tr.hasClass('no-records-found')){
                return;
            }
            $tr.removeClass('no-records-found');
            recover(that);
            that.prevEditRow = $tr;
            $tr.addClass('editable-select');//给当前编辑行添加样式,目前样式为空只做标识使用
            that.$body.find('> tr').not(this).removeClass('editable-select');
            $tr.find('td').closest('td').siblings().html(function(i,html){
                initTrClick(that,this);
            });
        });
        //鼠标点击事件
        $(document).bind('mousedown',function(event){
            var $target = $(event.target);
            if(!($target.parents().andSelf().is(that.$body)) && !($target.parents().andSelf().is($('.datetimepicker')))){
                setTimeout(function () {
                    recover(that);
                    //that.prevEditRow = null;
                    //that.$body.find('> tr').removeClass('editable-select');
                },10);
            };
        });

    };

    $.fn.bootstrapTable.methods.push('getColumns',
        'getModiDatas','removeRow','getColTotal');

    /**
     * 给tr添加点击事件
     */
    function initTrClick(that,_this){
        that.enableAppend = true;
        var $td = $(_this);
        var $tr = $td.parent();
        var rowData = that.data[$tr.data('index')];//当前点击td所在行的数据
        var tdIndex = $tr.children().index($td);//当前点击的td下标
        var tdOpt = that.columns['column'+tdIndex];
        if(!tdOpt.edit || typeof tdOpt.edit != 'object'){
            return ;
        }
        $td.data('field',tdOpt.field);
        if(!$td.data('oldVal')){
            $td.data('oldVal',$.trim(rowData[tdOpt.field]));
        }
        var height = $td.innerHeight() - 3;
        var width = $td.innerWidth() - 2;
        $td.data('style',$td.attr('style'));//保存原来的样式
        $td.attr('style','margin:0px;padding:1px!important;');
        var placeholder = '';
        if(tdOpt.edit.required == true){
            placeholder = '必填项';
        }
        var value = rowData[tdOpt.field] == null || rowData[tdOpt.field] == ''?'':rowData[tdOpt.field];
        $td.html('<div style="margin:0;padding:0;overflow:hidden;border:solid 0px red;height:'+(height)+'px;width:'+(width)+'px;">'
                    +'<input type="text" placeholder="'+placeholder+'" value="'+value+'" style="margin-left: 0px; margin-right: 0px; padding-top: 1px; padding-bottom: 1px; width:100%;height:100%">'
                +'</div>');
        $td.width(width);
        var $input = $td.find('input');
        if(!tdOpt.edit.type || tdOpt.edit.type == 'text'){
            if(tdOpt.edit['click'] && typeof tdOpt.edit['click'] === 'function'){
                $input.unbind('click').bind('click',function(event){
                    tdOpt.edit['click'].call(this,event);
                });
            }
            if(tdOpt.edit['focus'] && typeof tdOpt.edit['focus'] === 'function'){
                $input.unbind('focus').bind('focus',function(event){
                    tdOpt.edit['focus'].call(this,event);
                });
            }
            $input.unbind('blur').on('blur',function(event){
                if(tdOpt.edit['blur'] && typeof tdOpt.edit['blur'] === 'function'){
                    tdOpt.edit['blur'].call(this,event);
                }
            });

        }
        else if(tdOpt.edit.type == 'select'){
            $input.bootstrapSelect(tdOpt.edit);
        }
        else if(tdOpt.edit.type == 'date'){
            $td.html('<div style="margin:0;padding:0;overflow:hidden;border:solid 0px red;height:'+(height)+'px;width:'+(width)+'px;" class="input-group date form_datetime" data-link-field="dtp_editable_input">'
                        +'<input class="form-control" type="text" value="'+value+'">'
                        +'<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>'
                    +'</div>'
                    +'<input type="hidden" id="dtp_editable_input" value="'+value+'"/>'
            );
            that.$body.find('.form_datetime').datetimepicker({
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                language:'zh-CN',
                format: 'yyyy-mm-dd hh:ii:ss',
                pickerPosition: 'bottom-left',
                showMeridian: 1
            });
        }
    }
    /**
     * 恢复tr,使之处于不可编辑状态
     */
    function recover(that){
        var isModi = false;//判断行值是否变动过
        if(that.prevEditRow != null){
            that.prevEditRow.find('td').closest('td').siblings().html(function(i,html){
                $(this).attr('style',$(this).data('style'));
                var textVal = $(this).find('input[type="text"]').val();
                var hiddenVal = $(this).find('input[type="hidden"]').val();
                if(typeof $(this).find('input[type="text"]').bootstrapSelect('getText') != 'object'){
                    $(this).find('input[type="text"]').bootstrapSelect('destroy');
                }

                if(textVal != undefined){
                    if($(this).data('oldVal') != (hiddenVal?hiddenVal:$.trim(textVal)) && $(this).data('field')) {
                        that.data[that.prevEditRow.data('index')][$(this).data('field')] = hiddenVal?hiddenVal:$.trim(textVal);
                        isModi = true;
                    }
                    if(that.columns['column'+i].edit.required == true){
                        if(textVal == null || textVal == ''){
                            that.enableAppend = false;
                            return '<span style="color:red;">必填项不能为空</span>';
                        }
                    }
                    return $.trim(textVal);
                }
            });
            //新值跟旧值不匹配证明被改过
            if(isModi || that.prevEditRow.hasClass('editable-insert')){
                that.prevEditRow.addClass('editable-modify');
            }
            else{
                that.prevEditRow.removeClass('editable-modify');
            }
            that.prevEditRow = null;
            that.$body.find('> tr').removeClass('editable-select');
        }
    }

})(jQuery);

哪位大神能帮忙解决下

1个回答

解决了,js顺序问题。初始化时editable判断太后了

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
bootStrap-table 无法根据index删除对应行

$(function () { var options = { url: prefix + "/init", sortName: "createTime", sortOrder: "desc", modalName: "空箱", search: false, showExport: false, uniqueId: 'index', columns: [ { field: 'index', align: 'center', title: '序号', formatter: function (value, row, index) { return index + 1; } }, { field: 'containerType', align: 'center', title: '箱型' }, { field: 'quantity', align: 'center', title: '数量' }, { title: '操作', align: 'center', formatter: function (value, row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> '); actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="delDetail(\'' + index + '\')"><i class="fa fa-remove"></i>删除</a> '); return actions.join(''); } }], showToggle: false, showColumns: false, showSearch: false, showRefresh: false }; $.table.init(options); }); function addDetail() { var _data = { "containerType": $("#containerType option:selected").val(), "quantity": $("input[name='quantity']").val() }; $("#bootstrap-table").bootstrapTable('prepend', _data); } function delDetail(index) { console.log([parseInt(index)]); $('#bootstrap-table').bootstrapTable('remove', { field: "index", values: [parseInt(index)] }); } 上面这个删除方法删不掉

bootstrap table 数据传递成功,就是不显示数据

bootstrap table 提示onloadsuccess 了,并且查看有数据,但是table就是不显示; 页面: <div class="wrapper"> <div class="fresh-table full-screen-table"> <div class="toolbar"> <button id="alertBtn" class="btn btn-default">Alert</button> </div> <table id="fresh-table" class="table" data-pagination="true" data-show-toggle="true" data-showColumns="true"> <thead> <tr> <th data-field="id" data-checkbox="true">id</th> <th data-field="username" data-sortable="true">Name</th> <th data-field="phone" data-sortable="true">Salary</th> <th data-field="actions" data-formatter="operateFormatter" data-events="operateEvents">Actions</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> JS: $(top.hangge()); var $table = $('#fresh-table'), $alertBtn = $('#alertBtn'), full_screen = false, window_height; $().ready(function(){ window_height = $(window).height(); table_height = window_height - 20; $table.bootstrapTable('destroy'); $table.bootstrapTable({ toolbar: ".toolbar", url : '<%=basePath%>receiving/queryList.do', //请求后台的URL(*) method : 'get', //请求方式(*) showRefresh : true, search : true, showToggle : true, showColumns : true, pagination : true, striped : true, sortable : true, height : table_height, pageSize : 25, pageList : [ 25, 50, 100 ], formatShowingRows : function(pageFrom, pageTo, totalRows) { }, formatRecordsPerPage : function(pageNumber) { return pageNumber + " rows visible"; }, icons : { refresh : 'fa fa-refresh', toggle : 'fa fa-th-list', columns : 'fa fa-columns', detailOpen : 'fa fa-plus-circle', detailClose : 'fa fa-minus-circle' }, onLoadSuccess : function(data) { alert(data.rows[0].username);//这边是有数据的 }, onLoadError : function(status) { alert(status); } }); window.operateEvents = { 'click .like' : function(e, value, row, index) { alert('You click like icon, row: ' + JSON.stringify(row)); console.log(value, row, index); }, 'click .edit' : function(e, value, row, index) { alert('You click edit icon, row: ' + JSON.stringify(row)); console.log(value, row, index); }, 'click .remove' : function(e, value, row, index) { $table.bootstrapTable('remove', { field : 'id', values : [ row.id ] }); } }; $alertBtn.click(function() { alert("You pressed on Alert"); }); $(window).resize(function() { $table.bootstrapTable('resetView'); }); }); function operateFormatter(value, row, index) { return [ '<a rel="tooltip" title="Like" class="table-action like" href="javascript:void(0)" title="Like">', '<i class="fa fa-heart"></i>', '</a>', '<a rel="tooltip" title="Edit" class="table-action edit" href="javascript:void(0)" title="Edit">', '<i class="fa fa-edit"></i>', '</a>', '<a rel="tooltip" title="Remove" class="table-action remove" href="javascript:void(0)" title="Remove">', '<i class="fa fa-remove"></i>', '</a>' ].join(''); }

bootstrapTable显示混乱

使用bootstrapTable时,发生了按钮和文字显示混乱的问题。![图片说明](https://img-ask.csdn.net/upload/201812/25/1545706948_270165.png) 在Chrome环境运行,console上没有任何问题。 html页面如下 ``` <div id="toolbar" class="btn-group" style="margin-top:15px"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <div><table id="data-table"></table></div> ``` js页面如下 ``` $('#data-table').bootstrapTable({ toolbar:"#toolbar", striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 1, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "ID", //每一行的唯一标识,一般为主键列 showToggle:true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ checkbox: true },{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }], data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }] }); ```

bootstrap-table插件如何让td标签里面内容只显示一行,多余部分用省略号显示

bootstrap-table插件如何让td标签里面内容只显示一行,多余部分用省略号显示, 因为写了table-alyout:fixed 表格会不自适应,所以想用js 写,但是td 的宽度获取不到,怎么弄??

使用Bootstrap-Editable时,日期时间更新出错

<div class="post-text" itemprop="text"> <p>I'm trying to update a sql datetime. I just wana update the time and have some scripts for substr(). Now when i update the Hrs and min the day (d) get's reset to 1 in the first edit and 0 in a second edit.</p> <p>I'm using a html table generated by php and bootstrap-editable for editing the rows using Js and PHP.</p> <p>Why does the date return first 01 and then 00 in db?</p> <p>Ex. 2012-02-23 00:00:00 becomes 2012-02-01 00:00:00 in first update.</p> <p><strong>HTML</strong></p> <pre><code>&lt;a href='#' id='".$row['id']."' class='usr_stamp_out' data-name='usr_stamp_out' data-type='text' data-pk='".$row['id']."' data-url='php/time.php' data-title='Stämpla ut..'&gt;".substr($row['usr_stamp_out'],11,5)."&lt;/a&gt; </code></pre> <p><strong>PHP</strong></p> <pre><code>$id = $_POST['pk']; $updated_usr_stamp_out = $_POST['value']; if($row){ //Substring datetime to 0000-00-00 $usr_stamp_out_date = substr($row['usr_stamp_out'],0,9); //Add old date to updated time $new_usr_stamp_out = $usr_stamp_out_date." ".$updated_usr_stamp_out; //Prepare query $query = "UPDATE table SET usr_stamp_out = :usr_stamp_out WHERE id = :id"; // Security measures $query_params = array(':id' =&gt; $id,':usr_stamp_out' =&gt; $new_usr_stamp_out); //Connect and execute try { $stmt = $db-&gt;prepare($query); $result = $stmt-&gt;execute($query_params); } catch(PDOException $ex){ die("Failed to run query: " . $ex-&gt;getMessage()); } } </code></pre> </div>

bootstraptable的选中一行事件慢于onclick事件

![图片说明](https://img-ask.csdn.net/upload/201904/07/1554627780_457848.png) 就这样一开始选定的是第三项,然后 这时候点击第四项的修改按钮时 获取的还是第三项的值 也就是修改的click事件快于bootstraptable的选定一项事件,这个怎么搞?

在bootstrap 4中使用font-awesome图标时如何调整表格行高?

<div class="post-text" itemprop="text"> <p>Whenever I add font-awesome icon on my table my table row height increases. I am using bootstrap 4 and font-awesome 4.7.0</p> <pre><code>&lt;table class="table table-bordered table-condensed table-stripped"&gt; &lt;thead&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;Product&lt;/th&gt; &lt;th&gt;Price&lt;/th&gt; &lt;th&gt;Category&lt;/th&gt; &lt;th&gt;Featured&lt;/th&gt; &lt;th&gt;Sold&lt;/th&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;!-- Here is the problem--&gt; &lt;td&gt;&lt;i class="fa fa-edit" style="font-size:30px;color:red"&gt;&lt;/i&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>When Use font-awesome in bootstrap 4</p> <p><strong>See icon is small here when I increase icon size my row height also increases</strong></p> <p><a href="https://i.stack.imgur.com/S8pAD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S8pAD.png" alt="enter image description here"></a></p> <p><strong>I want this icon size and row height is perfect</strong></p> <p><a href="https://i.stack.imgur.com/XWifj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XWifj.png" alt="enter image description here"></a></p> <p>when I use font-awesome icon then my table row height increase and when I remove <code>class="fa fa-edit"</code> then my table look ok and table row height get short. I want to adjust font-awesome icon and my table row height but I am unable to do it.</p> <p>For solving this problem I add <code>style="font-size:30px"</code> in <code>&lt;i&gt;</code> then my font icon visible properly on my table row but table row height increases which look odd. I want to increase <code>font-size</code> of my icon but do not want to increase my table row height or I also want to adjust my table row height manually. For this I have used <code>&lt;td height="100"&gt;</code> but it did not work. <code>&lt;tr height="100"&gt;</code> but it did not work with font-awesome icon.</p> <p>Your valuable suggestions would be a great help for a beginner like me. Thank You.</p> </div>

想问大佬,bootstraptable统计列值的时候没有显示在页面上怎么回事啊?

function reload() { let $table = $('#db_dependences'); $('#db_dependences').bootstrapTable({ method:'POST', dataType:'json', contentType: "application/x-www-form-urlencoded", cache: false, striped: true, //是否显示行间隔色 sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*) showColumns:true, pagination:true, minimumCountColumns:2, pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 20, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) uniqueId: 'id', //每一行的唯一标识,一般为主键列 showExport: true, showFooter:true, exportDataType: 'all', exportTypes:[ 'txt', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型 columns: [{ field: 'id', title: '序号', align: 'center', edit:false,formatter:function(value, row, index){ return row.index=index ; //返回行号 }, visible: true, footerFormatter: function(){ return "当前总分:"; } }, { field: 'type', title: '题型', align: 'center', sortable:true },{ field: 'content', align: 'center', title: '内容' }, { field: 'level', title: '难度', align: 'center' }, { field: 'value', title: '分值', align: 'center', formatter:function(value,row,index){ return row.value; }, //计算此列的值 footerFormatter:function(rows){ var sum=0; for(var i=0;i<rows.length;i++){ sum=sum+parseInt(rows[i].value); } console.log("sum="+sum); return sum+"分"; } }, { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度,单位为像素px formatter: function (value, row, index) { //传入数据 return '<button class="btn btn-default btn-sm" onclick="showitem(\'' + row.type+'\',\''+row.level+'\',\''+row.value+'\',\''+row.content + '\')">查看</button>&emsp;<button class="btn btn-primary btn-sm" onclick="del(\'' + row.id + '\')">移除</button>'; } }], onPostBody:function(){ //合并页脚 merge_footer(); }, data: result, onClickCell: function(field, value, row, $element) { $element.attr('contenteditable', true); $element.blur(function() { let index = $element.parent().data('index'); let tdValue = $element.html(); saveData(index, field, tdValue); }) }, onExpandRow: function (index, row, $detail) { detailview(index, row, $detail) } }); //合并页脚 function merge_footer(){ //获取table表中footer 并获取到这一行的所有列 var footer_tbody = $('.fixed-table-footer table tbody'); var footer_tr = footer_tbody.find('>tr'); var footer_td = footer_tr.find('>td'); var footer_td_1 = footer_td.eq(0); //由于我们这里做统计只需要两列,故可以将除第一列与最后一列的列全部隐藏,然后再设置第一列跨列 //遍历隐藏中间的列 下标从1开始 for(var i=1;i<footer_td.length-1;i++) { footer_td.eq(i).hide(); } //设置跨列 footer_td_1.attr('colspan', footer_td.length-1).show(); //这里可以根据自己的表格来设置列的宽度 使对齐 footer_td_1.attr('width', "910px").show(); }

bootstrap table中 可编辑,如何将一列编辑的结果另一列动态加载

columns : [ { field : "dept", edit : { type : 'select',//下拉框 data : [ <c:forEach items="${deptList }" var="item" varStatus="status" > { id:"${item.id }", text:"${item.name }", deptnum:"${item.deptnum }" }, </c:forEach> ], valueField : 'deptnum', textField : 'text', onSelect : function(val, rec) { alert(val); $.ajax({ type: "POST", url: "../operate/getKufangs", dataType: "json", data: { dept:val }, success: function (data) { if (data.type == 'success') { $("#kufangs2").val(data.kufangs); } } }); console.log(val, rec); } }, title : "机构", align : "center", width : "200px" }, { field : "kufangid", edit : { type : 'select',//下拉框 data : [ <c:forEach items="${kufangList }" var="item" varStatus="status" > { id:"${item.id }", text:"${item.name }" }, </c:forEach> ], valueField : 'id', textField : 'text', onSelect : function(val, rec) { console.log(val, rec); } }, title : "名称", align : "center", width : "200px" }, 这两个要怎么动态关联,请大神解答

bootstrap getSelections 方法获取不到值

``` <script type="text/javascript"> $(function(){ //编辑表格 $('#table').bootstrapTable({ //数据来源的网址 url:'/index.xhtml', method: 'post', editable:true,//开启编辑模式 clickToSelect: true, showPaginationSwitch:true, //显示分页切换按钮 search: true, //显示检索框 showRefresh: true, //显示刷新按钮 showToggle:true, //显示切换按钮来切换列表/卡片视图 pagination: true, pageList: [5,25], pageSize:5, columns: [[ {field:"id",edit:false,title:"编号",align:"center"}, {field:"user_company",edit:{ type:'select', //数据来源地址 //url:'user/getUser.htm', data:[{id:1,text:'lzx'},{id:2,text:'lsl'}], valueField:'id', textField:'text', onSelect:function(val,rec){ console.log(val,rec); } },title:"下拉框",align:"center",width:"200px"}, {field:"time",edit:{ type:'date',//日期 required:true, click:function(){ } },title:"时间",align:"center"}, {field:"name",title:"名字",align:"center"}, {field:"age",title:"年龄",align:"center"}, {field:"gender",title:"性别",align:"center",width:"200px",formatter:function(value,row,rowIndex){ if(value==1){ return '男'; }else if(value==2){ return '女'; } },edit:{ type:'select',//下拉框 //数据来源地址 data:[{id:1,text:'男'},{id:2,text:'女'}], valueField:'id', textField:'text', onSelect:function(val,rec){ console.log(val,rec); } }} ]], onDblClickRow: function (row) { console.log(row.name) } }); $('#addRowbtn').click(function(){ var data = {}; $('#table').bootstrapTable('prepend',data); }); }); function removeRow(row){ console.log(row); } function update(){ var row = $('#table').bootstrapTable('getSelections') console.log(row) location.href="delete.action?uid="+row.uid var row = $('#dg').datagrid('reload'); } function sava(){ var row = $('#table').bootstrapTable("getSelections"); if(row.length==0){ alert("请选择一行"); }else{ console.log(row); } } </script> <body> <div id="myTabContent" class="tab-content"> <!--可编辑表格--> <div class="tab-pane fade in active button" id="tab2"> <button type="button" class="btn btn-success dropdown-toggle" id="addRowbtn"> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>增加 </button> <button type="button" class="btn btn-warning" onclick="javascript:update()"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改 </button> <button type="button" class="btn btn-info" onclick="javascript:sava()" id="sava"> <span class=" glyphicon glyphicon-floppy-save" aria-hidden="true"></span>保存 </button> </div> </div> <div> <table class="table table-striped table-hover" id="table"></table> </div> </body> </html> ``` 获取不到值 一直是undefined 很无奈

bootstrap 表格添加一行表格

``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Document</title> <script src="static/js/import.inc.js"></script> </head> <style type="text/css"> .table{ margin-top: 5px; } .button{ margin-top: 8px; margin-left: 10px; } </style> <script type="text/javascript"> $(function(){ //编辑表格 $('#reportTable').bootstrapTable({ //数据来源的网址 url:'/index.xhtml', method: 'post', editable:true,//开启编辑模式 clickToSelect: true, showPaginationSwitch:true, //显示分页切换按钮 search: true, //显示检索框 showRefresh: true, //显示刷新按钮 showToggle:true, //显示切换按钮来切换列表/卡片视图 pagination: true, pageList: [5,25], pageSize:5, pageNumber:1, columns: [[ {field:"id",edit:false,title:"编号",align:"center"}, {field:"user_company",edit:{ type:'select',//下拉框 //数据来源地址 //url:'user/getUser.htm', data:[{id:1,text:'lzx'},{id:2,text:'lsl'}], valueField:'id', textField:'text', onSelect:function(val,rec){ console.log(val,rec); } },title:"下拉框",align:"center",width:"200px"}, {field:"time",edit:{ type:'date',//日期 required:true, click:function(){ } },title:"时间",align:"center"}, {field:"name",title:"名字",align:"center"}, {field:"age",title:"年龄",align:"center"}, {field:"gender",title:"性别",align:"center",width:"200px",formatter:function(value,row,rowIndex){ if(value==1){ return '男'; }else if(value==2){ return '女'; } },edit:{ type:'select',//下拉框 //数据来源地址 data:[{id:1,text:'男'},{id:2,text:'女'}], valueField:'id', textField:'text', onSelect:function(val,rec){ console.log(val,rec); } }} // {field:"userstatus_end_time",title:"操作",align:"center",formatter:function(value,row,rowIndex){ // var strHtml ='<a href="javascript:void(0);" onclick="removeRow('+row+')">删除</a>'; // return strHtml; // },edit:false} ]] }); $('#addRowbtn').click(function(){ var data = {}; $('#reportTable').bootstrapTable('append',data); }); $('sava').onClickCell(function(){ }); }); function removeRow(row){ console.log(row); } function update(){ var row = $('#reportTable').bootstrapTable('getSelections') console.log(row) location.href="delete.action?uid="+row.uid var row = $('#dg').datagrid('reload'); } function sava(){ var row = $('#reportTable').bootstrapTable('getSelections'); if(row.length==1){ console.log(a[0].id); }else{ console.log(row.name); alert("请选中一行") } } </script> <body> <div id="myTabContent" class="tab-content" style=""> <!--可编辑表格--> <div class="tab-pane fade in active button" id="tab2"> <button type="button" class="btn btn-success dropdown-toggle" id="addRowbtn"> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>增加 </button> <button type="button" class="btn btn-warning" onclick="javascript:update()"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改 </button> <button type="button" class="btn btn-info" onclick="javascript:sava()" id="sava"> <span class=" glyphicon glyphicon-floppy-save" aria-hidden="true"></span>保存 </button> </div> </div> <div> <table class="table table-striped table-hover" id="reportTable"></table> </div> </body> </html> ``` 问题:直接看效果图 ![出数据时的照片图片说明](https://img-ask.csdn.net/upload/201711/05/1509852089_124769.png) ![点击添加时的图片说明](https://img-ask.csdn.net/upload/201711/05/1509852141_790874.png) ![在最后一页点击添加就可以了图片说明](https://img-ask.csdn.net/upload/201711/05/1509852171_550306.png) 就是个这个问题 就是不能再第一页添加直接会覆盖最后一天数据

bootstrap会替换title属性问题

添加了title属性,鼠标划上的时候bootstrap会添加一个aria-describedby属性,然后把我的title内容清空,然后提示信息就会出现在屏幕最左边,这种问题怎么解决

bootstrap 获取不到行

``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Document</title> <script src="static/js/import.inc.js"></script> </head> <style type="text/css"> .table{ margin-top: 5px; } .button{ margin-top: 8px; margin-left: 10px; } </style> <script type="text/javascript"> $(function(){ //编辑表格 $('#reportTable').bootstrapTable({ //数据来源的网址 url:'/index.xhtml', method: 'post', editable:true,//开启编辑模式 clickToSelect: true, showPaginationSwitch:true, //显示分页切换按钮 search: true, //显示检索框 showRefresh: true, //显示刷新按钮 showToggle:true, //显示切换按钮来切换列表/卡片视图 pagination: true, pageList: [5,25], pageSize:5, pageNumber:1, columns: [[ {field:"id",edit:false,title:"编号",align:"center"}, {field:"user_company",edit:{ type:'select',//下拉框 //数据来源地址 //url:'user/getUser.htm', data:[{id:1,text:'lzx'},{id:2,text:'lsl'}], valueField:'id', textField:'text', onSelect:function(val,rec){ console.log(val,rec); } },title:"下拉框",align:"center",width:"200px"}, {field:"time",edit:{ type:'date',//日期 required:true, click:function(){ } },title:"时间",align:"center"}, {field:"name",title:"名字",align:"center"}, {field:"age",title:"年龄",align:"center"}, {field:"gender",title:"性别",align:"center",width:"200px",formatter:function(value,row,rowIndex){ if(value==1){ return '男'; }else if(value==2){ return '女'; } },edit:{ type:'select',//下拉框 //数据来源地址 data:[{id:1,text:'男'},{id:2,text:'女'}], valueField:'id', textField:'text', onSelect:function(val,rec){ console.log(val,rec); } }} // {field:"userstatus_end_time",title:"操作",align:"center",formatter:function(value,row,rowIndex){ // var strHtml ='<a href="javascript:void(0);" onclick="removeRow('+row+')">删除</a>'; // return strHtml; // },edit:false} ]] }); $('#addRowbtn').click(function(){ var data = {}; $('#reportTable').bootstrapTable('append',data); }); }); function removeRow(row){ console.log(row); } function update(){ var row = $('#reportTable').bootstrapTable('getSelections') console.log(row) location.href="delete.action?uid="+row.uid var row = $('#dg').datagrid('reload'); } function sava(){ var row = $('#reportTable').bootstrapTable('getSelections'); if(row.length==1){ console.log(a[0].id); }else{alert("请选中一行")} } </script> <body> <div id="myTabContent" class="tab-content" style=""> <!--可编辑表格--> <div class="tab-pane fade in active button" id="tab2"> <button type="button" class="btn btn-success dropdown-toggle" id="addRowbtn"> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>增加 </button> <button type="button" class="btn btn-warning" onclick="javascript:update()"> <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改 </button> <button type="button" class="btn btn-info" onclick="javascript:sava()"> <span class=" glyphicon glyphicon-floppy-save" aria-hidden="true"></span>保存 </button> </div> </div> <div> <table class="table table-striped table-hover" id="reportTable"></table> </div> </body> </html> ``` 点击保存时打印了一下为undefined 不知道为啥

在bootstrap模式中动态加载angularjs app?

<div class="post-text" itemprop="text"> <p>I have a page, <code>index.blade.php</code>. (no angularjs)</p> <pre><code>&lt;body&gt; &lt;table&gt; &lt;!-- If i click on a row, I store its id in a global variable (selected_id), then I can click on show_edit_modal to view its details --&gt; &lt;tr&gt;&lt;/tr&gt; &lt;tr&gt;&lt;/tr&gt; &lt;/table&gt; &lt;button id="show_edit_modal"&gt;Show Modal&lt;/button&gt; &lt;div id="edit_modal"&gt; &lt;!-- empty at first --&gt; &lt;/div&gt; $('#show_edit_modal').click(function(){ // Fetch view $.ajax({ type: 'GET', url: '/get_edit/' + selected_id, success: function(response) { $('#edit_modal').html(response); } }); }); &lt;/body&gt; </code></pre> <p>Click on “Add” button -&gt; it will display a modal. </p> <p>An ajax request will be sent on click to fetch the view (edit.blade.php) to be placed inside that modal. Not using an iframe. The request will return a view/blade file.</p> <p>In the controller, receiver of ajax request:</p> <pre><code>$data = Model::find($id); return view('edit', compact('data')); </code></pre> <p>edit.blade.php</p> <pre><code>&lt;div ng-app="itemsModule"&gt; &lt;div ng-controller="editController"&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;script src="angular.min.js"&gt; &lt;script src="/controllers/edit.js"&gt; </code></pre> <p>That fetched view has an angularjs app in it. The angularjs library script, controller script, all loaded inside that view.</p> <p>Is this possible? If so, is there a standard way of doing it? Or should I try restructuring?</p> <p>I have tried to run this and it works on the first click, but when I click on a different row and try to edit the details, I get a warning about attempting to load angularjs more than once.</p> </div>

Datatable-bootstrap仅适用于第一页。

<div class="post-text" itemprop="text"> <p>I'm new to datatable-bootstrap. I have edit button and delete button, when i press edit button, it works fine on first page only.From 2nd page it doesn't work. How to refresh the datatable (only table) after deleting? </p> <p><strong>For refreshing table(after DELETING)</strong></p> <p>This code is working only one time, if i click again on another button, it doesn't work</p> <pre><code>$('table').load(location.href + " table"); </code></pre> <p><strong>php file for datatable</strong></p> <pre><code>&lt;script&gt; $(document).ready(function() { $('#vehicle-list').dataTable(); } ); &lt;/script&gt; &lt;table class="table table-hover myTable" id="vehicle-list"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;No&lt;/th&gt; &lt;th&gt;No plate&lt;/th&gt; &lt;th&gt;Type&lt;/th&gt; &lt;th&gt;A/C&lt;/th&gt; &lt;th&gt;Fuel&lt;/th&gt; &lt;th&gt;Action&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;?php include 'inc/connection.php'; $que="SELECT * FROM vehicle_register"; $query_run=mysqli_query($con,$que); $no=1; while($row=mysqli_fetch_array($query_run)) { ?&gt; &lt;tr&gt; &lt;td&gt;&lt;?php echo $no++; ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo $row['no_plate']; ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo $row['vehicle_type']; ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo $row['ac_type']; ?&gt;&lt;/td&gt; &lt;td&gt;&lt;?php echo $row['fuel_type']; ?&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="btn-group"&gt;&lt;a class='Edit btn btn-primary' data-toggle="modal" href="#form_modal" data-target="#myModal" data-Id="&lt;?php echo $row['no_plate'];?&gt;"&gt;Edit&lt;/a&gt;&lt;a class='Delete btn btn-danger' data-toggle="modal" href="#form_modal" data-target="#myModal" data-Id="&lt;?php echo $row['no_plate'];?&gt;"&gt;Delete&lt;/a&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;?php } mysqli_close($con); ?&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> </div>

特定行id的Bootstrap模态表单

<div class="post-text" itemprop="text"> <p>Trying to combine two tutorials to get one output. First one is <a href="https://itsolutionstuff.com/post/laravel-57-crud-create-read-update-delete-tutorial-example-example.html" rel="nofollow noreferrer">Laravel 5.7 CRUD (Create Read Update Delete) Tutorial Example</a></p> <p>Now i changed the main layout and struggle with one problem. </p> <p>My main layout looks like this : <a href="https://i.stack.imgur.com/h6fVT.png" rel="nofollow noreferrer">Design mode of my screen</a></p> <p>So code for generating this table is shown bellow</p> <pre><code>@foreach ($products as $product) &lt;tbody&gt; &lt;tr&gt; &lt;td&gt; &lt;span class="custom-checkbox"&gt; &lt;input type="checkbox" id="checkbox1" name="options[]" value="1"&gt; &lt;label for="checkbox1"&gt;&lt;/label&gt; &lt;/span&gt; &lt;/td&gt; &lt;td&gt;{{ $product-&gt;name }}&lt;/td&gt; &lt;td&gt;{{ $product-&gt;name }}&lt;/td&gt; &lt;td&gt;{{ $product-&gt;detail }}&lt;/td&gt; &lt;td&gt; &lt;a href="#editEmployeeModal" class="edit" data-toggle="modal"&gt;&lt;i class="material-icons" data-toggle="tooltip" title="Edit"&gt;&amp;#xE254;&lt;/i&gt;&lt;/a&gt; &lt;a href="#deleteEmployeeModal" class="delete" data-toggle="modal"&gt;&lt;i class="material-icons" data-toggle="tooltip" title="Delete"&gt;&amp;#xE872;&lt;/i&gt;&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; @endforeach </code></pre> <p>And bellow is shown code which show my modal "Edit" form. But the major problem here it is allways showing me the same one no matter which row i pick</p> <pre><code> &lt;div id="editEmployeeModal" class="modal fade"&gt; &lt;div class="modal-dialog"&gt; &lt;div class="modal-content"&gt; &lt;form action="{{ route('products.update',$product-&gt;id) }}" method="POST"&gt; @csrf @method('PUT') &lt;div class="modal-header"&gt; &lt;h4 class="modal-title"&gt;Edit Product&lt;/h4&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;div class="form-group"&gt; &lt;label&gt;Product number&lt;/label&gt; &lt;input type="text" value="{{ $product-&gt;product_number }}" class="form-control" required&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label&gt;Name&lt;/label&gt; &lt;input type="text" value="{{ $product-&gt;name }}" class="form-control" required&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label&gt;Detail&lt;/label&gt; &lt;textarea class="form-control" required&gt;{{ $product-&gt;detail }}&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel"&gt; &lt;input type="submit" class="btn btn-info" value="Save"&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>On the original code: Edit layout was going like this</p> <pre><code>&lt;a class="btn btn-primary" href="{{ route('products.edit',$product-&gt;id) }}"&gt;Edit&lt;/a&gt; </code></pre> </div>

使用jQuery Editable Select不能编辑输入,这是为什么

![图片说明](https://img-ask.csdn.net/upload/201707/20/1500518708_340763.png)

如何使用AJAX在Bootstrap Modal Body中加载MS-SQL数据?

<div class="post-text" itemprop="text"> <p>I'm working on a php CRUD application. I'm done coding for the Add part of it and it's working properly. Now I'm stuck at getting the data from sql database into the edit modal to update it further</p> <p>This particular page loads titles based on the selection of type we make from a dropdown. So it displays all the titles that belong to the same type(typeId). On clicking the particular title it displays the respective data. Then it has a edit button which is associated to a modal. </p> <p>The modal is being displayed on pressing the edit button, but there's no data being fetched in it. </p> <p>Here's what I've tried:</p> <pre><code>admin.php &lt;?php $titleId = filter_input(INPUT_GET, "titleId"); $active = "admin" . $titleId; require_once './pages/header.php'; require_once './functions/queries.php'; $getAll = Queries::getAllTitle($typeId); ?&gt; &lt;div class="container"&gt; &lt;div class="panel-group" id="titleAccordion"&gt; &lt;?php for ($i = 0; $i &lt; count($getAll); $i++) { echo &lt;&lt;&lt;HTML &lt;div class="panel panel-default"&gt; &lt;div class="panel-heading"&gt;&lt;h4 class="panel-title"&gt; &lt;a data-toggle="collapse" data- parent="#titleAccordion" href="#collapseF{$i}"&gt;{$getAll[$i]['title']}&lt;/a&gt; &lt;/h4&gt; &lt;/div&gt; &lt;div id="collapseF{$i}" class="panel-collapse collapse"&gt; &lt;div class="panel-body"&gt; &lt;div class="table-responsive"&gt; &lt;table class="table table-condensed"&gt;&lt;tbody&gt; &lt;tr&gt;&lt;td&gt;Title:&lt;/td&gt;&lt;td&gt;{$getAll[$i]['title']} &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Units:&lt;/td&gt;&lt;td&gt;{$getAll[$i]['units']} &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Category:&lt;/td&gt;&lt;td&gt;{$getAll[$i] ['category']}&lt;/td&gt;&lt;/tr&gt; &lt;tbody&gt;&lt;/table&gt; &lt;/div&gt; &lt;button type="button" class="btn btn-warning btn- sm" data-toggle="modal" data-target="#titleEditModal" onclick="editTitleModal('{$getAll[$i]['titleId']}')"&gt;&lt;span class="glyphicon glyphicon-edit" aria-hidden="true"&gt;&lt;/span&gt; Edit Title&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; HTML; } ?&gt; </code></pre> <p> </p> <pre><code> &lt;!-- Title Add Modal--&gt; &lt;div class="modal fade" id="facultyAddModal" role="dialog"&gt; &lt;div class="modal-dialog"&gt; &lt;div class="modal-content"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data- dismiss="modal"&gt;&amp;times;&lt;/button&gt; &lt;h4 class="modal-title"&gt;Add Title&lt;/h4&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;div id="adminResult" class="hide" role="alert"&gt; &lt;button type="button" class="close" data-dismiss="alert" aria- label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt; &lt;div id="resultAdminContent"&gt;&lt;/div&gt; &lt;/div&gt; &lt;form class="cmxform" id="adminForm"&gt; &lt;label for="Activity"&gt;ActivityAttended (required)&lt;/label&gt; &lt;input class="form-control" id="adminTitle" name="title" type="text" required&gt; &lt;br&gt; &lt;label for="units"&gt;Units (required)&lt;/label&gt; &lt;input class="form-control" id="adminUnits" type="number" name="units" required&gt; &lt;br&gt; &lt;label for="Category"&gt;Category (Optional)&lt;/label&gt; &lt;input class="form-control" id="adminCategory" type="text" name="category"&gt; &lt;br&gt; &lt;?php echo '&lt;input type="hidden" id="addadminTypeId" value="'.$typeId.'"&gt;'; ?&gt; &lt;button class="btn btn-info btn-primary" type="submit"&gt;Submit&lt;/button&gt; &lt;br&gt; &lt;br&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; main.js function editTitleModalSubmit(titleId, title, units, category, typeid) { $.ajax({ url: 'functions/administration-functions.php', type: 'POST', data: {"title": $('#editadminTitle').val(), "units": $('#editadminUnits').val(), "category": $('#editadminCategory').val(), "titleId":titleId, "typeId": $('#editTypeId').val(), "switch":"edit"}, dataType: "json", success: function (data) { $('#editadminTitle').val(data["title"]); $('#editadminUnits').val(data["units"]); $('#editadminCategory').val(data["category"]); $('#editTitleId').val(data["titleId"]); $('#editTypeId').val(data["typeId"]); }, error: function (error) { console.log(error); } }); } function titles() { $.ajax({ url: 'functions/administration-functions.php', type: 'POST', data: {"switch": "getAll"}, dataType: "json", success: function (data) { $('#titleAccordion').empty(); $.each(data, function (i) { $('#titleAccordion').append('\ &lt;div class="panel panel-default"&gt; \ &lt;div class="panel-heading"&gt;&lt;h4 class="panel-title"&gt; \ &lt;a data-toggle="collapse" data- parent="#titleAccordion" href="#collapseF' + i + '"&gt;' + data[i] ["title"] + ' ' + data[i]["units"] + ' (' + data[i]["category"] + ') &lt;/a&gt;&lt;/h4&gt; \ &lt;/div&gt; \ &lt;div id="collapseF' + i + '" class="panel-collapse collapse"&gt; \ &lt;div class="panel-body"&gt; \ &lt;div class="table-responsive"&gt; \ &lt;table class="table table-condensed"&gt; &lt;tbody&gt; \ &lt;tr&gt;&lt;td&gt;Title:&lt;/td&gt;&lt;td&gt;' + data[i] ["title"] + '&lt;/td&gt;&lt;/tr&gt; \ &lt;tr&gt;&lt;td&gt;Units:&lt;/td&gt;&lt;td&gt;' + data[i] ["units"] + '&lt;/td&gt;&lt;/tr&gt; \ &lt;tr&gt;&lt;td&gt;Category:&lt;/td&gt;&lt;td&gt;' + data[i] ["category"] + '&lt;/td&gt;&lt;/tr&gt; \ &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt; \ &lt;tbody&gt;&lt;/table&gt; \ &lt;/div&gt; \ &lt;button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#facultyEditModal" onclick="editTitleModal(\'' + data[i]["titleId"] + '\')"&gt;Edit Title&lt;/button&gt; \ &lt;/div&gt; \ &lt;/div&gt; \ &lt;/div&gt;'); }); $('#titleAccordion').change(); }, error: function (error) { console.log("Socrates Error - faculty.js 105: " + error); } }); } administration-functons &lt;?php require_once './queries.php'; $title = filter_input(INPUT_POST, "title"); $units = filter_input(INPUT_POST, "units"); $category = filter_input(INPUT_POST, "category"); $typeId = filter_input(INPUT_POST, "typeId"); $titleId = filter_input(INPUT_POST, "titleId"); $switch = filter_input(INPUT_POST, "switch"); switch ($switch) { case 'add'; echo Queries::addTitle($title, $units, $category, $typeId); break; case 'get'; echo Queries::getdata($titleId); break; case 'getAll'; echo Queries::getAllTitle($typeId); break; case 'edit': echo Queries::editTitle($title, $units, $category, $typeId, $titleId); break; } ?&gt; </code></pre> <p>The above code isn't fetching the data in the modal. However I could see the data of the first title for every title I select in the console. </p> <p>I'm expecting the respective data to be fetched on selecting the edit button to be made changes further.</p> </div>

如何在codeigniter的锚码内使用bootstrap确认框

<div class="post-text" itemprop="text"> <p>I don't know how to embed bootstrap confirm delete code inside anchor code of CodeIgniter.</p> <pre><code>foreach($books as $row) { //Add each result row into table $this-&gt;table-&gt;add_row( $row['fname'], $row['email'], $row['pass'], $row['image'], anchor('welcome/remove_rcrd/'.$row['id'], 'delete'), anchor('welcome/edit/'.$row['id'], 'Edit')); } </code></pre> <p>I want to add bootstrap confirmation box when I click delete anchor or link</p> </div>

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

String s = new String(" a ") 到底产生几个对象?

老生常谈的一个梗,到2020了还在争论,你们一天天的,哎哎哎,我不是针对你一个,我是说在座的各位都是人才! 上图红色的这3个箭头,对于通过new产生一个字符串(”宜春”)时,会先去常量池中查找是否已经有了”宜春”对象,如果没有则在常量池中创建一个此字符串对象,然后堆中再创建一个常量池中此”宜春”对象的拷贝对象。 也就是说准确答案是产生了一个或两个对象,如果常量池中原来没有 ”宜春” ,就是两个。...

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

Linux面试题(2020最新版)

文章目录Linux 概述什么是LinuxUnix和Linux有什么区别?什么是 Linux 内核?Linux的基本组件是什么?Linux 的体系结构BASH和DOS之间的基本区别是什么?Linux 开机启动过程?Linux系统缺省的运行级别?Linux 使用的进程间通信方式?Linux 有哪些系统日志文件?Linux系统安装多个桌面环境有帮助吗?什么是交换空间?什么是root帐户什么是LILO?什...

将一个接口响应时间从2s优化到 200ms以内的一个案例

一、背景 在开发联调阶段发现一个接口的响应时间特别长,经常超时,囧… 本文讲讲是如何定位到性能瓶颈以及修改的思路,将该接口从 2 s 左右优化到 200ms 以内 。 二、步骤 2.1 定位 定位性能瓶颈有两个思路,一个是通过工具去监控,一个是通过经验去猜想。 2.1.1 工具监控 就工具而言,推荐使用 arthas ,用到的是 trace 命令 具体安装步骤很简单,大家自行研究。 我的使用步骤是...

学历低,无法胜任工作,大佬告诉你应该怎么做

微信上收到一位读者小涛的留言,大致的意思是自己只有高中学历,经过培训后找到了一份工作,但很难胜任,考虑要不要辞职找一份他能力可以胜任的实习工作。下面是他留言的一部分内容: 二哥,我是 2016 年高中毕业的,考上了大学但没去成,主要是因为当时家里经济条件不太允许。 打工了三年后想学一门技术,就去培训了。培训的学校比较垃圾,现在非常后悔没去正规一点的机构培训。 去年 11 月份来北京找到了一份工...

JVM内存结构和Java内存模型别再傻傻分不清了

JVM内存结构和Java内存模型都是面试的热点问题,名字看感觉都差不多,网上有些博客也都把这两个概念混着用,实际上他们之间差别还是挺大的。 通俗点说,JVM内存结构是与JVM的内部存储结构相关,而Java内存模型是与多线程编程相关,本文针对这两个总是被混用的概念展开讲解。 JVM内存结构 JVM构成 说到JVM内存结构,就不会只是说内存结构的5个分区,而是会延展到整个JVM相关的问题,所以先了解下

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

Google 与微软的浏览器之争

浏览器再现“神仙打架”。整理 | 屠敏头图 | CSDN 下载自东方 IC出品 | CSDN(ID:CSDNnews)从 IE 到 Chrome,再从 Chrome 到 Edge,微软与...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

搜狗输入法也在挑战国人的智商!

故事总是一个接着一个到来...上周写完《鲁大师已经彻底沦为一款垃圾流氓软件!》这篇文章之后,鲁大师的市场工作人员就找到了我,希望把这篇文章删除掉。经过一番沟通我先把这篇文章从公号中删除了...

85后蒋凡:28岁实现财务自由、34岁成为阿里万亿电商帝国双掌门,他的人生底层逻辑是什么?...

蒋凡是何许人也? 2017年12月27日,在入职4年时间里,蒋凡开挂般坐上了淘宝总裁位置。 为此,时任阿里CEO张勇在任命书中力赞: 蒋凡加入阿里,始终保持创业者的冲劲,有敏锐的...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

什么时候跳槽,为什么离职,你想好了么?

都是出来打工的,多为自己着想

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

终于懂了TCP和UDP协议区别

终于懂了TCP和UDP协议区别

立即提问
相关内容推荐