首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS组件Bootstrap Table表格行拖拽效果实现代码

Posted in Javascript onAugust 27, 2020

一、业务需求及实现效果

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

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

JS组件Bootstrap Table表格行拖拽效果实现代码

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

JS组件Bootstrap Table表格行拖拽效果实现代码

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

JS组件Bootstrap Table表格行拖拽效果实现代码

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

JS组件Bootstrap Table表格行拖拽效果实现代码

JS组件Bootstrap Table表格行拖拽效果实现代码

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

JS组件Bootstrap Table表格行拖拽效果实现代码

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

JS组件Bootstrap Table表格行拖拽效果实现代码

二、代码示例
接到需求的第一感觉是应该上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>
 
@{
 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>

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之后不能drop
 break;
 }
 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;
};

我们重点来看几个地方的代码：
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之后不能drop
 break;
 }
 i_statuindex--;

 //重写注册可拖拽
 m_oTable.InitDrag();
 });

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

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助。

JS组件Bootstrap Table表格行拖拽效果实现代码

- Author -

懒得安分

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript alert乱码的解决方法
Nov 05 Javascript
Javascript排序算法之合并排序（归并排序）的2个例子
Apr 04 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 #Javascript
AngularJS Module方法详解
Dec 08 #Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 #Javascript
JS与jQ读取xml文件的方法
Dec 08 #Javascript
js实现select下拉框菜单
Dec 08 #Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 #Javascript
JavaScript的代码编写格式规范指南
Dec 07 #Javascript
Anaconda(2) 间隙锁(2) ctypes(1) 经纬度(1) html标准库(1) innoDB(3) C/C++(1) dll(1) 历史记录(1) python-pcl(1)
You might like
咖啡豆的最常见发酵处理方法，详细了解一下
2021/03/03 冲泡冲煮
中英文字符串翻转函数
2008/12/09 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
CI框架学习笔记（二） -入口文件index.php
2014/10/27 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
百度地图给map添加右键菜单（判断是否为marker）
2016/03/04 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）
2020/10/15 Javascript
python3个性签名设计实现代码
2018/06/19 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
python3.6数独问题的解决
2019/01/21 Python
python3实现点餐系统
2019/01/24 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
dpn网络的pytorch实现方式
2020/01/14 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
乌克兰在线药房：Аптека24
2019/10/30 全球购物
乡下人家教学反思
2014/02/01 职场文书
三八活动策划方案
2014/08/17 职场文书
给校长的建议书范文
2015/09/14 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
jquery插件实现代码雨特效
2021/04/24 jQuery
Pandas搭配lambda组合使用详解
2022/01/22 Python