communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Composant JS Bootstrap Table - Implémentation de l'effet de glissement des lignes - Compétences code_javascript

Composant JS Bootstrap Table - Implémentation de l'effet de glissement des lignes - Compétences code_javascript

WBOY
Libérer： 2016-05-16 15:27:06
original
1509 Les gens l'ont consulté

1. Besoins commerciaux et résultats de la mise en œuvre

Le projet concerne le module de commande. J'ai soudainement reçu une exigence ce jour-là, disant que l'effet d'insertion de commande devait être obtenu entre deux commandes avec des statuts différents. La méthode de présentation sur la page est : deux tableaux à gauche et à droite, et le statut dans le tableau de gauche est Pour la commande 1, il existe une commande avec le statut 2 dans le tableau de droite. Faites glisser les données de la ligne du tableau de gauche vers la position de ligne spécifiée dans le tableau de droite. , le tableau de gauche diminue d'une ligne et le tableau de droite augmente 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 du glissement des données des lignes du tableau vers la gauche

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

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

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

6. Cliquez plusieurs fois sur Annuler pour ramener le formulaire à son état initial

2. Exemples de codes
La première chose à laquelle j'ai pensé lorsque j'ai reçu la demande était que je devrais chercher dans l'API de la table Bootstrap. Après tout, la puissance de l'open source est puissante et il peut y avoir des exemples pertinents. 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 ceux des blogueurs, devraient être satisfaits par eux-mêmes.
1. Analyse de la demande
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. En ce qui concerne l'effet glisser-déposer, il s'avère que lors de l'utilisation de JsPlumb. , cela en utilise trop, alors j'ai pensé à l'effet glisser-déposer dans notre interface utilisateur magique JQuery draggable.js et droppable.js. 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. Exemple de code
Code de la page cshtml 2.1

<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>
Copier après la connexion

Code js 2.2

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;
};
Copier après la connexion

Concentrons-nous sur le code à plusieurs endroits :
2.2.1 Une fois le tableau de gauche chargé avec succès, les lignes du tableau peuvent être glissées et déposées. 

$('#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) {
   }
  });
Copier après la connexion

Dans l'événement 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 permet d'annuler l'opération.
2.2.2 Une fois le tableau de droite chargé avec succès, enregistrez l'événement droppable du formulaire　

$("#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();
 }
 });
Copier après la connexion

Dans l'événement drop, récupérez les données de la ligne actuellement déplacées, calculez la position actuelle de la souris et insérez les données de la ligne déplacées à la position spécifiée dans le tableau de droite. Supprimez ensuite les données de ligne déplacées depuis le tableau de gauche.
2.2.3 Annuler le code de l'opération　　

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

Undo 작업은 주로 전역 변수 arrdata의 인덱스를 이용해 어떤 단계를 실행 취소할지 결정한 후, 그 인덱스에 따라 현재 단계의 왼쪽, 오른쪽 테이블 데이터를 추출하여 두 테이블에 차례로 데이터를 삽입하고, 그러면 i_statuindex는 0이 될 때까지 순차적으로 감소합니다. 왼쪽 테이블 행부터 모든 데이터가 다시 작성되고 로드되었으므로 드래그 가능한 이벤트를 다시 등록해야 합니다. 간단한 3단계만 거치면 원하는 효과를 얻을 수 있습니다. 아주 간단하지 않나요~~

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

Étiquettes associées：
bootstrap js
source：php.cn
Article précédent：Résumé des méthodes JS pour acquérir des compétences file size_javascript Article suivant：Méthode JS pour obtenir le dernier nombre de jours du mois, le nombre maximum de jours et le numéro de semaine d'une certaine compétence day_javascript
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
Derniers numéros
Un pool de travail déclaré sur plusieurs routes peut-il toujours maintenir son utilisation du processeur sans se soucier du seuil J'espère trouver un système node.js avec un pool de travailleurs pour gérer les tâches gou...
Depuis 2024-04-06 19:54:23
0
1
444
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
Doit-on utiliser SSG pour déployer des tableaux de bord créés avec Nuxt.js ? Nous développerons un tableau de bord à usage interne en utilisant Nuxt.js. Puisqu’il s’ag...
Depuis 2024-04-06 13:17:44
0
1
493
Electron obtient AppData en préchargement Comment obtenir le répertoire AppData préchargé ? Background.js[...]asyncfunctioncreateWin...
Depuis 2024-04-06 11:05:31
0
1
417
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