communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > js tutoriel > Code d'implémentation de l'effet de glissement de ligne du composant JS Bootstrap Table

Code d'implémentation de l'effet de glissement de ligne du composant JS Bootstrap Table

高洛峰

Libérer： 2017-03-20 14:02:16

original

1739 Les gens l'ont consulté

1. Exigences commerciales et effets de mise en œuvre

Le projet implique le module de commande. J'ai soudainement reçu une exigence ce jour-là, disant que les commandes doivent être insérées entre deux commandes avec des statuts différents. L'effet est présenté sur la page comme suit : deux tableaux à gauche et à droite. Le tableau de gauche contient les commandes avec le statut 1 et le tableau de droite contient les commandes avec le statut 2. Faites glisser les données de ligne dans le tableau de gauche vers la position de ligne spécifiée. dans le tableau de droite. Une fois l'opération terminée, le tableau de gauche sera réduit d'une ligne et le tableau de droite sera ajouté d'une ligne. De plus, vous devez également annuler l'opération (équivalente à l'opération Ctrl Z) pour revenir à l'étape précédente. Peut-être que la description vous fera réfléchir à deux fois avant de la simuler. Quoi qu'il en soit, elle a été implémentée. Jetons d'abord un coup d'œil aux rendus.

1. Regardez d'abord l'effet avant de faire glisser

2 C'est l'effet de faire glisser les données de la ligne du tableau vers la gauche

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

3 , L'effet des données du tableau après avoir fait glisser une ligne

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

4. L'effet après le deuxième et le troisième glissement

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

5. L'effet de cliquer sur l'opération d'annulation sur le tableau de droite

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

6. Cliquez sur Annuler plusieurs fois et le tableau reviendra à son état initial

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

2. Exemples de codeLa première chose que j'ai ressentie lorsque j'ai reçu la demande était que je devais la rechercher dans l'API de la table Bootstrap. la puissance de l’open source est puissante et il peut y avoir des exemples connexes. Après quelques recherches, malheureusement, Bootstrap Table ne propose pas une telle opération entre deux tables. Si vous y réfléchissez, vous pouvez réellement comprendre que Bootstrap Table est conçu pour la liaison de données d'une certaine table dynamique. Il se concentre sur les fonctions à l'intérieur de la table. Par exemple, il existe une bonne solution pour le tri par glisser-déposer (. Réorganiser les lignes) des lignes à l'intérieur du tableau. Il semble que les besoins particuliers comme les blogueurs devraient être satisfaits par eux-mêmes.
1. Analyse des exigences
Maintenant que j'ai décidé de l'écrire moi-même, j'ai commencé à analyser les exigences. Il semble que la partie la plus difficile de cette opération soit l'effet glisser-déposer. et l'effet drop, il s'avère qu'il est trop utilisé lors de l'utilisation de JsPlumb, donc je pense à draggable.js et droppable.js dans notre interface utilisateur magique JQuery. Maintenant que le problème du glisser-déposer est résolu, il reste encore une autre difficulté, que faire si vous annulez l'opération ? Nous savons que Ctrl z signifie restaurer. Qu'est-ce que la restauration ? Il s'agit de revenir au fonctionnement de l'étape précédente, le principe est donc de pouvoir sauvegarder l'état de l'étape précédente. Lorsqu'il s'agit de sauvegarder l'état d'une certaine étape, les blogueurs savent comment le faire. Json est nécessaire, qui doit avoir respectivement trois paires clé-valeur. Il s'agit de l'index de l'étape en cours, des données du tableau de gauche et des données du tableau de droite. Cela ne semble pas trop difficile, alors commençons.
2. Exemples de code
2.1 code de page 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>
 
<p class="panel-body" style="padding-bottom:0px;">
  
 <p class="panel panel-default" style="margin-bottom:0px;">
 <p class="panel-heading">查询条件</p>
 <p class="panel-body container-fluid">
 <p class="row">
  <p 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>
  </p>
  <p 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>
  </p>
  <p 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>
  </p>
  <p 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>
  </p>
 </p>
 <p class="collapse" id="p_more_search">
  <p class="row" style="margin-top:15px;">
  <p 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>
  </p>
  <p 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>
  </p>
  <p 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>
  </p>
  <p 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>
  </p>
  </p>
 
  <p class="row" style="margin-top:15px;">
  <p 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>
  </p>
  <p 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>
  </p>
  <p 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>
  </p>
  </p>
 </p>
 
  <p class="row" style="float:right;margin-right:50px;margin-top:13px;">
  <p>
  <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>
  </p>
 
  </p>
 </p>
 </p>
 
 <p class="collapse_p_outside">
 <p class="collapse_p_inside"></p>
 <span id="span_collapse" href="#p_more_search" class="collapse_p_inside_ele">展开<label class="glyphicon glyphicon-menu-down"></label></span>
 </p>
</p>
 
@*<p id="toolbar_left" class="btn-group">
</p>*@
<p 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>
</p>
<p class="panel-body" style="padding-top:0px;">
 <p id="p_tableleft" class="col-md-6">
 <table id="tb_order_left"></table>
 </p>
 <p id="p_tableright" class="col-md-6">
 <table id="tb_order_right"></table>
 </p>
</p>

Copier après la connexion

2.2 code 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: &#39;yyyy-mm-dd hh:ii&#39;,
 autoclose: true,
 todayBtn: true,
 });
 
});
 
//表格相关事件和方法
var TableInit = function () {
 var oTableInit = new Object();
 
 oTableInit.Init = function () {
　　　　 //初始化左边表格
 $(&#39;#tb_order_left&#39;).bootstrapTable({
 url: &#39;/api/OrderApi/get&#39;,
 method: &#39;get&#39;,
 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: &#39;ORDER_NO&#39;,
 title: &#39;订单号&#39;
 },
 {
 field: &#39;BODY_NO&#39;,
 title: &#39;车身号&#39;
 }, {
 field: &#39;VIN&#39;,
 title: &#39;VIN码&#39;
 }, {
 field: &#39;TM_MODEL_MATERIAL_ID&#39;,
 title: &#39;整车编码&#39;
 },
 {
 field: &#39;ORDER_TYPE&#39;,
 title: &#39;订单类型&#39;
 },
 {
 field: &#39;ORDER_STATUS&#39;,
 title: &#39;订单状态&#39;
 },
 {
 field: &#39;CREATE_DATE&#39;,
 title: &#39;订单导入时间&#39;
 },
 {
 field: &#39;PLAN_DATE&#39;,
 title: &#39;订单计划上线日期&#39;
 },
 {
 field: &#39;VMS_NO&#39;,
 title: &#39;VMS号&#39;
 },
 {
 field: &#39;ENGIN_CODE&#39;,
 title: &#39;发动机号&#39;
 },
 {
 field: &#39;TRANS_CODE&#39;,
 title: &#39;变速箱号&#39;
 },
 {
 field: &#39;OFFLINE_DATE_ACT&#39;,
 title: &#39;实际下线日期&#39;
 },
 {
 field: &#39;HOLD_RES&#39;,
 title: &#39;hold理由&#39;
 },
 {
 field: &#39;SPC_FLAG&#39;,
 title: &#39;特殊标记&#39;
 },
 ],
 onLoadSuccess: function (data) {
  //表格加载完成之后初始化拖拽
　　　　　　　　　　oTableInit.InitDrag();
 }
 });
　　　　 //初始化右边表格
 $(&#39;#tb_order_right&#39;).bootstrapTable({
 url: &#39;/api/OrderApi/get&#39;,
 method: &#39;get&#39;,
 toolbar: &#39;#toolbar_right&#39;,
 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: &#39;ORDER_NO&#39;,
 title: &#39;订单号&#39;
 },
 {
 field: &#39;BODY_NO&#39;,
 title: &#39;车身号&#39;
 }, {
 field: &#39;VIN&#39;,
 title: &#39;VIN码&#39;
 }, {
 field: &#39;TM_MODEL_MATERIAL_ID&#39;,
 title: &#39;整车编码&#39;
 },
 {
 field: &#39;ORDER_TYPE&#39;,
 title: &#39;订单类型&#39;
 },
 {
 field: &#39;ORDER_STATUS&#39;,
 title: &#39;订单状态&#39;
 },
 {
 field: &#39;CREATE_DATE&#39;,
 title: &#39;订单导入时间&#39;
 },
 {
 field: &#39;PLAN_DATE&#39;,
 title: &#39;订单计划上线日期&#39;
 },
 {
 field: &#39;VMS_NO&#39;,
 title: &#39;VMS号&#39;
 },
 {
 field: &#39;ENGIN_CODE&#39;,
 title: &#39;发动机号&#39;
 },
 {
 field: &#39;TRANS_CODE&#39;,
 title: &#39;变速箱号&#39;
 },
 {
 field: &#39;OFFLINE_DATE_ACT&#39;,
 title: &#39;实际下线日期&#39;
 },
 {
 field: &#39;HOLD_RES&#39;,
 title: &#39;hold理由&#39;
 },
 {
 field: &#39;SPC_FLAG&#39;,
 title: &#39;特殊标记&#39;
 },
 ],
 onLoadSuccess: function (data) {
 oTableInit.InitDrop();
 }
 });
 };
 //注册表格行的draggable事件
 oTableInit.InitDrag = function () {
 $(&#39;#tb_order_left tr&#39;).draggable({
 helper: "clone",
 start: function (event, ui) {
 var old_left_data = JSON.stringify($(&#39;#tb_order_left&#39;).bootstrapTable("getData"));
 var old_right_data = JSON.stringify($(&#39;#tb_order_right&#39;).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 });
 $(&#39;#tb_order_left&#39;).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(&#39;refresh&#39;);
 });
 
 //重置点击事件
 $("#btn_reset").click(function () {
 $(".container-fluid").find(".form-control").val("");
 $("#tb_order_left").bootstrapTable(&#39;refresh&#39;);
 });
 //撤销操作点击事件
 $("#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);
 
 $(&#39;#tb_order_left&#39;).bootstrapTable(&#39;removeAll&#39;);
 $(&#39;#tb_order_right&#39;).bootstrapTable(&#39;removeAll&#39;);
 $(&#39;#tb_order_left&#39;).bootstrapTable(&#39;append&#39;, 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] });
 }
  
 //$(&#39;#tb_order_right&#39;).bootstrapTable(&#39;append&#39;, arr_right_data);//append之后不能drop
 break;
 }
 i_statuindex--;
 
 //重新注册可拖拽
 m_oTable.InitDrag();
 //m_oTable.InitDrop();
 });
 
 //搜索栏展开收起点击事件
 $("#span_collapse").click(function () {
 if ($(this).text() == "收起") {
 $(this).html(&#39;展开<label class="glyphicon glyphicon-menu-down"></label>&#39;);
 $("#p_more_search").collapse(&#39;hide&#39;);
 }
 else {
 $(this).html(&#39;收起<label class="glyphicon glyphicon-menu-up"></label>&#39;);
 $("#p_more_search").collapse(&#39;show&#39;)
 }
 });
 };
 
 return oInit;
};

Copier après la connexion

Concentrons-nous sur le code à plusieurs endroits :

2.2. Une fois le tableau de gauche chargé avec succès, les lignes du tableau peuvent être glissées et déposées.

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

Copier après la connexion

En cas de démarrage de draggable, nous sauvegardons toutes les données dans les tables de gauche et de droite avant de les faire glisser vers la variable arrdata La variable globale i_statuindex est utilisée pour enregistrer l'index de l'étape en cours et est. utilisé pour annuler l’opération.

2.2.2 Une fois la table de droite chargée avec succès, enregistrez l'événement droppable de la table

$("#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 });
 $(&#39;#tb_order_left&#39;).bootstrapTable("removeByUniqueId", $(ui.helper[0]).attr("data-uniqueid"));
 oTableInit.InitDrag();
 }
 });

Copier après la connexion

Dans l'événement drop, récupérez les données de la ligne actuellement déplacées et calculez la position actuelle de la souris. table de droite Insère les données de la ligne déplacée à la position spécifiée. Supprimez ensuite les données de ligne déplacées depuis le tableau de gauche.

2.2.3 Code d'opération d'annulation

//撤销操作点击事件
 $("#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);
 
 $(&#39;#tb_order_left&#39;).bootstrapTable(&#39;removeAll&#39;);
 $(&#39;#tb_order_right&#39;).bootstrapTable(&#39;removeAll&#39;);
 $(&#39;#tb_order_left&#39;).bootstrapTable(&#39;append&#39;, 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] });
 }
 //$(&#39;#tb_order_right&#39;).bootstrapTable(&#39;append&#39;, arr_right_data);//append之后不能drop
 break;
 }
 i_statuindex--;
 
 //重写注册可拖拽
 m_oTable.InitDrag();
 });

Copier après la connexion

L'opération d'annulation détermine principalement quelle étape annuler en fonction de l'index dans la variable globale arrdata, puis supprime les données de table gauche et droite de l'opération actuelle étape en fonction de l'index, et l'ajoute tour à tour aux deux tableaux. Insérez les données, puis i_statuindex diminue en séquence jusqu'à ce qu'il soit égal à zéro. Puisque toutes les données des lignes de gauche du tableau ont été réécrites et chargées, vous en avez besoin. pour réenregistrer l'événement déplaçable. Ce sont trois étapes si simples pour obtenir l'effet souhaité, n'est-ce pas très simple ~~

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Pour plus d'articles sur le code d'implémentation de l'effet de glissement de ligne du composant JS Bootstrap Table, veuillez faire attention au site Web chinois de PHP !

Articles connexes :

Explication détaillée de la façon d'implémenter la mise en page de base avec Bootstrap

Analyse de la façon d'utiliser la table BootStrap

Comment utiliser l'effet de transition Bootstrap Boîte modale de transition (Modal)

Étiquettes associées：

JS bootstrap table 表格组件

source：php.cn

Article précédent：Code d'implémentation de l'effet de glissement multi-lignes du composant JS Bootstrap Table Article suivant：Un plug-in Bootstrap Table léger qui mérite d'être partagé

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Exemples de paramètres HTML pour les effets de police gras, italique, souligné, barré et autres

1970-01-01 08:00:00
实现一个 Java 版的 Redis

1970-01-01 08:00:00
La démo d'applet WeChat la plus simple

1970-01-01 08:00:00
Introduction aux méthodes de fonctionnement simples de pandas.DataFrame (créer, indexer, ajouter et supprimer) en python

1970-01-01 08:00:00
WeChat Mini Program : Exemple de mise en œuvre de l'effet d'onglets

1970-01-01 08:00:00
Python construit des méthodes personnalisées pour embellir la sortie de la structure du dictionnaire

1970-01-01 08:00:00
HTML5 : utilisez Canvas pour traiter la vidéo en temps réel

1970-01-01 08:00:00
Asp.net utilise SignalR pour envoyer des images

1970-01-01 08:00:00
Tutoriel de développement de programmes WeChat Mini-App() et Page() Présentation des fonctions

1970-01-01 08:00:00
Explication détaillée de l'utilisation de Python Redis

1970-01-01 08:00:00

Derniers numéros

Existe-t-il un moyen transparent de combiner des accessoires personnalisés et natifs dans un wrapper de composant REACT TS ? J'ai plusieurs composants qui étendent les fonctionnalités natives des entrées, des bouton...

Depuis 2024-03-30 17:01:40

0

1

346

Tableau HTML fusionner des cellules en SQL J'utilise cette requête pour créer un tableau HTML et l'envoyer par e-mail. Est-il possibl...

Depuis 2024-03-30 16:45:17

0

2

324

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal