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 table-bordered属性,原先正常的,我就在表格中加了几个居中属性。边框打印出来很淡很淡

如题,原先边框挺正常的,我仅仅改了几个单元格的居中属性。表格打印出来边框就很淡很淡,但查看是正常的,打印预览开始就很淡。这是什么鬼?我ie和chrom都试了,都是很淡。

关于bootstrap table插件的checkbox问题

有朋友用bootstrap table插件做过这样的吗![图片说明](https://img-ask.csdn.net/upload/201707/09/1499608847_591490.png) 左边可选,右边显示ID并且是在同一列中。最终效果

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

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

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

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

使用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 初始化中 在columns中能不能对返回的数据进行截取字符串

在bootstrap table 初始化中 在columns中能不能对返回的数据进行截取字符串? 能不能用foreach循环啊

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

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

想问大佬,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 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 表格添加一行表格

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

table 中的下拉框被遮挡

![图片说明](https://img-ask.csdn.net/upload/201812/11/1544522063_808990.png) 如图,代码结构 table外面有个div ,提供横向的滚动条。 table中有下拉框 被遮挡 ![图片说明](https://img-ask.csdn.net/upload/201812/11/1544522223_945236.png) 怎么处理啊 ? 去掉那个overflow就没有遮挡了,可是table列数多 有必须有滚动条

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

以bootstrap模式形式显示数据库中的数据(PHP MySQL)

<div class="post-text" itemprop="text"> <p>I am new to both bootstrap and php. I have created a registration modal form to register users for my site and it registers perfectly. However, I would like to retrieve a users details from my database based on their User ID and display their details in a registration form for them to edit and update. What I don't know how to do is display the records in the form fields... Please help by providing a simple syntax for this.</p> <p>I am using PHP and MySql</p> <p><strong>This is my modal form</strong></p> <pre><code>&lt;div class="modal fade" id="updatelecModal" tabindex="-1" role="dialog" aria-labelledby="updatelecModalLabel" aria-hidden="true"&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" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;!--End of modal--&gt; &lt;!-- Start of form--&gt; &lt;form id="updatelecForm" class="form-horizontal" role="form" method="post" action="#" nonvalidate&gt; &lt;div class="form-group"&gt; &lt;label for="student_id" class="col-sm-3 control-label"&gt;Lecturer ID&lt;/label&gt; &lt;div class="col-lg-9"&gt; &lt;input type="text" class="form-control" name="lec_id" required placeholder="Enter User ID"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-3 control-label"&gt;Full name&lt;/label&gt; &lt;div class="col-lg-4"&gt; &lt;input type="text" class="form-control" name="firstName" required placeholder="First name" /&gt; &lt;/div&gt; &lt;div class="col-lg-4"&gt; &lt;input type="text" class="form-control" name="lastName" required placeholder="Last name" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="email" class="col-sm-3 control-label"&gt;Email&lt;/label&gt; &lt;div class="col-lg-9"&gt; &lt;input type="email" class="form-control" name="lec_email" required placeholder="####@##.com"&gt; &lt;/div&gt; &lt;/div&gt; &lt;label class="col-xs-3 control-label" name="lec_gender"&gt;Gender:&lt;/label&gt; &lt;label class="radio-inline control-label"&gt; &lt;input type="radio" name="optionsRadio" id="gender" value="Male"&gt;Male &lt;/label&gt; &lt;label class="radio-inline control-label"&gt; &lt;input type="radio" name="optionsRadio" id="gender" value="Female"&gt;Female &lt;/label&gt; &lt;div class="form-group"&gt; &lt;label for="password" class="col-sm-3 control-label"&gt;Password&lt;/label&gt; &lt;div class="col-sm-7"&gt; &lt;input type="password" id="password" class="form-control" name="password" required placeholder ="Enter your Password"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="password" class="col-sm-3 control-label"&gt;Confirm Password&lt;/label&gt; &lt;div class="col-sm-7"&gt; &lt;input type="password" id="password2" class="form-control" name="cpassword" data-validate-linked="password" required placeholder ="Re-enter your Password"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button type="submit" class="btn btn-primary"&gt;Register&lt;/button&gt; &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt; &lt;button type="reset" class="btn btn-default"&gt;Reset&lt;/button&gt; &lt;/div&gt; &lt;/form&gt; &lt;!--End of registration form--&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>I dont know how to include the php in this form as it disappears</strong> Also if you could include links for further reading on php I would really appreciate.</p> </div>

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

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

人工智能-计算机视觉实战之路(必备算法+深度学习+项目实战)

系列课程主要分为3大阶段:(1)首先掌握计算机视觉必备算法原理,结合Opencv进行学习与练手,通过实际视项目进行案例应用展示。(2)进军当下最火的深度学习进行视觉任务实战,掌握深度学习中必备算法原理与网络模型架构。(3)结合经典深度学习框架与实战项目进行实战,基于真实数据集展开业务分析与建模实战。整体风格通俗易懂,项目驱动学习与就业面试。 建议同学们按照下列顺序来进行学习:1.Python入门视频课程 2.Opencv计算机视觉实战(Python版) 3.深度学习框架-PyTorch实战/人工智能框架实战精讲:Keras项目 4.Python-深度学习-物体检测实战 5.后续实战课程按照自己喜好选择就可以

linux2.6.1内核源码注释

包含LINUX内核同步、信号、内存、调度、文件系统、网络系统、时钟等部分的源码注释。前后历时三年,算是干货。

Python可以这样学(第四季:数据分析与科学计算可视化)

董付国老师系列教材《Python程序设计(第2版)》(ISBN:9787302436515)、《Python可以这样学》(ISBN:9787302456469)配套视频,在教材基础上又增加了大量内容,通过实例讲解numpy、scipy、pandas、statistics、matplotlib等标准库和扩展库用法。

u-boot-2015.07.tar.bz2

uboot-2015-07最新代码,喜欢的朋友请拿去

Vue.js 2.0之全家桶系列视频课程

基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

MySQL 8.0.19安装教程(windows 64位)

话不多说直接开干 目录 1-先去官网下载点击的MySQL的下载​ 2-配置初始化的my.ini文件的文件 3-初始化MySQL 4-安装MySQL服务 + 启动MySQL 服务 5-连接MySQL + 修改密码 先去官网下载点击的MySQL的下载 下载完成后解压 解压完是这个样子 配置初始化的my.ini文件的文件 ...

零基础学C#编程—C#从小白到大咖

本课程从初学者角度出发,提供了C#从入门到成为程序开发高手所需要掌握的各方面知识和技术。 【课程特点】 1 由浅入深,编排合理; 2 视频讲解,精彩详尽; 3 丰富实例,轻松易学; 4 每章总结配有难点解析文档。 15大章节,228课时,1756分钟与你一同进步!

微信公众平台开发入门

本套课程的设计完全是为初学者量身打造,课程内容由浅入深,课程讲解通俗易懂,代码实现简洁清晰。通过本课程的学习,学员能够入门微信公众平台开发,能够胜任企业级的订阅号、服务号、企业号的应用开发工作。 通过本课程的学习,学员能够对微信公众平台有一个清晰的、系统性的认识。例如,公众号是什么,它有什么特点,它能做什么,怎么开发公众号。 其次,通过本课程的学习,学员能够掌握微信公众平台开发的方法、技术和应用实现。例如,开发者文档怎么看,开发环境怎么搭建,基本的消息交互如何实现,常用的方法技巧有哪些,真实应用怎么开发。

java jdk 8 帮助文档 中文 文档 chm 谷歌翻译

JDK1.8 API 中文谷歌翻译版 java帮助文档 JDK API java 帮助文档 谷歌翻译 JDK1.8 API 中文 谷歌翻译版 java帮助文档 Java最新帮助文档 本帮助文档是使用谷

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

编程实现学生基本信息管理程序

编程实现学生基本信息管理程序。学生基本信息包括:学号、姓名、性别、年龄、班级、学院、专业等。具体实现的管理功能如下: (1) 输入并显示多个学生的基本信息; (2) 可根据需要实现学生信息的添加; (

机器学习实战系列套餐(必备基础+经典算法+案例实战)

机器学习实战系列套餐以实战为出发点,帮助同学们快速掌握机器学习领域必备经典算法原理并结合Python工具包进行实战应用。建议学习顺序:1.Python必备工具包:掌握实战工具 2.机器学习算法与实战应用:数学原理与应用方法都是必备技能 3.数据挖掘实战:通过真实数据集进行项目实战。按照下列课程顺序学习即可! 课程风格通俗易懂,用最接地气的方式带领大家轻松进军机器学习!提供所有课程代码,PPT与实战数据,有任何问题欢迎随时与我讨论。

YOLOv3目标检测实战:训练自己的数据集

YOLOv3是一种基于深度学习的端到端实时目标检测方法,以速度快见长。本课程将手把手地教大家使用labelImg标注和使用YOLOv3训练自己的数据集。课程分为三个小项目:足球目标检测(单目标检测)、梅西目标检测(单目标检测)、足球和梅西同时目标检测(两目标检测)。 本课程的YOLOv3使用Darknet,在Ubuntu系统上做项目演示。包括:安装Darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 Darknet是使用C语言实现的轻型开源深度学习框架,依赖少,可移植性好,值得深入探究。 除本课程《YOLOv3目标检测实战:训练自己的数据集》外,本人推出了有关YOLOv3目标检测的系列课程,请持续关注该系列的其它课程视频,包括: 《YOLOv3目标检测实战:交通标志识别》 《YOLOv3目标检测:原理与源码解析》 《YOLOv3目标检测:网络模型改进方法》 敬请关注并选择学习!

Python+OpenCV计算机视觉

Python+OpenCV计算机视觉系统全面的介绍。

土豆浏览器

土豆浏览器可以用来看各种搞笑、电影、电视剧视频

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

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

玩转Linux:常用命令实例指南

人工智能、物联网、大数据时代,Linux正有着一统天下的趋势,几乎每个程序员岗位,都要求掌握Linux。本课程零基础也能轻松入门。 本课程以简洁易懂的语言手把手教你系统掌握日常所需的Linux知识,每个知识点都会配合案例实战让你融汇贯通。课程通俗易懂,简洁流畅,适合0基础以及对Linux掌握不熟练的人学习; 【限时福利】 1)购课后按提示添加小助手,进答疑群,还可获得价值300元的编程大礼包! 2)本月购买此套餐加入老师答疑交流群,可参加老师的免费分享活动,学习最新技术项目经验。 --------------------------------------------------------------- 29元=掌握Linux必修知识+社群答疑+讲师社群分享会+700元编程礼包。 &nbsp;

基于STM32的电子时钟设计

时钟功能 还有闹钟功能,温湿度功能,整点报时功能 你值得拥有

Python数据清洗实战入门

本次课程主要以真实的电商数据为基础,通过Python详细的介绍了数据分析中的数据清洗阶段各种技巧和方法。

Git 实用技巧

这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。

计算机组成原理算法实现

计算机组成原理算法实现,能够实现定点小数的机器数表示、定点小数的变形补码加减运算、定点小数的原码一位乘法运算和浮点数的加减运算。

为linux系统设计一个简单的二级文件系统

实验目的: 通过一个简单多用户文件系统的设计,加深理解文件系统的内部功能及内部实现。 实验要求: 为linux系统设计一个简单的二级文件系统。要求做到以下几点: (1)可以实现下列几条命令(至少4条)

几率大的Redis面试题(含答案)

本文的面试题如下: Redis 持久化机制 缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题 热点数据和冷数据是什么 Memcache与Redis的区别都有哪些? 单线程的redis为什么这么快 redis的数据类型,以及每种数据类型的使用场景,Redis 内部结构 redis的过期策略以及内存淘汰机制【~】 Redis 为什么是单线程的,优点 如何解决redis的并发竞争key问题 Red...

机器学习初学者必会的案例精讲

通过六个实际的编码项目,带领同学入门人工智能。这些项目涉及机器学习(回归,分类,聚类),深度学习(神经网络),底层数学算法,Weka数据挖掘,利用Git开源项目实战等。

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

本课程适合CCNA或HCNA网络小白同志,高手请绕道,可以直接学习进价课程。通过本预科课程的学习,为学习网络工程师、思科CCNA、华为HCNA这些认证打下坚实的基础! 重要!思科认证2020年2月24日起,已启用新版认证和考试,包括题库都会更新,由于疫情原因,请关注官网和本地考点信息。题库网络上很容易下载到。

2019全国大学生数学建模竞赛C题原版优秀论文

2019全国大学生数学建模竞赛C题原版优秀论文,PDF原版论文,不是图片合成的,是可编辑的文字版。共三篇。 C044.pdf C137.pdf C308.pdf

土豆SDK(Java版)-非官方

由于土豆SDK一直建设中,最近几天抽空写了一套java的SDK。包含了现有的所有请求协议。本套SDK中仅提供了oAuth的方式(引用oAuth.net的java版示例),并没有在框架中实现,涉及到登录

Android小项目——新闻APP(源码)

Android小项目——新闻APP(源码),一个很简单的可以练手的Android Demo Ps:下载之前可以先看一下这篇文章——https://blog.csdn.net/qq_34149526/a

实用主义学Python(小白也容易上手的Python实用案例)

原价169,限时立减100元! 系统掌握Python核心语法16点,轻松应对工作中80%以上的Python使用场景! 69元=72讲+源码+社群答疑+讲师社群分享会&nbsp; 【哪些人适合学习这门课程?】 1)大学生,平时只学习了Python理论,并未接触Python实战问题; 2)对Python实用技能掌握薄弱的人,自动化、爬虫、数据分析能让你快速提高工作效率; 3)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; 4)想修炼更好的编程内功,优秀的工程师肯定不能只会一门语言,Python语言功能强大、使用高效、简单易学。 【超实用技能】 从零开始 自动生成工作周报 职场升级 豆瓣电影数据爬取 实用案例 奥运冠军数据分析 自动化办公:通过Python自动化分析Excel数据并自动操作Word文档,最终获得一份基于Excel表格的数据分析报告。 豆瓣电影爬虫:通过Python自动爬取豆瓣电影信息并将电影图片保存到本地。 奥运会数据分析实战 简介:通过Python分析120年间奥运会的数据,从不同角度入手分析,从而得出一些有趣的结论。 【超人气老师】 二两 中国人工智能协会高级会员 生成对抗神经网络研究者 《深入浅出生成对抗网络:原理剖析与TensorFlow实现》一书作者 阿里云大学云学院导师 前大型游戏公司后端工程师 【超丰富实用案例】 0)图片背景去除案例 1)自动生成工作周报案例 2)豆瓣电影数据爬取案例 3)奥运会数据分析案例 4)自动处理邮件案例 5)github信息爬取/更新提醒案例 6)B站百大UP信息爬取与分析案例 7)构建自己的论文网站案例

相关热词 c#怎么获得线程名 c# usb 采集器 c# sort() c#面对对象的三大特性 c# 打印 等比缩放 c#弹出右键菜单 c# 系统托盘图标 c# 键值对 键可以重复 c# 鼠标移上去提示 c#结构体定义
立即提问