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行内编辑为弹出框模式,每行根据首列的值自动填充其余列的值 求大神解答 刚接触 不懂

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 数据传递成功,就是不显示数据

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(''); }

使用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>

bootstrap table用getData获取一个可编辑栏位数据,第一次获取出来的数据是对的,但栏位里的数据更改后再进行获取,获取到的依然是第一次的值。这是为何?怎么解?

bootstrap table用getData获取一个可编辑栏位数据,第一次获取出来的数据是对的,但栏位里的数据更改后再进行获取,获取到的依然是第一次的值。这是为何?怎么解?

BootstrapTable 怎样动态修改列属性?

自己做一个自定义列表搜索(下拉列表和自带搜索结合),A列属性上只需要这是data-serachable=true 就可指定列A搜索。当下拉列表选择B值对应的值时,修改A列对应data-serachable=false且B列对应data-serachable=true

bootstrapTable获取选中行时间数据

![这是我的测试代码](https://img-ask.csdn.net/upload/201706/30/1498809120_362457.png) ![测试代码](https://img-ask.csdn.net/upload/201706/30/1498809476_398526.png) ![问题](https://img-ask.csdn.net/upload/201706/30/1498809493_213861.png) 问题是我测试的时候,如果先选择结束时间再选择开始时间就可以正常的弹出时间。 如果先选择开始时间再选结束时间的话就会出现图3那个问题。 麻烦大神帮忙看一下。感谢

在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>

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" }, 这两个要怎么动态关联,请大神解答

想问大佬,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 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 获取不到行

``` <!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>

特定行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>

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>

从DateTimePicker Bootstrap获取值

<div class="post-text" itemprop="text"> <p>How do i get the value of a calender from my ajax and send it to a php script. I've tried most of the other threads about this but nothing has worked. </p> <p>This is my PHP script which spawns the picker:</p> <pre><code>$output_string .="&lt;td id=\"start$count\"&gt; "; $output_string .="&lt;div class='input-group date'&gt; "; $output_string .="&lt;input type='text' class=\"form-control\" id='datetimepicker$count'&gt; "; $output_string .="&lt;span class=\"input-group-addon\"&gt; "; $output_string .="&lt;span class=\"glyphicon glyphicon-calendar\"&gt;&lt;/span&gt; "; $output_string .="&lt;/span&gt; "; $output_string .="&lt;/div&gt; "; $output_string .="&lt;/td&gt; "; </code></pre> <p>Here is the AJAX i'm using to start off another PHP script:</p> <pre><code>&lt;script type="text/javascript" language="javascript"&gt; $("#run1").click(function(){ var filename = $("#filename1").text(); var start_time = $("#datetimepicker1").datetimepicker("getDate"); $.ajax({ url: "launch.php", type:"POST", data: {"value1": filename, "value2":start_time}, dataType: "json", success: function(responce){ $("#output").html(responce); } // End of success function of ajax form }); // End of ajax call }); &lt;/script&gt; </code></pre> <p>Edit:</p> <p>I use loops to generate a table. In the table are datetimepickers. The PHP also generates the AJAX which send the value to launch.php. But for some reason the value of the datetimepicker is either nothing or "undefined".</p> <p>Full PHP script:</p> <pre><code>&lt;?php include_once "connectdb.php"; $tbquery = "select * from case_in order by created_time DESC"; $results = mysqli_query($con, $tbquery); $output_string ="&lt;table id=\"table\" class=\"table table-striped\" "; $output_string .="&lt;thead&gt; "; $output_string .="&lt;tr&gt; "; $output_string .="&lt;th&gt;File Name&lt;/th&gt; "; $output_string .="&lt;th&gt;Created&lt;/th&gt; "; $output_string .="&lt;th&gt;Start Time&lt;/th&gt; "; $output_string .="&lt;th&gt;&lt;/th&gt; "; $output_string .="&lt;/tr&gt; "; $output_string .="&lt;/thead&gt; "; $output_string .="&lt;tbody&gt; "; $output_string .="&lt;tr&gt; "; $count = 0; foreach ($results as $table) { $output_string .="&lt;tr&gt; "; $output_string .="&lt;td id=\"filename$count\"&gt;$table[file_name]&lt;/td&gt; "; $output_string .="&lt;td id=\"created$count\"&gt;$table[created_time]&lt;/td&gt; "; $output_string .="&lt;td id=\"start$count\"&gt; "; $output_string .="&lt;div class='input-group date'&gt; "; $output_string .="&lt;input type='text' class=\"form-control\" id='datetimepicker$count'&gt; "; $output_string .="&lt;span class=\"input-group-addon\"&gt; "; $output_string .="&lt;span class=\"glyphicon glyphicon-calendar\"&gt;&lt;/span&gt; "; $output_string .="&lt;/span&gt; "; $output_string .="&lt;/div&gt; "; $output_string .="&lt;/td&gt; "; $output_string .="&lt;td&gt;&lt;button type=\"button\" class=\"btn\" id=\"run$count\"&gt;Run Job&lt;/button&gt; "; $output_string .="&lt;/tr&gt; "; $count++; } $output_string .="&lt;/tr&gt; "; $output_string .="&lt;/tr&gt; "; $output_string .="&lt;/tbody&gt; "; $output_string .="&lt;/table&gt; "; $output_string .="&lt;br&gt;"; $n = 0; while ($n &lt; $count) { $output_string .="&lt;script type=\"text/javascript\" language=\"javascript\"&gt; "; $output_string .="$(\"#run$n\").click(function(){ "; $output_string .="var filename = $(\"#filename$n\").text(); "; $output_string .="var start_time = $(\"#datetimepicker$n\").val; "; $output_string .="$.ajax({ "; $output_string .="url: \"launch.php\", "; $output_string .="type:\"POST\", "; $output_string .="data: {\"value1\": filename, \"value2\":start_time}, "; $output_string .="dataType: \"json\", "; $output_string .="success: function(responce){ "; $output_string .="$(\"#output\").html(responce); "; $output_string .="} // End of success function of ajax form "; $output_string .="}); // End of ajax call "; $output_string .="}); "; $output_string .="&lt;/script&gt; "; $output_string .="&lt;script type=\"text/javascript\"&gt; "; $output_string .="$(document).ready(function() { "; $output_string .="$('#datetimepicker$n').datetimepicker({ "; $output_string .="defaultDate:new Date() "; $output_string .="}); "; $output_string .="}); "; $output_string .="&lt;/script&gt; "; $n++; } echo json_encode($output_string); ?&gt; </code></pre> </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岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

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

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

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

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

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

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

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

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

为什么本科以上学历的人只占中国人口的5%,但感觉遍地都是大学生?

中国大学生占总人口不到5% 2017年,中国整体的本科率仅有5.9%;如果算上研究生,这一比例可以进一步上升到6.5% 为什么在国家统计局推出的这份年鉴中,学历的最高一阶就是到研究生,而没有进一步再统计博士生的数量的。 原因其实并不难理解,相比全国和各省整体人口体量,博士生的占比非常之低,属于绝对意义上的小概率样本。 这一点,我们从上表中的各省研究生占比情况也可以看出端倪。除北京、天津、上海三...

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

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

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

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

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

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

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

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

程序员写出这样的代码,能不挨骂吗?

当你换槽填坑时,面对一个新的环境。能够快速熟练,上手实现业务需求是关键。但是,哪些因素会影响你快速上手呢?是原有代码写的不够好?还是注释写的不够好?昨夜...

外包程序员的幸福生活

今天给你们讲述一个外包程序员的幸福生活。男主是Z哥,不是在外包公司上班的那种,是一名自由职业者,接外包项目自己干。接下来讲的都是真人真事。 先给大家介绍一下男主,Z哥,老程序员,是我十多年前的老同事,技术大牛,当过CTO,也创过业。因为我俩都爱好喝酒、踢球,再加上住的距离不算远,所以一直也断断续续的联系着,我对Z哥的状况也有大概了解。 Z哥几年前创业失败,后来他开始干起了外包,利用自己的技术能...

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

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

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

记录下入职中软一个月(外包华为)

我在年前从上一家公司离职,没想到过年期间疫情爆发,我也被困在家里,在家呆着的日子让人很焦躁,于是我疯狂的投简历,看面试题,希望可以进大公司去看看。 我也有幸面试了我觉得还挺大的公司的(虽然不是bat之类的大厂,但是作为一名二本计算机专业刚毕业的大学生bat那些大厂我连投简历的勇气都没有),最后选择了中软,我知道这是一家外包公司,待遇各方面甚至不如我的上一家公司,但是对我而言这可是外包华为,能...

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

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

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

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

面试:第十六章:Java中级开发

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

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

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

Python爬虫,高清美图我全都要(彼岸桌面壁纸)

爬取彼岸桌面网站较为简单,用到了requests、lxml、Beautiful Soup4

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

6年开发经验女程序员,面试京东Java岗要求薪资28K

写在开头: 上周面试了一位女程序员,上午10::30来我们部门面试,2B哥接待了她.来看看她的简历: 个人简历 个人技能: ● 熟悉spring mvc 、spring、mybatis 等框架 ● 熟悉 redis 、rocketmq、dubbo、zookeeper、netty 、nginx、tomcat、mysql。 ● 阅读过juc 中的线程池、锁的源...

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

Java岗开发3年,公司临时抽查算法,离职后这几题我记一辈子

前几天我们公司做了一件蠢事,非常非常愚蠢的事情。我原以为从学校出来之后,除了找工作有测试外,不会有任何与考试有关的事儿。 但是,天有不测风云,公司技术总监、人事总监两位大佬突然降临到我们事业线,叫上我老大,给我们组织了一场别开生面的“考试”。 那是一个风和日丽的下午,我翘着二郎腿,左手端着一杯卡布奇诺,右手抓着我的罗技鼠标,滚动着轮轴,穿梭在头条热点之间。 “淡黄的长裙~蓬松的头发...

大牛都会用的IDEA调试技巧!!!

导读 前天面试了一个985高校的实习生,问了他平时用什么开发工具,他想也没想的说IDEA,于是我抛砖引玉的问了一下IDEA的调试用过吧,你说说怎么设置断点...

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

立即提问
相关内容推荐