JS-Komponenten-Bootstrap-Tabelle, mehrzeilige Drag-Effekt-Implementierung, Code

Vorwort: Ich habe gerade vorgestern einen Artikel geschrieben JS-Komponente Bootstrap Table Tabellenzeilen-Zieheffekt Heute muss ich mehrere ausgewählte Elemente gleichzeitig ziehen können basierend auf dem Ziehen der vorherigen Tabellenzeile. Nachdem ich einen halben Tag damit verbracht hatte, es zu recherchieren, stellte sich die Wirkung ein, die sich jedoch unbefriedigend anfühlte. Teilen Sie es zuerst und denken Sie dann über bessere Möglichkeiten nach, es später zu optimieren.

1. Effektanzeige

1. Vor dem Ziehen

2. Ziehen

3. Nach dem Ziehen

4. Machen Sie den Vorgang rückgängig und kehren Sie zum Zustand vor dem Ziehen zurück

2. Bedarfsanalyse
Aus dem vorherigen Artikel wissen wir, dass Sie ein ziehbares Etikett oder einen Container benötigen, wenn Sie Drag & Drop implementieren möchten. Das tr im vorherigen Artikel ist beispielsweise ein Drag & Drop-Container Drop der ausgewählten Zeilen, dann besteht die erste Reaktion des Bloggers darin, die ausgewählte Zeile in einen Container zu legen, z. B. ein Div, und das Div dann als ziehbar zu registrieren. Die tatsächliche Situation ist jedoch, dass tr eine Beschriftung in der Tabelle ist Wenn tr verwendet wird, wird das Einschließen in div unweigerlich die Stile in der Tabelle stören und die Benutzeroberfläche wird wirklich durcheinander gebracht. Offensichtlich wird dieser Weg nicht funktionieren. Dann habe ich durch die Elementüberprüfung von Google Chrome herausgefunden, dass das übergeordnete Element der mit der Bootstrap-Tabelle generierten Tabelle tr tatsächlich tbody war, also habe ich mich gefragt, ob ich das Ziehen und Ablegen von tbody registrieren könnte. Die Praxis hat bewiesen, dass diese Methode machbar ist. Also fangen wir an.

3. Codebeispiele
Der Code von cshtm wird nicht wiederholt, er ist derselbe wie im vorherigen Artikel. Konzentrieren wir uns auf den js-Code.

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();
  if (data.total > 0) {
   var iheight = $('#div_tableleft').find(".fixed-table-container").height();
   $('#div_tableleft').find(".fixed-table-container").height(iheight + 36);
  }
  },
  onCheckAll: function (rows) {
  $("#tb_order_left tbody tr").addClass("selected");
  },
  onUncheckAll: function (rows) {
  $("#tb_order_left tbody tr").removeClass("selected");
  }
 });

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

 oTableInit.InitDrag = function () {
 $('#tb_order_left tbody').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) {
  }
 });
 };

 oTableInit.InitDrop = function () {
 $("#div_tableright div[class=fixed-table-container]").droppable({
  drop: function (event, ui) {
  var arrtr = $(ui.helper[0]).find("tr[class=selected]");
  if (arrtr.length <= 0) {
   alert("请先选中要插单的行");
   return;
  }
  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);
  }
  for (var i = 0; i < arrtr.length; i++) {
   var arrtd = $(arrtr[i]).find("td");
   var uniqueid = $(arrtr[i]).attr("data-uniqueid");
   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() == "-" &#63; null : $(arrtd[7]).text(),
   PLAN_DATE: $(arrtd[8]).text() == "-" &#63; 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() == "-" &#63; null : $(arrtd[12]).text(),
   HOLD_RES: $(arrtd[13]).text(),
   SPC_FLAG: $(arrtd[14]).text(),
   TO_ORDER_ID: uniqueid

   };
   $("#tb_order_right").bootstrapTable("insertRow", { index: rowIndex++, row: rowdata });
   $('#tb_order_left').bootstrapTable("removeByUniqueId", 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_insertorder").click(function () {
  
 });

 //撤销操作点击事件
 $("#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();
 });
 };

 return oInit;
};

Nach dem Login kopieren

Konzentrieren wir uns auf einen Teil des Codes

1. Sie können es per Drag & Drop auf die linke Seite der Registrierung ziehen

$('#tb_order_left tbody').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) {
  }
 });

Nach dem Login kopieren

Der Code hier ist sehr einfach und macht hauptsächlich zwei Dinge:

(1) Registrieren Sie die Ziehbarkeit von tbody. Dasselbe gilt für das ziehbare Ereignis der JQuery-Benutzeroberfläche.

(2) Bevor Sie mit dem Ziehen beginnen, speichern Sie die Daten in beiden Tabellen für Wiederherstellungsvorgänge.

2. Registrieren Sie sich und klicken Sie auf der rechten Seite

　　　　$("#div_tableright div[class=fixed-table-container]").droppable({
  drop: function (event, ui) {
  var arrtr = $(ui.helper[0]).find("tr[class=selected]");
  if (arrtr.length <= 0) {
   alert("请先选中要插单的行");
   return;
  }
  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);
  }
  for (var i = 0; i < arrtr.length; i++) {
   var arrtd = $(arrtr[i]).find("td");
   var uniqueid = $(arrtr[i]).attr("data-uniqueid");
   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() == "-" &#63; null : $(arrtd[7]).text(),
   PLAN_DATE: $(arrtd[8]).text() == "-" &#63; 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() == "-" &#63; null : $(arrtd[12]).text(),
   HOLD_RES: $(arrtd[13]).text(),
   SPC_FLAG: $(arrtd[14]).text(),
   TO_ORDER_ID: uniqueid

   };
   $("#tb_order_right").bootstrapTable("insertRow", { index: rowIndex++, row: rowdata });
   $('#tb_order_left').bootstrapTable("removeByUniqueId", uniqueid);
  }
  
  
  oTableInit.InitDrag();
  }
 });

Nach dem Login kopieren

Der Code hier unterscheidet sich geringfügig von zuvor

(1) Registrieren Sie das Droppable des #div_tableright div[class=fixed-table-container]-Tags. Dieses Tag wird automatisch generiert, nachdem die Bootstrap-Tabellentabelle initialisiert wurde. Warum nicht direkt das Droppable der Tabelle #tb_order_right registrieren? Welche Rolle spielt dieses Tag? Wenn die Domäne zu klein ist, kann der gezogene Tbody das Drop-Ereignis nicht erfassen. Das #div_tableright div[class=fixed-table-container] div-Tag außerhalb des Registrierungsformulars kann das Problem lösen.

(2) Verwenden Sie var arrtr = $(ui.helper[0]).find("tr[class=selected]");, um die ausgewählte Zeile im tbody zu finden, und extrahieren Sie dann die Daten und fügen Sie sie ein Es wird nacheinander in die Tabelle auf der rechten Seite eingefügt. Die Tabelle auf der linken Seite löscht die Datenzeilen nacheinander.

(3) Hier ist es etwas mühsam, die Position des Tropfens zu finden. Wir wissen, dass Sie die Position ermitteln müssen, wenn Sie die ausgewählte Linie links an die angegebene Position rechts verschieben möchten Hier wird über die Eigenschaft ui.helper[0] .offsetTop die Y-Achsenposition der Maus ermittelt und die einzufügende Position berechnet.

3. Vorgang rückgängig machen

　$("#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();
 });

Nach dem Login kopieren

Der Rückgängig-Vorgang ist grundsätzlich derselbe wie zuvor.

4. Zusammenfassung
Der Effekt ist vollständig, der einzige Nachteil besteht jedoch darin, dass bei jedem Ziehen der gesamte Körper gezogen wird, nicht die ausgewählten Zeilen. Es können jedoch nicht mehrere ausgewählte Zeilen in einen Container eingeschlossen werden. Es wurde noch keine passende Lösung gefunden. Lassen Sie uns dies zunächst tun und es später optimieren, wenn wir eine gute Lösung gefunden haben.

5. Optimierungsplan

1. So registrieren Sie Drap

oTableInit.InitDrag = function () {
 $('#tb_order_left tbody').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);
  $(ui.helper[0]).find("tr[class!=selected]").remove();
  },
  stop: function (event, ui) {
  }
 });
 };

Nach dem Login kopieren

Diesen Satz $(ui.helper[0]).find("tr[class!=selected]").remove(); hinzugefügt, sodass nicht ausgewählte Zeilen beim Ziehen nicht sichtbar sind.
2. Suchen Sie genau die in der Tabelle rechts angegebene Position:

oTableInit.InitDrop = function () {
 $("#div_tableright div[class=fixed-table-container]").droppable({
  drop: function (event, ui) {
  var arrtr = $(ui.helper[0]).find("tr[class=selected]");
  if (arrtr.length <= 0) {
   toastr.warning('请先选中要插单的行');
   return;
  }
  var oTop = ui.helper[0].offsetTop;
  //因为表格每行的高度可能不一致，所以这里取插入行位置的办法是：取右边表格的行高依次累加，计算行索引。
  var rowIndex = 0;
  var bIsBottom = true;
  var iRowHeadHeight = 40;
  var addHeight = iRowHeadHeight;
  var trs = $("#tb_order_right tbody tr");
  for (var i = 0; i < trs.length; i++) {
   addHeight += $(trs[i]).height();
   if (addHeight > oTop) {
   rowIndex = i;
   bIsBottom = false;//这里参数用来定义拖动到右边表格最下面的情况，这时没有进入到此条件判断里面。
   break;
   }
  }
  if (bIsBottom) {
   rowIndex = trs.length;
  }

  for (var i = 0; i < arrtr.length; i++) {
   var arrtd = $(arrtr[i]).find("td");
   var uniqueid = $(arrtr[i]).attr("data-uniqueid");
   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_NAME: $(arrtd[6]).text(),
   CREATE_DATE: $(arrtd[7]).text() == "-" &#63; null : $(arrtd[7]).text(),
   PLAN_DATE: $(arrtd[8]).text() == "-" &#63; 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() == "-" &#63; null : $(arrtd[12]).text(),
   HOLD_RES: $(arrtd[13]).text(),
   SPC_FLAG: $(arrtd[14]).text(),
   TO_ORDER_ID: uniqueid,
   ORDER_STATUS:0

   };
   $("#tb_order_right").bootstrapTable("insertRow", { index: rowIndex++, row: rowdata });
   $('#tb_order_left').bootstrapTable("removeByUniqueId", uniqueid);
  }

  oTableInit.InitDrag();

  }
 });
 };

Nach dem Login kopieren

Oleh kerana ketinggian baris setiap baris tidak pasti dan disokong secara dinamik oleh data dalam baris, kedudukan jatuh juga dikira secara dinamik di sini.

Pada ketika ini, fungsi kecil ini pada asasnya telah berakhir, dan kesan asas serta mata yang perlu dioptimumkan juga selesai.

Muat turun kod sumber: Kesan seret berbilang baris Jadual Bootstrap

Di atas adalah keseluruhan kandungan artikel ini saya harap artikel ini akan membantu semua orang dalam mempelajari pengaturcaraan javascript.