JS组件系列——Bootstrap Table 表格行拖拽

JS组件系列——Bootstrap Table 表格行拖拽
原文:JS组件系列——Bootstrap Table 表格行拖拽

前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了。这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~

一、业务需求及实现效果

项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行。除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态。可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧。

1、先看看拖动之前的效果

2、这是拖动左边表格行数据的效果

3、拖动一行完成之后表格数据的效果

4、第二次、第三次拖动完成后效果

5、右边表格上面撤销操作点击效果

6、多次点击撤销,表格回到初始状态

二、代码示例

初初接到需求,博主的第一感觉是应该上Bootstrap table api里面找一下,毕竟开源的力量是强大的,或许有相关的示例呢。经过一番查找,很可惜,Bootstrap Table没有这种两张表格之间的操作。想想其实也可以理解,Bootstrap Table是针对某个动态表格数据绑定的,它的侧重点是表格内部的功能,比如表格内部行的拖拽排序(Reorder Rows)有很好的解决方案,对于像博主这样的特殊需求,似乎也应该自己去实现。

1、需求分析

既然决定自己去写,博主开始分析需求,似乎这个操作里面比较困难的是拖拽效果,说到拖拽效果,原来使用JsPlumb的时候那使用太多了,于是就想到了我们神奇的JQuery UI里面的draggable.js 和droppable.js。拖拽的问题解决了,那么还有一个难点,就是撤销操作怎么办?我们知道Ctrl+z的意思是还原,什么叫还原?就是返回到上一步的操作,那么前提是要能够保存上一步的状态,说到保存某一步的状态,博主就知道怎么做了,需要一个全局变量Json,里面要有三个键值对,分别是当前步骤的索引、左边表格的数据、右边表格的数据。似乎也不太难嘛,博主就此着手,开干。

2、代码示例

 2.1 cshtml页面代码

<html>
<head><meta name="viewport" content="width=device-width" /><title>@ViewBag.Title</title>@Styles.Render("~/Content/css")@Styles.Render("~/Content/table-css")@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/knockout")@Scripts.Render("~/bundles/bootstrap")@Scripts.Render("~/bundles/bootstrap-table")@RenderSection("Scripts", false)
</head>
<body>@RenderBody()
</body>
</html>
母版_layout.cshtml
@{ViewBag.Title = "订单插单";Layout = "~/Views/Shared/_Layout.cshtml";
}@Scripts.Render("~/bundles/Order/InsertOrder")
@Styles.Render("~/bundles/Order/css")
@Scripts.Render("~/Content/bootstrap/datepicker/js")
@Styles.Render("~/Content/bootstrap/datepicker/css")<script src="~/Content/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script><div class="panel-body" style="padding-bottom:0px;"><div class="panel panel-default" style="margin-bottom:0px;"><div class="panel-heading">查询条件</div><div class="panel-body container-fluid"><div class="row"><div class="col-md-3"><label for="txt_search_ordernumber" class="col-sm-4 control-label" style="margin-top:6px;">订单号</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_ordernumber"></span></div><div class="col-md-3"><label for="txt_search_bodynumber" class="col-sm-3 control-label" style="margin-top:6px;">车身号</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_bodynumber"></span></div><div class="col-md-3"><label for="txt_search_vinnumber" class="col-sm-4 control-label" style="margin-top:6px;">VIN码</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_vinnumber"></span></div><div class="col-md-3"><label for="txt_search_engin_code" class="col-sm-4 control-label" style="margin-top:6px;">发动机号</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_engin_code"></span></div></div><div class="collapse" id="div_more_search"><div class="row" style="margin-top:15px;"><div class="col-md-3"><label for="txt_search_import_startdate" class="col-sm-4 control-label" style="margin-top:6px;">导入时间</label><span class="col-sm-8"><input type="text" class="form-control datetimepicker" readonly id="txt_search_import_startdate"></span></div><div class="col-md-3"><label for="txt_search_import_enddate" class="col-sm-3 control-label" style="margin-top:6px;"></label><span class="col-sm-8"><input type="text" class="form-control datetimepicker" readonly id="txt_search_import_enddate"></span></div><div class="col-md-3"><label for="txt_search_send_startdate" class="col-sm-4 control-label" style="margin-top:6px;">下发时间</label><span class="col-sm-8"><input type="text" class="form-control datetimepicker" readonly id="txt_search_send_startdate"></span></div><div class="col-md-3"><label for="txt_search_send_enddate" class="col-sm-4 control-label" style="margin-top:6px;"></label><span class="col-sm-8"><input type="text" class="form-control datetimepicker" readonly id="txt_search_send_enddate"></span></div></div><div class="row" style="margin-top:15px;"><div class="col-md-3"><label for="txt_search_carcode" class="col-sm-4 control-label" style="margin-top:6px;">整车编码</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_carcode"></span></div><div class="col-md-3"><label for="txt_search_vms" class="col-sm-3 control-label" style="margin-top:6px;">VMS号</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_vms"></span></div><div class="col-md-3"><label for="txt_search_trans_code" class="col-sm-4 control-label" style="margin-top:6px;">变速箱号</label><span class="col-sm-8"><input type="text" class="form-control" id="txt_search_trans_code"></span></div></div></div><div class="row" style="float:right;margin-right:50px;margin-top:13px;"><div><button type="button" id="btn_query" class="btn btn-primary" style="margin-right:20px;width:100px;">查询</button><button type="submit" id="btn_reset" class="btn btn-default" style="margin-right:20px;width:100px;">重置</button></div></div></div></div><div class="collapse_div_outside"><div class="collapse_div_inside"></div><span id="span_collapse" href="#div_more_search" class="collapse_div_inside_ele">展开<label class="glyphicon glyphicon-menu-down"></label></span></div>
</div>@*<div id="toolbar_left" class="btn-group">
</div>*@
<div id="toolbar_right" class="btn-group"><button id="btn_cancel" type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward aria-hidden="true"></span>撤销</button><button id="btn_insertorder" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>插单</button>
</div>
<div class="panel-body" style="padding-top:0px;"><div id="div_tableleft" class="col-md-6"><table id="tb_order_left"></table></div><div id="div_tableright" class="col-md-6"><table id="tb_order_right"></table></div>
</div>
订单插单页面.cshtml

 2.2 js代码

var i_statuindex = 0;
//此数组用于保存撤销操作每一步的数据
var arrdata = [];var m_oTable = null;$(function () {//1.初始化表格m_oTable = new TableInit();m_oTable.Init();//2.初始化按钮事件var oButtonInit = new ButtonInit();oButtonInit.Init();//3.日期控件的初始化$(".datetimepicker").datetimepicker({format: 'yyyy-mm-dd hh:ii',autoclose: true,todayBtn: true,});});//表格相关事件和方法
var TableInit = function () {var oTableInit = new Object();oTableInit.Init = function () {//初始化左边表格$('#tb_order_left').bootstrapTable({url: '/api/OrderApi/get',method: 'get',striped: true,cache: false,striped: true,pagination: true,height: 600,uniqueId:"TO_ORDER_ID",queryParams: oTableInit.queryParams,queryParamsType: "limit",sidePagination: "server",pageSize: 10,pageList: [10, 25, 50, 100],search: true,strictSearch: true,showColumns: true,showRefresh: true,minimumCountColumns: 2,clickToSelect: true,columns: [{checkbox: true},{field: 'ORDER_NO',title: '订单号'},{field: 'BODY_NO',title: '车身号'}, {field: 'VIN',title: 'VIN码'}, {field: 'TM_MODEL_MATERIAL_ID',title: '整车编码'},{field: 'ORDER_TYPE',title: '订单类型'},{field: 'ORDER_STATUS',title: '订单状态'},{field: 'CREATE_DATE',title: '订单导入时间'},{field: 'PLAN_DATE',title: '订单计划上线日期'},{field: 'VMS_NO',title: 'VMS号'},{field: 'ENGIN_CODE',title: '发动机号'},{field: 'TRANS_CODE',title: '变速箱号'},{field: 'OFFLINE_DATE_ACT',title: '实际下线日期'},{field: 'HOLD_RES',title: 'hold理由'},{field: 'SPC_FLAG',title: '特殊标记'},],onLoadSuccess: function (data) {//表格加载完成之后初始化拖拽
          oTableInit.InitDrag();}});//初始化右边表格$('#tb_order_right').bootstrapTable({url: '/api/OrderApi/get',method: 'get',toolbar: '#toolbar_right',striped: true,cache: false,striped: true,pagination: true,height: 600,queryParams: oTableInit.queryParamsRight,queryParamsType: "limit",//ajaxOptions: { departmentname: "", statu: "" },sidePagination: "server",pageSize: 10,pageList: [10, 25, 50, 100],search: true,strictSearch: true,showRefresh: true,minimumCountColumns: 2,columns: [{field: 'ORDER_NO',title: '订单号'},{field: 'BODY_NO',title: '车身号'}, {field: 'VIN',title: 'VIN码'}, {field: 'TM_MODEL_MATERIAL_ID',title: '整车编码'},{field: 'ORDER_TYPE',title: '订单类型'},{field: 'ORDER_STATUS',title: '订单状态'},{field: 'CREATE_DATE',title: '订单导入时间'},{field: 'PLAN_DATE',title: '订单计划上线日期'},{field: 'VMS_NO',title: 'VMS号'},{field: 'ENGIN_CODE',title: '发动机号'},{field: 'TRANS_CODE',title: '变速箱号'},{field: 'OFFLINE_DATE_ACT',title: '实际下线日期'},{field: 'HOLD_RES',title: 'hold理由'},{field: 'SPC_FLAG',title: '特殊标记'},],onLoadSuccess: function (data) {oTableInit.InitDrop();}});};//注册表格行的draggable事件oTableInit.InitDrag = function () {$('#tb_order_left tr').draggable({helper: "clone",start: function (event, ui) {var old_left_data = JSON.stringify($('#tb_order_left').bootstrapTable("getData"));var old_right_data = JSON.stringify($('#tb_order_right').bootstrapTable("getData"));var odata = { index: ++i_statuindex, left_data: old_left_data, right_data: old_right_data };arrdata.push(odata);},stop: function (event, ui) {}});};//注册右边表格的droppable事件oTableInit.InitDrop = function () {$("#tb_order_right").droppable({drop: function (event, ui) {var arrtd = $(ui.helper[0]).find("td");var rowdata = {ORDER_NO: $(arrtd[1]).text(),BODY_NO: $(arrtd[2]).text(),VIN: $(arrtd[3]).text(),TM_MODEL_MATERIAL_ID: $(arrtd[4]).text(),ORDER_TYPE: $(arrtd[5]).text(),ORDER_STATUS: $(arrtd[6]).text(),CREATE_DATE: $(arrtd[7]).text() == "-" ? null : $(arrtd[7]).text(),PLAN_DATE: $(arrtd[8]).text() == "-" ? null : $(arrtd[8]).text(),VMS_NO: $(arrtd[9]).text(),ENGIN_CODE: $(arrtd[10]).text(),TRANS_CODE: $(arrtd[11]).text(),OFFLINE_DATE_ACT: $(arrtd[12]).text() == "-" ? null : $(arrtd[12]).text(),HOLD_RES: $(arrtd[13]).text(),SPC_FLAG: $(arrtd[14]).text(),TO_ORDER_ID: $(ui.helper[0]).attr("data-uniqueid")};var oTop = ui.helper[0].offsetTop;var iRowHeadHeight = 40;var iRowHeight = 37;var rowIndex = 0;if (oTop <= iRowHeadHeight + iRowHeight / 2) {rowIndex = 0;}else {rowIndex = Math.ceil((oTop - iRowHeadHeight) / iRowHeight);}//插入右边表格指定位置行数据$("#tb_order_right").bootstrapTable("insertRow", { index: rowIndex, row: rowdata });$('#tb_order_left').bootstrapTable("removeByUniqueId", $(ui.helper[0]).attr("data-uniqueid"));oTableInit.InitDrag();}});};oTableInit.queryParams = function (params) {  //配置参数var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的limit: params.limit,   //页面大小offset: params.offset,  //页码strBodyno: $("#txt_search_bodynumber").val(),strVin: $("#txt_search_vinnumber").val(),strOrderno: $("#txt_search_ordernumber").val(),strEngincode: $("#txt_search_engin_code").val(),strOrderstatus: 0,strTranscode: $("#txt_search_trans_code").val(),strVms: $("#txt_search_vms").val(),strCarcode: $("#txt_search_carcode").val(),strImportStartdate: $("#txt_search_import_startdate").val(),strImportEnddate: $("#txt_search_import_enddate").val(),strSendStartdate: $("#txt_search_send_startdate").val(),strSendEnddate: $("#txt_search_send_enddate").val(),};return temp;};oTableInit.queryParamsRight = function (params) {  //配置参数var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的limit: params.limit,   //页面大小offset: params.offset,  //页码strBodyno: "",strVin: "",strOrderno: "",strEngincode: "",strOrderstatus: 5,strTranscode: "",strVms: "",strCarcode: "",strImportStartdate: "",strImportEnddate: "",strSendStartdate: "",strSendEnddate: "",};return temp;};return oTableInit;
};//页面按钮初始化事件
var ButtonInit = function () {var oInit = new Object();var postdata = {};oInit.Init = function () {//查询点击事件$("#btn_query").click(function () {$("#tb_order_left").bootstrapTable('refresh');});//重置点击事件$("#btn_reset").click(function () {$(".container-fluid").find(".form-control").val("");$("#tb_order_left").bootstrapTable('refresh');});//撤销操作点击事件$("#btn_cancel").click(function () {if (i_statuindex <= 0) {return;}for (var i = 0; i < arrdata.length; i++) {if (arrdata[i].index != i_statuindex) {continue;}var arr_left_data = eval(arrdata[i].left_data);var arr_right_data = eval(arrdata[i].right_data);$('#tb_order_left').bootstrapTable('removeAll');$('#tb_order_right').bootstrapTable('removeAll');$('#tb_order_left').bootstrapTable('append', arr_left_data);for (var x = 0; x < arr_right_data.length; x++) {$("#tb_order_right").bootstrapTable("insertRow", { index: x, row: arr_right_data[x] });}//$('#tb_order_right').bootstrapTable('append', arr_right_data);//append之后不能dropbreak;}i_statuindex--;//重新注册可拖拽
            m_oTable.InitDrag();//m_oTable.InitDrop();
        });//搜索栏展开收起点击事件$("#span_collapse").click(function () {if ($(this).text() == "收起") {$(this).html('展开<label class="glyphicon glyphicon-menu-down"></label>');$("#div_more_search").collapse('hide');}else {$(this).html('收起<label class="glyphicon glyphicon-menu-up"></label>');$("#div_more_search").collapse('show')}});};return oInit;
};
全部JS代码

 我们重点来看几个地方的代码:

2.2.1  左边表格加载成功之后执行表格行的可拖拽。

$('#tb_order_left tr').draggable({helper: "clone",start: function (event, ui) {var old_left_data = JSON.stringify($('#tb_order_left').bootstrapTable("getData"));var old_right_data = JSON.stringify($('#tb_order_right').bootstrapTable("getData"));var odata = { index: ++i_statuindex, left_data: old_left_data, right_data: old_right_data };arrdata.push(odata);},stop: function (event, ui) {
            }});

在draggable的start事件中,我们将拖拽之前的左右表格中的数据全部保存到arrdata变量中,i_statuindex这个全局变量用于记录当前这一步的索引,用于撤销操作。

 

2.2.2 右边表格在加载成功之后注册表格的droppable事件

    $("#tb_order_right").droppable({drop: function (event, ui) {var arrtd = $(ui.helper[0]).find("td");var rowdata = {ORDER_NO: $(arrtd[1]).text(),BODY_NO: $(arrtd[2]).text(),VIN: $(arrtd[3]).text(),TM_MODEL_MATERIAL_ID: $(arrtd[4]).text(),ORDER_TYPE: $(arrtd[5]).text(),ORDER_STATUS: $(arrtd[6]).text(),CREATE_DATE: $(arrtd[7]).text() == "-" ? null : $(arrtd[7]).text(),PLAN_DATE: $(arrtd[8]).text() == "-" ? null : $(arrtd[8]).text(),VMS_NO: $(arrtd[9]).text(),ENGIN_CODE: $(arrtd[10]).text(),TRANS_CODE: $(arrtd[11]).text(),OFFLINE_DATE_ACT: $(arrtd[12]).text() == "-" ? null : $(arrtd[12]).text(),HOLD_RES: $(arrtd[13]).text(),SPC_FLAG: $(arrtd[14]).text(),TO_ORDER_ID: $(ui.helper[0]).attr("data-uniqueid")};var oTop = ui.helper[0].offsetTop;var iRowHeadHeight = 40;var iRowHeight = 37;var rowIndex = 0;if (oTop <= iRowHeadHeight + iRowHeight / 2) {rowIndex = 0;}else {rowIndex = Math.ceil((oTop - iRowHeadHeight) / iRowHeight);}$("#tb_order_right").bootstrapTable("insertRow", { index: rowIndex, row: rowdata });$('#tb_order_left').bootstrapTable("removeByUniqueId", $(ui.helper[0]).attr("data-uniqueid"));oTableInit.InitDrag();}});

在drop事件时,取到当前拖过来的行数据,计算当前鼠标所在的位置,在右边表格指定位置插入拖过来的行数据。然后删除左边表格拖过来的行数据。

 

2.2.3 撤销操作代码

     //撤销操作点击事件$("#btn_cancel").click(function () {if (i_statuindex <= 0) {return;}for (var i = 0; i < arrdata.length; i++) {if (arrdata[i].index != i_statuindex) {continue;}var arr_left_data = eval(arrdata[i].left_data);var arr_right_data = eval(arrdata[i].right_data);$('#tb_order_left').bootstrapTable('removeAll');$('#tb_order_right').bootstrapTable('removeAll');$('#tb_order_left').bootstrapTable('append', arr_left_data);for (var x = 0; x < arr_right_data.length; x++) {$("#tb_order_right").bootstrapTable("insertRow", { index: x, row: arr_right_data[x] });}//$('#tb_order_right').bootstrapTable('append', arr_right_data);//append之后不能dropbreak;}i_statuindex--;//重写注册可拖拽
            m_oTable.InitDrag();
        });

撤销操作主要是通过全局变量arrdata里面的索引判断撤销到哪一步,然后根据索引取出当前步骤的左右表格数据,依次向两表格插入数据,然后i_statuindex依次递减,直至等于零,由于左边表格行数据全部重写加载过,所以需要重新注册可拖拽事件。就是这么简单的三步就能实现想要的效果,是不是很简单~~

 

posted on 2015-12-07 08:20 NET未来之路 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/5025049.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574138.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux install innotop

innotop是mysql监控工具 1&#xff0c;下载 weget http://nchc.dl.sourceforge.net/project/innotop/innotop/1.6.0/innotop-1.6.0.zip 2&#xff0c;安装依赖包 yum install perl-DBI perl-DBD-MySQL perl-TermReadKey perl -y 3,安装innotop perl Makefile.PL make make ins…

mysql udp服务器_netty学习:UDP服务器与Spring整合(2)

上一篇文章中&#xff0c;介绍了netty实现UDP服务器的栗子。本文将会对UDP服务器与spring boot整合起来&#xff0c;并使用RedisTemplate的操作类访问Redis和使用Spring DATA JPA链接MySQL数据库&#xff0c;其中会使用多线程、异步等知识。只公布了一个框架&#xff0c;需要的…

1-4 TCP/IP协议族

网络协议是在内核中实现的&#xff0c;socket是对tcp/ip协议的系统调用&#xff0c;提供以下两点功能&#xff1a; 1. 将应用撑血数据从用户缓冲区中复制到TCP/UDP内核发送缓冲区&#xff0c;以交付内核发送来的数据&#xff08;比如send&#xff09;&#xff0c;或者从内核TCP…

python将数据写入excel_【Python】将数据库中的数据查询出来自动写入excel文档

近期每天都要监控一个数据。第一个版本是这样的&#xff1a;每天新增一个文档来汇总这个数据。这样搞了几天之后&#xff0c;过了一个周末&#xff0c;过来突然发现数据变多了很多&#xff0c;这个时候要调整策略&#xff0c;直接一个文档汇总出要的数据就可以了。这样查了两天…

OC 继承

一、基本概念 程序的世界和人类的“对象”世界在思想上是没有设么区别的&#xff0c;富二代继承了父母&#xff0c;自然就拥有了父母拥有的所有资源&#xff0c;子类继承了父类同样就拥有了父类所有的方法和属性&#xff08;成员变量&#xff09;。 在这里动物是猫类和狗类的父…

Android 高级UI设计笔记08:Android开发者常用的7款Android UI组件(转载)

Android开发是目前最热门的移动开发技术之一&#xff0c;随着开发者的不断努力和Android社区的进步&#xff0c;Android开发技术已经日趋成熟&#xff0c;当然&#xff0c;在Android开源社区中也涌现了很多不错的开源UI项目&#xff0c;它们可以帮助Android开发者更方便快捷地完…

centos linux怎么安装mysql_CentOS-Linux系统下安装MySQL

一、mysql的安装Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器。基于RPM包管理&#xff0c;能够从指定的服务器自动下载RPM包并且安装&#xff0c;可以自动处理依赖性关系&#xff0c;并且一次安装所有依赖的软件包&…

Operating System-进程/线程内部通信-临界区(Critical Regions)

上一篇文章讲述了进程之间的竞争条件&#xff1a;多个进程同时进入一个共享区域&#xff0c;导致了数据的不一致&#xff0c;本文主要介绍如何解决这个问题。 一、临界区介绍 解决这个问题就是阻止多个进程同时进入这个共享区域&#xff0c;换句话说&#xff0c;进程之间针对这…

【html】【19】高级篇--大事件时间轴

下载:  http://sc.chinaz.com/jiaoben/131112181390.htm 其它:  http://sc.chinaz.com/tag_jiaoben/shijianzhou.html 效果:   html 代码: 1 <!DOCTYPE html>2 <html>3 <head>4 <meta http-equiv"Content-Type" content"text/html; …

必须声明标量变量_Excel VBA解读(136): 在用户定义函数中的变体、引用、数组、计算表达式、标量...

学习Excel技术&#xff0c;关注微信公众号&#xff1a;excelperfect在前面的几篇文章中&#xff0c;我们自定义的函数使用定义为Range的参数来从Excel工作表中获取数据&#xff0c;例如&#xff1a;Function VINTERPOLATEB(Lookup_Value As Variant, _Table_Array As Range, _C…

mysql内部_MySQL SQL语句内部剖析

一条SQL在MySQL体系结构内的执行流程:注意只有查询操作才会走查询缓存&#xff0c;而表的结构和数据发生改变时将会清空查询缓存。所以开启查询缓存的意义不大&#xff0c;8.0后已经废弃了该功能。一条update在存储引擎内部的执行步骤如下:SQL:update t set cc1 where id2;SQL完…

用Backbone.js创建一个联系人管理系统(四)

原文: Build a Contacts Manager Using Backbone.js: Part 4 这一系列教程的第四部分,教我们如何完成对已经存在的Contacts进行编辑和保存. 本教程是基于这一系列的前三个教程. 有不清楚的请先阅读前三部分. 开始 在Contact原模版里添加一个edit按钮. <button class"ed…

mysql默认时间怎么不同步_MYSQL 更新时间自动同步与创建时间默认值共存问题

本文作者&#xff1a;苏生米沿在使用SQL的时候&#xff0c;希望在更新数据的时候自动填充更新时间&#xff0c;那么在mysql中是如何实现的呢&#xff1f;如创建表usersCREATE TABLE RS_SIGNUPUSER (ID VARCHAR(36) COMMENT 主键(业务功能无关),USERNAME VARCHAR(50) COMMENT 姓…

python代码技巧_让你python代码更快的3个小技巧

大家好&#xff01;今天呢&#xff0c;我们来聊一聊如何加速你的 python 代码。Python 语言的优点可以列举出许多&#xff0c;语法简单易懂、模块丰富、应用广泛等等。但是世界上没有有完美的东西&#xff0c;python 一个明显缺点就是运行速度慢&#xff0c;至少跟 C 语言没法比…

从此走上一条iOS程序猿不归路。。。

新的城市&#xff0c;新的生活&#xff01;前不久刚刚结束了苦逼的面试找工作之旅&#xff0c;期间也小有收货&#xff0c;如今正处年底工作闲暇之余&#xff0c;将前一阵子陆陆续续的总结整理了一下&#xff0c;本人菜鸟程序猿一只&#xff0c;水平有限&#xff0c;本文总结的…

springboot mysql事物_在Spring Boot中使用数据库事务

关于数据库访问还有一个核心操作那就是事务的处理了&#xff0c;前面两篇博客小伙伴们已经见识到Spring Boot带给我们的巨大便利了&#xff0c;其实不用猜&#xff0c;我们也知道Spring Boot在数据库事务处理问题上也给我们带来惊喜&#xff0c;OK&#xff0c;废话不多说&#…

cinder连接mysql数据库_Openstack入门篇(十六)之Cinder服务的部署与测试

1.理解块存储服务操作系统获得存储空间的方式一般有两种&#xff1a;通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘&#xff0c;然后分区、格式化、创建文件系统&#xff1b;或者直接使用裸硬盘存储数据(数据库)通过 NFS、CIFS 等 协议&#xff0c;mount 远程的文件系统第一种…

最后关于Pipeline完整的图如下:

最后关于Pipeline完整的图如下&#xff1a; 转载于:https://www.cnblogs.com/aaa6818162/p/5077988.html

amr 转mp3 java_JAVA 音频转换AMR 转MP3,OS,Linux cent os 7

场景近期在做微信开发时&#xff0c;需要获取用户发给公众服务号的语音留言。而从微信服务端下载来的语音格式却是amr的格式&#xff0c;同样的你手机录音、Android语音等也都是生成amr格式文件。但当你想在web页面去播放此文件时&#xff0c;就困难了。因为无论是当前HTML5的标…

dragloader.js帮助你在页面原生滚动下实现Pull Request操作

dragloader.js是一个面向移动Web开发的JavaScript库&#xff0c;帮助开发者在使用页面原生滚动时&#xff0c;模拟上/下拉手势&#xff0c;实现Pull Request操作。 在移动设备上&#xff0c;一般会使用 drag down 手势实现加载最新 使用 drag up 手势实现加载更多 dragloader样…