Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > JS-Komponente Bootstrap-Tabelle Tabellenzeilen-Drag-Effekt-Implementierung Code_Javascript-Kenntnisse

JS-Komponente Bootstrap-Tabelle Tabellenzeilen-Drag-Effekt-Implementierung Code_Javascript-Kenntnisse

WBOY
Freigeben： 2016-05-16 15:27:06
Original
1509 Leute haben es durchsucht

1. Geschäftsanforderungen und Umsetzungsergebnisse

Das Projekt beinhaltet das Bestellmodul. An diesem Tag erhielt ich plötzlich die Anforderung, dass der Bestelleinfügungseffekt zwischen zwei Bestellungen mit unterschiedlichem Status erzielt werden soll. Die Darstellungsmethode auf der Seite ist: zwei Tabellen links und rechts. und der Status in der Tabelle auf der linken Seite lautet: Für die Bestellung 1 gibt es eine Bestellung mit dem Status 2 in der rechten Tabelle. Ziehen Sie die Zeilendaten in der linken Tabelle an die angegebene Zeilenposition in der rechten Tabelle , die linke Tabelle verringert sich um eine Zeile und die rechte Tabelle erhöht sich um eine Zeile. Darüber hinaus müssen Sie den Vorgang auch rückgängig machen (entspricht der Strg-Z-Operation), um zum vorherigen Schritt zurückzukehren. Vielleicht lässt Sie die Beschreibung zweimal darüber nachdenken, es zu simulieren. Schauen wir uns zunächst die Renderings an.

1. Schauen Sie sich zunächst den Effekt an, bevor Sie ziehen

2. Dies ist der Effekt des Ziehens der Tabellenzeilendaten nach links

3. Die Auswirkung von Tabellendaten nach dem Ziehen einer Zeile

Der Effekt ist nach dem zweiten und dritten Ziehen abgeschlossen

5. Die Auswirkung des Klickens auf den Rückgängig-Vorgang in der rechten Tabelle

6. Klicken Sie mehrmals auf „Rückgängig“, um das Formular in seinen Ausgangszustand zurückzusetzen

2. Codebeispiele
Das erste, was ich dachte, als ich die Anfrage erhielt, war, dass ich in der Bootstrap-Tabellen-API suchen sollte. Schließlich ist die Leistungsfähigkeit von Open Source leistungsstark und es kann relevante Beispiele geben. Nach einiger Suche verfügt Bootstrap Table leider nicht über eine solche Operation zwischen zwei Tabellen. Wenn Sie darüber nachdenken, können Sie tatsächlich verstehen, dass Bootstrap Table für die Datenbindung einer bestimmten dynamischen Tabelle konzipiert ist. Der Schwerpunkt liegt beispielsweise auf den Funktionen innerhalb der Tabelle. Es gibt beispielsweise eine gute Lösung für die Drag-and-Drop-Sortierung. Zeilen innerhalb der Tabelle neu anordnen Es scheint, dass spezielle Bedürfnisse wie Blogger selbst realisiert werden sollten.
1. Bedarfsanalyse
Nachdem ich beschlossen hatte, es selbst zu schreiben, begann ich, die Anforderungen zu analysieren. Es scheint, dass der Drag-and-Drop-Effekt bei der Verwendung von JsPlumb der schwierigere Teil ist , es verbraucht zu viel, also habe ich an den Drag-and-Drop-Effekt in unserer magischen JQuery-Benutzeroberfläche gedacht. Nachdem das Drag-and-Drop-Problem nun gelöst ist, gibt es noch eine weitere Schwierigkeit: Was ist zu tun, wenn Sie den Vorgang rückgängig machen? Wir wissen, dass Strg z „Wiederherstellen“ bedeutet. Was ist „Wiederherstellen“? Es geht darum, zum Vorgang des vorherigen Schritts zurückzukehren. Die Voraussetzung ist also, dass der Status eines bestimmten Schritts gespeichert werden kann. Blogger wissen, wie das geht Es wird JSON benötigt, das jeweils über drei Schlüssel-Wert-Paare verfügen muss. Es handelt sich um den Index des aktuellen Schritts, die Daten der Tabelle links und die Daten der Tabelle rechts. Es scheint nicht allzu schwierig zu sein, also fangen wir an.
2. Codebeispiel
2.1 CSHTML-Seitencode

<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>
Nach dem Login kopieren

2.2 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();
   }
  });
　　　　 //初始化右边表格
  $('#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() == "-" &#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: $(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;
};
Nach dem Login kopieren

Konzentrieren wir uns an mehreren Stellen auf den Code:
2.2.1 Nachdem die Tabelle links erfolgreich geladen wurde, können die Tabellenzeilen per Drag & Drop verschoben werden. 

$('#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) {
   }
  });
Nach dem Login kopieren

Im Startereignis von Draggable speichern wir alle Daten in der linken und rechten Tabelle, bevor wir sie in die Variable arrdata ziehen. Die globale Variable i_statuindex wird zum Aufzeichnen des Index des aktuellen Schritts und zum Rückgängigmachen des Vorgangs verwendet.
2.2.2 Nachdem die Tabelle rechts erfolgreich geladen wurde, registrieren Sie das Droppable-Ereignis des Formulars　

$("#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() == "-" &#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: $(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();
 }
 });
Nach dem Login kopieren

Im Drop-Ereignis werden die aktuell gezogenen Zeilendaten abgerufen, die aktuelle Mausposition berechnet und die gezogenen Zeilendaten an der angegebenen Position in der Tabelle rechts eingefügt. Anschließend löschen Sie die aus der linken Tabelle gezogenen Zeilendaten.
2.2.3 Vorgangscode 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();
 });
Nach dem Login kopieren

Operasi buat asal terutamanya menggunakan indeks dalam arrdata pembolehubah global untuk menentukan langkah yang hendak dibuat asal, dan kemudian mengekstrak data jadual kiri dan kanan langkah semasa mengikut indeks, memasukkan data ke dalam dua jadual secara bergilir-gilir dan maka i_statuindex menurun dalam urutan sehingga ia sama dengan sifar Memandangkan baris jadual kiri Semua data telah ditulis semula dan dimuatkan, jadi peristiwa boleh seret perlu didaftarkan semula. Ia hanya tiga langkah mudah untuk mencapai kesan yang diingini bukankah sangat mudah~~

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Verwandte Etiketten：
bootstrap js
Quelle：php.cn
Vorheriger Artikel：Zusammenfassung der JS-Methoden zum Erwerb von Dateigröße_Javascript-Kenntnissen Nächster Artikel：JS-Methode zum Abrufen der letzten Anzahl von Tagen im Monat, der maximalen Anzahl von Tagen und der Wochenanzahl eines bestimmten Tages_Javascript-Fähigkeiten
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Kann ein in mehreren Routen deklarierter Workerpool seine CPU-Auslastung trotzdem beibehalten, ohne sich um den Schwellenwert zu kümmern? Ich hoffe, ein node.js-System mit einem Workerpool zu finden, um CPU-intensive Aufgaben zu...
Aus 2024-04-06 19:54:23
0
1
444
Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...
Aus 2024-04-06 18:16:26
0
1
403
Ausgeblendete Seitenbereiche anzeigen: aktiviert Ich hätte gerne ein Navigationsmenü im Seitenbereich mit der Möglichkeit, über ein animier...
Aus 2024-04-06 15:49:33
0
1
319
Sollten wir SSG verwenden, um mit Nuxt.js erstellte Dashboards bereitzustellen? Wir werden mit Nuxt.js ein Dashboard für den internen Gebrauch entwickeln. Da es sich um e...
Aus 2024-04-06 13:17:44
0
1
493
Electron erhält AppData beim Vorladen Wie erhalte ich das vorinstallierte AppData-Verzeichnis? Background.js[...]asyncfunctioncr...
Aus 2024-04-06 11:05:31
0
1
417
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage