来自 关于计算机 2019-12-08 03:35 的文章
当前位置: 澳门太阳娱乐手机登录 > 关于计算机 > 正文

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

前言:后天刚写了篇JS组件Bootstrap Table表格行拖拽效果,前几日收受新的内需,须要在头里表格行拖拽的底蕴上能够同时拖拽选中的多行。用了半天时间商讨了下,效果是出来了,不过感觉白璧微瑕。先把它分享出去,今后想到更加好的办法再优化吧。

大器晚成、业务需求及达成效果与利益

生机勃勃、效果体现

体系涉嫌到订单模块,那天猛然接到三个供给,说是两种差别情状的订单之间要落到实处插单的功能,页面上显现形式是:左右四个Table,左侧Table里面是处境为1的订单,右侧Table里面是情形为2订单,右边Table里面包车型客车行数据拖动到左手Table里面钦定行之处,拖动完毕后,侧边表格裁减风华正茂行,左边表格扩充后生可畏行。除外,还供给撤销操作,能够回到到上一步的状态。恐怕描述会让大家模仿两可,反正已经贯彻了,先来探视效果图吧。

1、拖动前

1、先看看拖动此前的效用

2、拖动中

2、那是拖动左侧表格行数据的作用

3、拖动后

3、拖动生龙活虎行达成之后表格数据的效果

4、撤废回到拖动前景况

4、第三遍、第二回拖动达成后效果

二、供给解析通过上篇我们驾驭,假诺要贯彻拖拽,必定要有一个能够拖拽的标签,或许叫容器,比方上篇里面包车型地铁tr便是八个拖拽的器皿,那么黄金年代旦要完成选拔行的拖拽,那么博主的第风姿浪漫影响是将入选的行放到多个器皿里面,举例放到叁个div中,然后注册那一个div的可拖拽,不过实际上景况是,tr是在table里面包车型大巴竹签,若是将tr用div包起来,势必定将table里面的样式打乱,那一个分界面就实乃乱掉了。很妇孺皆知,那条路走不通。然后经过Google浏览器调查成分知道,用Bootstrap table生成的表格tr的父级成分实际上是tbody,于是在想是或不是足以挂号tbody的拖拽,实施注脚,此法可行。于是就此开干。

5、侧边表格下边撤废操作点击效果

三、代码示例cshtm的代码就不再重复,和上篇相符。大家第一来看看js代码。

6、多次点击撤消,表格回到早先状态

var i_statuindex = 0;var arrdata = [];var m_oTable = null;$ { //1.初始化表格 m_oTable = new TableInit; //2.初始化按钮事件 var oButtonInit = new ButtonInit; //3.日期控件的初始化 $.datetimepicker({ format: 'yyyy-mm-dd hh:ii', autoclose: true, todayBtn: true, });});//表格相关事件和方法var TableInit = function () { var oTableInit = new Object(); oTableInit.Init = function () { $.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  { oTableInit.InitDrag(); if  { var iheight = $.find(".fixed-table-container").height(); $.find(".fixed-table-container").height; } }, onCheckAll: function  { $("#tb_order_left tbody tr").addClass; }, onUncheckAll: function  { $("#tb_order_left tbody tr").removeClass; $.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  { oTableInit.InitDrop; }; oTableInit.InitDrag = function () { $('#tb_order_left tbody').draggable({ helper: "clone", start: function  { var old_left_data = JSON.stringify.bootstrapTable; var old_right_data = JSON.stringify.bootstrapTable; var odata = { index: ++i_statuindex, left_data: old_left_data, right_data: old_right_data }; arrdata.push; }, stop: function ; }; oTableInit.InitDrop = function () { $("#div_tableright div[class=fixed-table-container]").droppable({ drop: function  { var arrtr = $.find; if  { 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 = $; var uniqueid = $.attr; var rowdata = { ORDER_NO: $, BODY_NO: $, VIN: $, TM_MODEL_MATERIAL_ID: $, ORDER_TYPE: $, ORDER_STATUS: $, CREATE_DATE: $ == "-" ? null : $, PLAN_DATE: $ == "-" ? null : $, VMS_NO: $, ENGIN_CODE: $, TRANS_CODE: $, OFFLINE_DATE_ACT: $ == "-" ? null : $, HOLD_RES: $, SPC_FLAG: $, TO_ORDER_ID: uniqueid }; $.bootstrapTable("insertRow", { index: rowIndex++, row: rowdata }); $.bootstrapTable("removeByUniqueId", uniqueid); } oTableInit.InitDrag; }; oTableInit.queryParams = function  { //配置参数 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: $.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  { //配置参数 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 () { //查询点击事件 $.click { $.bootstrapTable; //重置点击事件 $.click { $.find.val; $.bootstrapTable; //插单操作点击事件 $.click; //撤销操作点击事件 $.click { if  { return; } for (var i = 0; i < arrdata.length; i++) { if (arrdata[i].index != i_statuindex) { continue; } var arr_left_data = eval; var arr_right_data = eval(arrdata[i].right_data); $.bootstrapTable; $.bootstrapTable; $.bootstrapTable('append', arr_left_data); for (var x = 0; x < arr_right_data.length; x++) { $.bootstrapTable("insertRow", { index: x, row: arr_right_data[x] }); } //$.bootstrapTable('append', arr_right_data);//append之后不能drop break; } i_statuindex--; //重新注册可拖拽 m_oTable.InitDrag(); //m_oTable.InitDrop; }; return oInit;};

二、代码示例接到急需的首先深感是理所应当上Bootstrap table api里面找一下,终究开源的技巧是强有力的,也许有相关的躬行实践呢。经过后生可畏番搜寻,很缺憾,Bootstrap Table没有这种两张表格之间的操作。思考实在也足以领略,Bootstrap Table是本着有些动态表格数据绑定的,它的本位是表格内部的功能,举个例子表格内部行的拖拽排序有很好的缓和方案,对于像博主那样的相当要求,好似也应当自个儿去贯彻。1、须要深入分析既是决定自己去写,开首解析必要,就好像这些操作里面临比劳顿的是拖拽效果,谈到拖拽效果,原本选择JsPlumb的时候那使用太多了,于是就想到了大家巧妙的JQuery UI里面包车型客车draggable.js 和droppable.js。拖拽的主题素材迎刃而解了,那么还大概有叁个难点,就是收回操作如何做?大家领略Ctrl+z的情致是恢复,什么叫过来?就是重回到上一步的操作,那么前提是要力所能致保留上一步的情形,谈起保存某一步的情事,博主就知道如何是好了,供给二个大局变量Json,里面要有七个键值对,分别是时下步骤的目录、左侧表格的数据、侧边表格的数据。好似也不太难嘛,就此起首,开干。2、代码示例2.1 cshtml页面代码

1、注册右边可拖拽

 @ViewBag.Title @Styles.Render @Styles.Render("~/Content/table-css") @Scripts.Render @Scripts.Render @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/bootstrap-table") @RenderSection @RenderBody() @{ 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")  查询条件    订单号      车身号      VIN码      发动机号         导入时间      至      下发时间      至        整车编码      VMS号      变速箱号         查询 重置       展开 @**@  撤销   插单       
$('#tb_order_left tbody').draggable({ helper: "clone", start: function  { var old_left_data = JSON.stringify.bootstrapTable; var old_right_data = JSON.stringify.bootstrapTable; var odata = { index: ++i_statuindex, left_data: old_left_data, right_data: old_right_data }; arrdata.push; }, stop: function ;

2.2 js代码

此处代码很简单,首要做了两件事:

var i_statuindex = 0;//此数组用于保存撤销操作每一步的数据var arrdata = [];var m_oTable = null;$ { //1.初始化表格 m_oTable = new TableInit; //2.初始化按钮事件 var oButtonInit = new ButtonInit; //3.日期控件的初始化 $.datetimepicker({ format: 'yyyy-mm-dd hh:ii', autoclose: true, todayBtn: true, });});//表格相关事件和方法var TableInit = function () { var oTableInit = new Object(); oTableInit.Init = function () { //初始化左边表格 $.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  { //表格加载完成之后初始化拖拽 oTableInit.InitDrag; //初始化右边表格 $.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  { oTableInit.InitDrop; }; //注册表格行的draggable事件 oTableInit.InitDrag = function () { $.draggable({ helper: "clone", start: function  { var old_left_data = JSON.stringify.bootstrapTable; var old_right_data = JSON.stringify.bootstrapTable; var odata = { index: ++i_statuindex, left_data: old_left_data, right_data: old_right_data }; arrdata.push; }, stop: function ; }; //注册右边表格的droppable事件 oTableInit.InitDrop = function () { $.droppable({ drop: function  { var arrtd = $.find; var rowdata = { ORDER_NO: $, BODY_NO: $, VIN: $, TM_MODEL_MATERIAL_ID: $, ORDER_TYPE: $, ORDER_STATUS: $, CREATE_DATE: $ == "-" ? null : $, PLAN_DATE: $ == "-" ? null : $, VMS_NO: $, ENGIN_CODE: $, TRANS_CODE: $, OFFLINE_DATE_ACT: $ == "-" ? null : $, HOLD_RES: $, SPC_FLAG: $, TO_ORDER_ID: $.attr }; 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); } //插入右边表格指定位置行数据 $.bootstrapTable("insertRow", { index: rowIndex, row: rowdata }); $.bootstrapTable("removeByUniqueId", $.attr; oTableInit.InitDrag; }; oTableInit.queryParams = function  { //配置参数 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: $.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  { //配置参数 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 () { //查询点击事件 $.click { $.bootstrapTable; //重置点击事件 $.click { $.find.val; $.bootstrapTable; //撤销操作点击事件 $.click { if  { return; } for (var i = 0; i < arrdata.length; i++) { if (arrdata[i].index != i_statuindex) { continue; } var arr_left_data = eval; var arr_right_data = eval(arrdata[i].right_data); $.bootstrapTable; $.bootstrapTable; $.bootstrapTable('append', arr_left_data); for (var x = 0; x < arr_right_data.length; x++) { $.bootstrapTable("insertRow", { index: x, row: arr_right_data[x] }); } //$.bootstrapTable('append', arr_right_data);//append之后不能drop break; } i_statuindex--; //重新注册可拖拽 m_oTable.InitDrag(); //m_oTable.InitDrop; //搜索栏展开收起点击事件 $.click { if  == "收起") { $.html; $.collapse; } else { $.html; $.collapse; }; return oInit;};

挂号tbody的可拖拽,同样适用的JQuery UI的draggable事件。

我们根本来看多少个地点的代码:2.2.1 左边表格加载成功之后推行表格行的可拖拽。

在开班拖拽前,保存两边表格的数额,用于恢复生机的操作。

$.draggable({ helper: "clone", start: function  { var old_left_data = JSON.stringify.bootstrapTable; var old_right_data = JSON.stringify.bootstrapTable; var odata = { index: ++i_statuindex, left_data: old_left_data, right_data: old_right_data }; arrdata.push; }, stop: function ;

2、注册右侧drop

在draggable的start事件中,大家将拖拽以前的左右报表中的数据总体保留到arrdata变量中,i_statuindex这几个全局变量用于记录当前这一步的目录,用于撤消操作。2.2.2 左边表格在加载成功之后注册表格的droppable事件

 $("#div_tableright div[class=fixed-table-container]").droppable({ drop: function  { var arrtr = $.find; if  { 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 = $; var uniqueid = $.attr; var rowdata = { ORDER_NO: $, BODY_NO: $, VIN: $, TM_MODEL_MATERIAL_ID: $, ORDER_TYPE: $, ORDER_STATUS: $, CREATE_DATE: $ == "-" ? null : $, PLAN_DATE: $ == "-" ? null : $, VMS_NO: $, ENGIN_CODE: $, TRANS_CODE: $, OFFLINE_DATE_ACT: $ == "-" ? null : $, HOLD_RES: $, SPC_FLAG: $, TO_ORDER_ID: uniqueid }; $.bootstrapTable("insertRow", { index: rowIndex++, row: rowdata }); $.bootstrapTable("removeByUniqueId", uniqueid); } oTableInit.InitDrag;
$.droppable({ drop: function  { var arrtd = $.find; var rowdata = { ORDER_NO: $, BODY_NO: $, VIN: $, TM_MODEL_MATERIAL_ID: $, ORDER_TYPE: $, ORDER_STATUS: $, CREATE_DATE: $ == "-" ? null : $, PLAN_DATE: $ == "-" ? null : $, VMS_NO: $, ENGIN_CODE: $, TRANS_CODE: $, OFFLINE_DATE_ACT: $ == "-" ? null : $, HOLD_RES: $, SPC_FLAG: $, TO_ORDER_ID: $.attr }; 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); } $.bootstrapTable("insertRow", { index: rowIndex, row: rowdata }); $.bootstrapTable("removeByUniqueId", $.attr; oTableInit.InitDrag;

这里代码和事前有一点变化

在drop事件时,取到当前拖过来的行数据,总结当前鼠标所在的地点,在侧面表格内定地点插入拖过来的行数据。然后删除右边表格拖过来的行数据。2.2.3 撤除操作代码

注册#div_tableright div[class=fixed-table-container]标签的droppable,这一个标签是Bootstrap Table表格早先化后自动生成的,为啥不直接登记表格#tb_order_right的droppable,是因为这一个标签成效域太小,会促成拖过来的tbody捕捉不到drop事件。而注册表拾壹分公司的#div_tableright div[class=fixed-table-container]以此div标签可以解决难题。

//撤销操作点击事件 $.click { if  { return; } for (var i = 0; i < arrdata.length; i++) { if (arrdata[i].index != i_statuindex) { continue; } var arr_left_data = eval; var arr_right_data = eval(arrdata[i].right_data); $.bootstrapTable; $.bootstrapTable; $.bootstrapTable('append', arr_left_data); for (var x = 0; x < arr_right_data.length; x++) { $.bootstrapTable("insertRow", { index: x, row: arr_right_data[x] }); } //$.bootstrapTable('append', arr_right_data);//append之后不能drop break; } i_statuindex--; //重写注册可拖拽 m_oTable.InitDrag;

经过var arrtr = $.find;找到拖过来tbody里面选中的行,然后将数据抽取依次插入右侧表格,左侧表格则相继删除行数据。

注销操作首假如通过全局变量arrdata里面包车型客车目录判定打消往哪一步,然后依照目录收取当前步骤的左右表格数据,依次向两报表插入数据,然后i_statuindex依次依次减少,直至等于零,由于侧边表格行数据总体重写加载过,所以供给再行挂号可拖拽事件。就是如此简单的三步就能够促成想要的作用,是还是不是很简短~~

此地有一点麻烦的是找drop的职位,大家精通,要想将左边手选中的行放到左边手钦赐的岗位,那么就得获得当前鼠标drop的职分,这里通过ui.helper[0].offsetTop属性来获取鼠标的Y轴位置,通过测算得到要插入的职务。

假定大家还想深刻学习,能够点击这里张开学习,再为我们附七个地道的专项论题:Bootstrap学习教程Bootstrap实战教程

3、撤消操作

上述正是本文的全部内容,希望对我们的读书抱有助于。

 $.click { if  { return; } for (var i = 0; i < arrdata.length; i++) { if (arrdata[i].index != i_statuindex) { continue; } var arr_left_data = eval; var arr_right_data = eval(arrdata[i].right_data); $.bootstrapTable; $.bootstrapTable; $.bootstrapTable('append', arr_left_data); for (var x = 0; x < arr_right_data.length; x++) { $.bootstrapTable("insertRow", { index: x, row: arr_right_data[x] }); } //$.bootstrapTable('append', arr_right_data);//append之后不能drop break; } i_statuindex--; //重写注册可拖拽 m_oTable.InitDrag(); //m_oTable.InitDrop;

废除操作和此前也基本雷同。

四、总结效率是成功了,白圭之玷的是历次拖过去的都以任何tbody,并非选中的行,奈何多少个当选的行不能用某多个容器包起来。权且没找到切合的应用方案。先那样吧,等之后想到好的方案了再优化吧。

五、优化方案

1、注册drap的方法

oTableInit.InitDrag = function () { $('#tb_order_left tbody').draggable({ helper: "clone", start: function  { var old_left_data = JSON.stringify.bootstrapTable; var old_right_data = JSON.stringify.bootstrapTable; var odata = { index: ++i_statuindex, left_data: old_left_data, right_data: old_right_data }; arrdata.push; $.find("tr[class!=selected]").remove(); }, stop: function ; };

扩张了这一句$.find("tr[class!=selected]"卡塔尔.remove(卡塔尔;那样在拖动的时候就看不到未选中的行了。2、精准定位到右电子表格内定地点:

oTableInit.InitDrop = function () { $("#div_tableright div[class=fixed-table-container]").droppable({ drop: function  { var arrtr = $.find; if  { 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 += $; if  { rowIndex = i; bIsBottom = false;//这里参数用来定义拖动到右边表格最下面的情况,这时没有进入到此条件判断里面。 break; } } if  { rowIndex = trs.length; } for (var i = 0; i < arrtr.length; i++) { var arrtd = $; var uniqueid = $.attr; var rowdata = { ORDER_NO: $, BODY_NO: $, VIN: $, TM_MODEL_MATERIAL_ID: $, ORDER_TYPE: $, ORDER_STATUS_NAME: $, CREATE_DATE: $ == "-" ? null : $, PLAN_DATE: $ == "-" ? null : $, VMS_NO: $, ENGIN_CODE: $, TRANS_CODE: $, OFFLINE_DATE_ACT: $ == "-" ? null : $, HOLD_RES: $, SPC_FLAG: $, TO_ORDER_ID: uniqueid, ORDER_STATUS:0 }; $.bootstrapTable("insertRow", { index: rowIndex++, row: rowdata }); $.bootstrapTable("removeByUniqueId", uniqueid); } oTableInit.InitDrag; };

因为每生龙活虎行的行高不显明,是由行里面包车型客车多少动态撑出来的,所以那边也动态计算drop的岗位。

至此,那些小的意义为主结束,基本的法力和待优化点也成就了。

源码下载:Bootstrap Table表格多行拖拽效果

假定我们还想深刻学习,能够点击这里张开课习,再为我们附七个精美的专项论题:Bootstrap学习课程 Bootstrap实战教程

如上就是本文的全体内容,希望本文所述对大家学习javascript程序设计具有助于。

本文由澳门太阳娱乐手机登录发布于关于计算机,转载请注明出处:JS组件Bootstrap Table表格多行拖拽效果实现代码_j

关键词: