一、完整的示例代码：（请使用layui v2.8.3的版本）看懂就能用、不要照搬、照搬会出错误、拷贝重要代码改改符合你自己的需求。
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>附件列表</title> <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="/libs/layui/v2.8.3/css/layui2.css"> <link rel="stylesheet" href="/libs/layui/soulTable.css"> <!--<link rel="stylesheet" href="/libs/layui/plugins/formSelects/formSelects-v4.css">--> <link rel="stylesheet" href="/jruntime/views/layui/css/base.css"> <link rel="stylesheet" href="/libs/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/libs/layui/v2.8.3/css/modules/layer.css"> <!--<link rel="stylesheet" href="/libs/jstree_dark/dist/themes/default/style.min.css"/>--> <style> *::-webkit-scrollbar { /*滚动条整体样式*/ width :10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 10px; } .imxCheckbox{ cursor: default; } .layui-form-item .layui-inline { margin-bottom: -2px; } .v_date { cursor: pointer; width: 100%; height: 30px; } .layui-bg-gray { background-color: #efefef!important; color: #666!important; } .div-file-search{ position: absolute; top:20px; right: 30px; } .div-file-search button{ background: linear-gradient(to right, #0984e3 0%,#3aaaff 100%); } </style> </head> <body> <div id='frm-imp' style = "display : none ;height:150px" > <div class="layui-card-body" > <div class="layui-row"> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12"> <button type="button" class="layui-btn" id="btn-imp-template-download" ><a href="/dcs/fileGL_V2/download/文件数据导入模板.xls">下载模板</a></button> <button type="button" class="layui-btn" id="btn-imp-data-check" onclick="javasctip:window.fn_chk_data();">检查数据</button> <button type="button" class="layui-btn" id="btn-imp-data" onclick="javasctip:window.fn_imp_data();">导入数据</button> </div> </div> <div class="layui-row"> <div class="layui-form-item layui-form-text"> </div> </div> <div class="layui-row"> <div class="layui-col-xs12 layui-col-sm12 layui-col-md12"> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">导入描述</label> <div class="layui-input-block"> <textarea placeholder="" class="layui-textarea" style="height: 300px" name="desc"> 导入说明： 1.使用【下载模板】功能下载模板。 2.在模板中整理数据,一定不要改标题名称，列顺序可以更改。 3.执行【导入数据】功能将将整理后的数据导入。 注意事项： 1.数据要顶格放，顶部不要留空行，第一行放标题，第二行开始放数据 2.数据列顺序可以不一致，但标题必须一致！ 3.导入数据缺少数据完整性验证，导入的单据必须重新审核一遍！ </textarea> </div> </div> </div> </div> </div> </div> <!--查询区块--> <div class="layui-bg-gray"> <div class="" style="background-color: #fff;"> <div class="layui-col-md12"> <div class="layui-panel"> <form id="formWhereData" class="layui-form" lay-filter="layForm"> <div style="height: 20px;"></div> <div class="layui-row"> <div class="layui-col-xs3 layui-col-sm3 layui-col-md3" style="display: none;"> <div class="layui-form-item"> <label class="layui-form-label" style="width: 100px;">全文内容:</label> <div class="layui-input-block"> <input type="text" id="txt_Context" autocomplete="off" placeholder="请输入关键字" class="layui-input"> </div> </div> </div> <div class="layui-col-xs3 layui-col-sm3 layui-col-md3"> <div class="layui-form-item"> <label class="layui-form-label" style="width: 110px;">查询字段</label> <div class="layui-input-block"> <select id="txt_Key" lay-filter="select_key"> <option value="">--请选择--</option> </select> </div> </div> </div> <div class="layui-col-xs1 layui-col-sm1 layui-col-md1"> <div class="layui-form-item"> <!--<label class="layui-form-label">风险名称</label>--> <div class="layui-input-block" style="margin-left: 20px;"> <select id="txtFuHao"> <option value="包含">包含</option> <option value="等于">等于</option> <option value="范围">范围</option> <option value="大于">大于</option> <option value="小于">小于</option> <option value="大于等于">大于等于</option> <option value="小于等于">小于等于</option> <option value="不等于">不等于</option> <option value="不包含">不包含</option> <option value="字符开始">字符开始</option> <option value="字符结束">字符结束</option> </select> </div> </div> </div> <div class="layui-col-xs2 layui-col-sm2 layui-col-md2"> <div class="layui-form-item"> <div class="layui-input-block" style="margin-left: 20px;"> <input type="text" id="txt_Value" autocomplete="off" class="layui-input"> <input type="text" id="txt_Value_Time" autocomplete="off" class="layui-input" style="display: none;"> </div> </div> </div> <div class="layui-col-xs1 layui-col-sm1 layui-col-md1" style="max-width: 30px;"> <div class="layui-form-item" style="margin-left: 0px;"> <div class="layui-input-block" style="margin-left: 0px;"> <button type="button" class="btn dropdown-toggle edb-nav-btn" id="txtKeyList" data-toggle="dropdown" style="height: 38px;"> <span class="caret"></span> </button> <ul class="dropdown-menu pull-right" style="max-height:400px; max-width:800px; overflow:auto"> <li id="Li2"><a href="#">无</a></li> </ul> </div> </div> </div> <div class="layui-col-xs2 layui-col-sm2 layui-col-md2"> <div class="layui-form-item" style="margin-left: 20px;"> <button type="button" class="layui-btn" id="btn-query">查询</button> <button type="button" class="layui-btn layui-btn-primary" id="btn-reset">重置</button> </div> </div> </div> <div style="height: 16px;"></div> </form> <div class="div-file-search"> <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="btn-all-recall"><i class="fa fa-clipboard"></i> 全文检索</button> </div> </div> </div> </div> </div> <!--文件区块--> <div class="layui-bg-gray"> <div class="layui-row layui-col-space15" style="margin-top: 15px"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header"> <i class="fa fa-table"></i> 数据列表 </div> <div class="layui-card-body imxList" style="padding: 3px 15px;"> <div class="edb-toolbar-2017"> <span id="btntable-add" class="edb-nav-btn"> <i class="fa fa-plus-square"></i> <span>新增</span> </span> <span id="btntable-edit" class="edb-nav-btn"> <i class="fa fa-edit"></i> <span>编辑</span> </span> <span id="btntable-del" class="edb-nav-btn"> <i class="fa fa-remove"></i> <span>删除</span> </span> <span id="btntable-refresh" class="edb-nav-btn"> <i class="fa fa-refresh"></i> <span>刷新</span> </span> <span id="btntable-move" class="edb-nav-btn"> <i class="fa fa-paper-plane"></i> <span>批量迁移</span> </span> <span id="btntable-upload" class="edb-nav-btn"> <i class="fa fa-upload"></i> <span>上传</span> </span> <span id="btntable-import" class="edb-nav-btn"> <i class="fa fa-upload"></i> <span>导入数据</span> </span> <span id="btntable-export" class="edb-nav-btn"> <i class="fa fa-download"></i> <span>导出数据</span> </span> <!--<span id="btntable-mult-time" class="edb-nav-btn">--> <!--<i class="fa fa-check-square-o"></i>--> <!--<span>批量修改有效时间</span>--> <!--<div class="layui-mult-time" style="display: none;"></div>--> <!--</span>--> <span id="btntable-history" class="edb-nav-btn"> <i class="fa fa-history"></i> <span>历史文件</span> </span> <span id="btntable-modify" class="edb-nav-btn"> <i class="fa fa-pencil"></i> <span>修改文件</span> </span> </div> <div style="margin-top:-5px;padding: 2px;"> <table id="tablemodel" lay-filter="tablemodelTable"></table> </div> </div> </div> </div> </div> </div> <!--批量迁移--> <div id='frm-modify-move' style = "display : none ;height:500px" scrolling=no> <table height="100%" width="100%"> <tr><td height="100%"> <iframe frameborder=0 height="100%" style="padding: 10px;" width="100%" scrolling=no ></iframe> </td></tr> </table> </div> <script src="/libs/jquery/jquery-3.2.1.min.js"></script> <script src="/libs/bootstrap/js/bootstrap.js"></script> <script src="/libs/layui/v2.8.3/layui.js"></script> <script src="/libs/layer3.1.1/layer.js"></script> <script src="/jruntime/views/core/core.js"></script> <script src="/libs/split/split.min.js"></script> <script src="/pub/comuse/comuse.js"></script> <script src="/pub/comuse/module_common_method.js"></script> <script src="/mpv/libs/mpvLyComon.js"></script> <script type="text/html" id="ahtmltp"> <a class="layui-table-link" TITLE="{{d.CNAME?d.CNAME:''}}" lay-event="view">{{d.CNAME?d.CNAME:''}}</a> </script> <script type="text/html" id="bars"> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">修改</a> <a class="layui-btn layui-btn-xs" lay-event="preview">预览</a> <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="view">下载</a> <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a> </script> <script type="text/html" id="bars_view"> <a class="layui-btn layui-btn-xs" lay-event="preview">预览</a> <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="view">下载</a> </script> <script> var imx_bt=pub.Convert.fn_ConvertToString(jYd.form.getQueryString("bt")); var imx_ID=pub.Convert.fn_ConvertToString(jYd.form.getQueryString("id")); var imx_action=pub.Convert.fn_ConvertToString(jYd.form.getQueryString("action")); var imx_name=pub.Convert.fn_ConvertToString(jYd.form.getQueryString("name")); var _formMode=""; if(imx_action=="view"){ $("#btntable-upload" + ",#btntable-del" + ",#btntable-add" + ",#btntable-edit" + ",#btntable-move" + ",#btntable-import" + ",#btntable-export" + ",#btntable-history" + ",#btntable-modify" + ",#btntable-mult-time" + "").hide(); _formMode=jYd.form.Mode.View; }else{ _formMode=jYd.form.Mode.Modify; } if(imx_ID){ $("#btntable-config").show(); } window.fn_预览文件_VIEW=function(fileType,id){ var v_url="/dcs/fileViewV2/file_prew.html?type={0}&id={1}".format(fileType,id); jYd.fnOpenWindow(v_url, '预览文件', {width: '100%', height: '100%'} ,function () { } ); }; $(document).ready(function () { /***重新渲染序号***/ window.fn_重新渲染序号=function(){ var jparams =[]; jparams.push(imx_bt); var _api="com.dcs.bapi.TrainPlanManager.BAPI_Check_法规制度_数据"; jYd.fnAjax(jparams,_api,function (ret) { }); }; // window.fn_重新渲染序号(); var _full="full-200"; var _col=[[ {type: "checkbox", fixed: "left", width: 50}, {field: 'ID', title: 'ID',hide: true}, {type: "numbers",title:'序号', width: 50}, {field: 'CNAME', title: '名称', minWidth: 600, align: 'left',sort:true}, {field: 'PNAME', title: '目录', minWidth: 100, align: 'left',sort:true}, {field: 'DOC_TYPE_NAME', title: '主题分类', minWidth: 130, align: 'left',sort:true}, {field: 'DOC_PUBLISH_DPT_NAME', title: '发布部门', minWidth: 150, align: 'center',sort:true}, {field: 'DOC_LSSUED_NUMBER', title: '发文字号', minWidth: 120, align: 'center',sort:true}, {field: 'DOC_PUBLISH_TIME', title: '发布日期', minWidth: 120, align: 'center',templet:function (d) { if(d.DOC_PUBLISH_TIME){ return d.DOC_PUBLISH_TIME.substring(0,10); }else{ return ""; } },sort:true}, {field: 'DOC_STATUS_NAME', title: '状态', minWidth: 100, align: 'center',sort:true}, {field: 'DOC_CORP_SUIT', title: '公司适用', minWidth: 100, align: 'center',sort:true}, {field: 'DOC_SUIT_TERM', title: '适用条例', minWidth: 100, align: 'center',sort:true}, {field: 'DOC_SUIT_DPT_NAME', title: '适用部门', minWidth: 100, align: 'center',sort:true}, // {field: 'IORDER', title: '文件序号', minWidth: 100, align: 'left'} ]]; if(imx_action=="view"){ _col[0].push({title: '操作', width:150, align:'center',fixed:'right', toolbar: '#bars_view'}); }else{ _col[0].push({ title: '操作', width:220, align:'center',fixed:'right', toolbar: '#bars'}); } //查询条件 window.fn_wherejson=function(action) { var _queryList=[]; fn_wheresql(_queryList); var _op=$("#txtFuHao").val(); var _name=$("#txt_Key").val(); var _value=""; if($("#txt_Value").css("display")=="none"){ _value=$("#txt_Value_Time").val(); }else{ _value=$("#txt_Value").val(); } _queryList.push({type:iMx.fn_fix_type_未知(_name),op:_op,name:_name,value:_value}); if($("#txt_Context").val()!=""){ _queryList.push({type:"全文检索",op:"等于",name:"全文检索",value:$("#txt_Context").val()}); } var _array=[]; if(window.parent._childIDs){ var _childIDs=window.parent._childIDs; for(var i=0;i<_childIDs.length;i++){ _array.push({type:"string",name:"PID",op:'等于',value:_childIDs[i]} ); } _queryList.push({type:'block',op:'or',value:_array}); } _queryList.push({type:"未知",op:"不等于",name:"NODE_TYPE",value:"目录"}); return pub.JSONEx.fn_ToString(_queryList); }; //查询条件 function fn_wheresql(_queryList){ _queryList.push({type:"string",name:"TYPE",value:imx_bt}); } // 自定义模块，这里只需要开放soulTable即可 // 自定义模块，这里只需要开放soulTable即可 layui.config({ base: '/libs/layui/', // 第三方模块所在目录 version: 'v1.8.0' // 插件版本号 }).extend({ soulTable: 'soulTable/soulTable', tableChild: 'soulTable/tableChild', tableMerge: 'soulTable/tableMerge', tableFilter: 'soulTable/tableFilter', excel: 'soulTable/excel' }).use(['form', 'table','soulTable'], function () { var table = layui.table, form = layui.form, soulTable = layui.soulTable; /***文件表格初始化**/ window.fn_load_table_data=function() { //-------初始化 var v_filter=window.fn_wherejson(""); var v_order=' CODEPATH ASC, IORDER DESC '; var __params=[]; __params.push(v_filter); __params.push(v_order); var __where = {}; __where.token = pub.State.Ticket; __where.data=pub.JSONEx.fn_ToString(__params); __where.api="com.dcs.bapi.AQMaterManager.BAPI_查询_安全资料_附件"; window.table_data=__where.data; table.render({ elem: '#tablemodel', url: '/imx/sys/layui_table_bapi', method: 'POST', height:_full, cols:_col , page: true, limit:25, limits: [25 , 50, 100, 500, 1000,5000], even: true, id: "tablemodelTable", where: __where, request: { pageName: 'pageIndex', //page limitName: 'pageSize' //limit }, rowDrag: {trigger: 'row', done: function(obj) { // 完成时（松开时）触发 // 如果拖动前和拖动后无变化，则不会触发此方法 // console.log(obj.row) // 当前行数据 // console.log(obj.cache) // 改动后全表数据 // console.log(obj.oldIndex) // 原来的数据索引 // console.log(obj.newIndex) // 改动后数据索引 //全表数据 var objList=obj.cache; //当前拖拽row var oldRow=obj.row; var dataObject={}; dataObject["ID"]=oldRow["ID"]; if(obj.newIndex==0){ dataObject["IORDER"] = Number(objList[obj.newIndex+1]["IORDER"])-1;//新序号 }else if(obj.newIndex==objList.length){ dataObject["IORDER"] = Number(objList[obj.newIndex-1]["IORDER"])+1;//新序 }else if(obj.newIndex>obj.oldIndex){ dataObject["IORDER"] = Number(objList[obj.newIndex-1]["IORDER"])+1;//新序号 }else{ dataObject["IORDER"] = Number(objList[obj.newIndex+1]["IORDER"])-1;//新序号 } // console.log(JSON.stringify(dataObject)); fnOneRowDoIDCU("PUB_FILES","Modify",JSON.stringify(dataObject),function(){ window.fn_重新渲染序号(); }); }}, done: function(res, curr, count){ table.resize("tablemodelTable"); //重置表格尺寸 //开启列拖拽 if(imx_action!="view"){ soulTable.render(this); soulTable.suspend('tablemodelTable', 'drag', false);//true 关闭列拖拽! false 开启列拖拽! soulTable.suspend('tablemodelTable', 'rowDrag', false);//true 关闭行拖拽! false 开启行拖拽! fn_click_date_time(); } } }); }; /***监听工具条***/ table.on('tool(tablemodelTable)', function(obj){ var data = obj.data; if(obj.event =='edit'){ var url=""; url = "/dcs/fileGL_V2/fileGl_file_card.html?action={0}&id={1}&bt={2}"; url = url.format(jYd.form.Mode.Modify,data["ID"],imx_bt); jYd.fnOpenWindow(url, '编辑', {width: '60%', height: '85%'} ,function () { window.fn_load_table_data(); } ); } else if(obj.event =='del'){ fn_批量删除(data["ID"],1); } else if(obj.event == 'view'){ var _id=obj.data["ID"]; var url="/download?file={0}&token={1}".format(_id,encodeURIComponent(sessionStorage.getItem("_pub_token"))); window.open(decodeURI(url)); }else if(obj.event=="preview"){ var file=data["FILE_TYPE"]; if(file=="pdf" || file=="PDF"){ window.fn_预览文件_VIEW(data["FILE_TYPE"],data["ID"]) }else{ iMx.fn_attachment_priview(data["FILE_TYPE"],data["ID"]); } } }); /***双击row***/ table.on('rowDouble(tablemodelTable)', function (obj) { if(obj.data["FILE_TYPE"]=="pdf" || obj.data["FILE_TYPE"]=="PDF"){ window.fn_预览文件_VIEW(obj.data["FILE_TYPE"],obj.data["ID"]) }else{ iMx.fn_attachment_priview(obj.data["FILE_TYPE"],obj.data["ID"]); } }); /***编辑***/ $("#btntable-edit").off("click").on("click",function () { var checkStatus = table.checkStatus('tablemodelTable'); var selecteds = checkStatus.data; if(selecteds.length==1){ var url=""; url = "/dcs/fileGL_V2/fileGl_file_card.html?action={0}&id={1}&bt={2}"; url = url.format(jYd.form.Mode.Modify,selecteds[0].ID,imx_bt); jYd.fnOpenWindow(url, '编辑', {width: '60%', height: '85%'} ,function () { window.fn_load_table_data(); } ); } else{ layer.alert("请选择一条记录"); } }); //region 查询key form.render(); fn_setField_select(); //使用列信息给查询字段赋值 function fn_setField_select(){ $("#txt_Key").empty(); var col=_col[0]; for (var i = 0; i <= col.length - 1; i++) { var __field = pub.Convert.fn_ConvertToString(col[i].field); var __title = pub.Convert.fn_ConvertToString(col[i].title); if (__field == "") continue; if (__field == "ID") continue; if (__title == "操作") continue; $("#txt_Key").append(" <option value='" + __field + "'>" + __title+ "</option>"); layui.form.render("select"); } fnUpdateKeyList(); window.fn_load_table_data(); } //查询keyList function fnUpdateKeyList() { var __value =$("#txt_Key").val(); $("#txtKeyList").parent(".layui-input-block").find(".dropdown-menu").empty(); if (__value == "") return; iMx.fn_set_select_fuhao_default_value(__value); var jparams =[]; jparams.push(__value); jparams.push(window.fn_wherejson()); var _api="com.dcs.bapi.AQMaterManager.BAPI_查询_安全资料_KeyList"; jYd.fnAjax(jparams,_api,function (ret) { var __dtKeyList=ret.json; //----------------- $("#txtKeyList").parent(".layui-input-block").find(".dropdown-menu").empty(); for (var i = 0; i <= __dtKeyList.length - 1; i++) { var __value1 = pub.Convert.fn_ConvertToString(__dtKeyList[i].CNAME); $("#txtKeyList").parent(".layui-input-block").find(".dropdown-menu").append(" <li ><a href='#' fieldname='" + __value1 + "'>" + __value1 + "</a></li>"); } //----------------- $("#txtKeyList").parent(".layui-input-block").find(".dropdown-menu").find("li").off("click").on("click", function (e) { var __keyListCur = pub.Convert.fn_ConvertToString($(this).find("a").attr("fieldname")); pub.DOM.fn_SetValueByID("#txt_Value", __keyListCur); pub.DOM.fn_SetValueByID("#txt_Value_Time", __keyListCur); pub.DOM.fn_SetTextByID("#txt_Value", __keyListCur); e.stopPropagation(); e.preventDefault(); $("#txtKeyList").click(); }) }); } form.on('select(select_key)', function(data){ fnUpdateKeyList(); }); //endregion 查询 key }); /***新增***/ $("#btntable-add").off("click").on("click",function () { var url=""; url = "/dcs/fileGL_V2/fileGl_file_card.html?action={0}&id={1}&pname={2}&pid={3}&bt={4}"; url = url.format(jYd.form.Mode.Add,"",imx_name,imx_ID,imx_bt); jYd.fnOpenWindow(url, '新增', {width: '60%', height: '85%'} ,function () { window.fn_重新渲染序号(); window.fn_load_table_data(); } ); }); /***上传文件***/ $("#btntable-upload").on("click",function () { var url=""; url = "/dcs/upload/aqzl_file.html?type={0}&id={1}&bt={2}"; var bt=imx_ID+";"+imx_name+";文件"; url = url.format(encodeURIComponent(imx_bt),imx_ID,bt); jYd.fnOpenWindow(url, '上传附件', {width: '60%', height: '70%'} ,function () { window.fn_重新渲染序号(); window.fn_load_table_data(); } ); }); /***查询***/ $("#btn-query").on("click", function (e) { window.fn_load_table_data(); }); /***刷新****/ $("#btntable-refresh").on("click", function (e) { window.fn_load_table_data(); }); /***重置***/ $("#btn-reset").on("click", function (e) { $("#formWhereData")[0].reset(); }); /***批量删除***/ $("#btntable-del").on("click",function (e) { var checkstatus = layui.table.checkStatus('tablemodelTable'); if (checkstatus==null||checkstatus==undefined ||checkstatus.data.length<=0) { layer.msg("请先选择要删除的行！"); return; } window._curNode=checkstatus.data[0]; var __ids=""; for(var i=0;i<checkstatus.data.length;i++) { if (__ids == "") { __ids = checkstatus.data[i]["ID"]; } else { __ids = __ids + "," + checkstatus.data[i]["ID"]; } } fn_批量删除(__ids,checkstatus.data.length); }); function fn_批量删除(__ids,v_num) { top.layer.confirm('确认要删除选择的'+v_num+'个附件吗？',{zIndex:top.layer.zIndex}, function(index){ top.layer.close(index); var jparams =[]; jparams.push(__ids); var _api="com.dcs.bapi.AQMaterManager.BAPI_删除_安全资料"; jYd.fnAjax(jparams,_api,function (ret) { layer.msg(ret.message); window.fn_重新渲染序号(); window.fn_load_table_data("refresh"); }); }); } //region 历史文件 /***历史文件***/ $("#btntable-history").on("click",function () { var _rows=McoM.fn_get_select_row_layuiTable();//选择行 if(_rows.length<=0){ iMx.fn_show_layer_tip("请选择需要操作的文件"); return; } var _fieldId=_rows[0]["ID"]; var url = "/pub/attachment/history_file_list.html?action={0}&masterId={1}"; url = url.format(_formMode,_fieldId); jYd.fnOpenWindow(url, '历史文件列表', {width: '70%', height: '85%'} ,function () { //关闭layer页面回调 McoM.fn_close_layer_page_fnCallBack(function () { window.fn_load_table_data("query"); }); }); }); /***修改文件***/ $("#btntable-modify").on("click",function () { var _rows=McoM.fn_get_select_row_layuiTable();//选择行 if(_rows.length<=0){ iMx.fn_show_layer_tip("请选择需要修改文件的行"); return; } var _data=_rows[0]; McoM.fn_upload_update_attachment(_data,function () { window.fn_load_table_data("query"); McoM.fn_insert_data_to_history_table(); //向历史表中插入数据 });//修改上传文件 }); /***批量迁移***/ $("#btntable-move").on("click",function (e) { var checkstatus = layui.table.checkStatus('tablemodelTable'); if (checkstatus==null||checkstatus==undefined ||checkstatus.data.length<=0) { layer.msg("请先选择要迁移文件！"); return; } var v_url="/dcs/aqzl_fjv2/selector_aqzlfile_orgright.html?allow_leaf_only=0&bt={0}"; v_url=v_url.format(imx_bt); $("#frm-modify-move").find("iframe").attr("src",v_url); var __ids=""; for(var i=0;i<checkstatus.data.length;i++) { if (__ids == "") { __ids = checkstatus.data[i]["ID"]; } else { __ids = __ids + "," + checkstatus.data[i]["ID"]; } } var __modifyfxdlayIndex= layer.open({ type: 1, title: '批量迁移', area: ['60%', '85%'], btn: ['确认', '取消'], btnAlign: 'c', // 按钮居中 content: $('#frm-modify-move').html(), success: function(layero, index){ }, yes: function(index, layero){ var __frame=$(layero).find("iframe")[0]; if(__frame.contentWindow.fn_get_selected_id().length==0){ layer.msg("没有目录,不能迁移！"); return; } var jparams =[]; jparams.push(__ids); jparams.push(__frame.contentWindow.fn_get_selected_id()); jparams.push(__frame.contentWindow.fn_get_selected_name()); var _api="com.dcs.bapi.FileDataManager.BAPI_文件迁移新的目录_ACTION"; jYd.fnAjax(jparams,_api,function (ret) { layer.msg("迁移成功!"); window.fn_重新渲染序号(); window.fn_load_table_data(); layer.close(__modifyfxdlayIndex); }); } }); }); //endregion 时间组件 ,操作方法函数 /***选择时间***/ var fn_click_date_time=function () { $(".v_date").off("click").on("click",function (e) { var id=$(this).data("id"); var field=$(this).data("field"); var v_this=this; fn_click_laydate_time(v_this,id,field,e); }); }; /***选择时间范围***/ var fn_click_laydate_time=function(v_this,id,field,e){ layui.laydate.render({ elem: v_this ,range: false ,show: true //直接显示 ,format: 'yyyy-MM-dd' ,type:"date" ,done: function(value, date){ //监听日期被切换 var dataObject={}; dataObject["ID"]=id; dataObject[field] = value; fnOneRowDoIDCU("PUB_FILES","Modify",JSON.stringify(dataObject)); } }); e.stopPropagation(); e.preventDefault(); }; /***操作方法***/ function fnOneRowDoIDCU(table,action,strData,fnok,fnerror) { var api = "com.kongzhitech.bapi.TreeMgr.BAPI_TreeDo"; var jparams =[]; jparams.push(table); jparams.push(action); jparams.push(strData); jparams.push("CNAME"); jYd.fnAjax(jparams,api,function (ret) { if (ret.success == 1) { if(fnok){ fnok(ret); } } else { if(fnerror){ fnerror(ret); } } },function (ret) { if(fnerror){ fnerror(ret); } }); } /***批量修改有效时间***/ $("#btntable-mult-time").on("click",function (e) { var checkstatus = layui.table.checkStatus('tablemodelTable'); if (checkstatus==null||checkstatus==undefined ||checkstatus.data.length<=0) { layer.msg("请先选择数据！"); return; } window._curNode=checkstatus.data[0]; layui.laydate.render({ elem: ".layui-mult-time" ,range: false ,show: true //直接显示 ,format: 'yyyy-MM-dd' ,type:"date" ,done: function(value, date){ //监听日期被切换 for(var i=0;i<checkstatus.data.length;i++) { var __ids= checkstatus.data[i]["ID"]; var dataObject={}; dataObject["ID"]=__ids; dataObject["EXPIRATION_TIME"] = value; fnOneRowDoIDCU("PUB_FILES","Modify",JSON.stringify(dataObject)); } layer.msg("批量修改成功"); window.fn_load_table_data("query"); } }); $(".layui-laydate").css({"left": "10%","top": "20%"}); e.stopPropagation(); e.preventDefault(); }); /***全文检索***/ $("#btn-all-recall").on("click",function () { var url=""; url = "/dcs/file_search/file_search.html?bt={0}"; url = url.format(encodeURIComponent(imx_bt)); jYd.fnOpenWindow(url, '全文检索', {width: '100%', height: '100%'} ,function () { } ); }); /***上传文件***/ window.fn_imp_data=function() { var url=""; url = "/dcs/upload/work_fileV2.html?vtype={0}&vid={1}&voption={2}"; url = url.format(encodeURIComponent("导入文件数据"),"",imx_bt); jYd.fnOpenWindow(url, '导入数据', {width: '60%', height: '70%'} ,function () { window.fn_重新渲染序号(); window.fn_load_table_data("init"); } ); }; window.fn_chk_data=function() { var url=""; url = "/dcs/upload/work_fileV2.html?vtype={0}&vid={1}&voption={2}&check=1"; url = url.format(encodeURIComponent("导入文件数据"),"",imx_bt); jYd.fnOpenWindow(url, '检查数据', {width: '60%', height: '70%'} ,function () { window.fn_load_table_data("init"); } ); }; $("#btntable-import").on("click",function (e) { //导入导出DIV var __impIndex= layer.open({ type: 1, title: '导入数据', area: ['600px', '500px'], btn: ['关闭'], btnAlign: 'c', // 按钮居中 content: $('#frm-imp').html(), success: function(layero, index){ }, btn1: function(index, layero){ layer.close(__impIndex); } }); }); //导出数据 $("#btntable-export").on("click",function (e) { var mc_cols=[[ {field: 'IORDER', title: '序号'}, {field: 'CNAME', title: '名称'}, {field: 'PNAME', title: '目录'}, {field: 'DOC_TYPE_NAME', title: '主题分类'}, {field: 'DOC_PUBLISH_DPT_NAME', title: '发布部门'}, {field: 'DOC_LSSUED_NUMBER', title: '发文字号'}, {field: 'DOC_PUBLISH_TIME', title: '发布日期'}, {field: 'DOC_REVISE_TIME', title: '修订日期'}, {field: 'DOC_ENABLE_TIME', title: '启用日期'}, {field: 'DOC_STATUS_NAME', title: '状态'}, {field: 'DOC_CORP_SUIT', title: '公司适用'}, {field: 'DOC_SUIT_TERM', title: '适用条例'}, {field: 'DOC_AREA', title: '生效区域'}, {field: 'DOC_INDUSTRY_NAME', title: '行业'}, {field: 'DOC_TYPE_NAME', title: '主题'}, {field: 'DOC_SUIT_DPT_NAME', title: '适用部门'}, {field: 'ID', title: 'ID'} ]]; var jparams =[]; jparams.push(pub.JSONEx.fn_ToString(mc_cols)); jparams.push(window.fn_wherejson()); var _api="com.dcs.bapi.FileDataManager.BAPI_导出文件数据"; jYd.fnAjax(jparams,_api,function (obj) { var _id=obj.data; var url="/downloadtmpfile?file={0}&token={1}".format(encodeURIComponent(_id),encodeURIComponent(sessionStorage.getItem("_pub_token"))); window.open(url); }); }); }); </script> </body> </html>二、引用的重要的文件:
- css文件：
html<link rel="stylesheet" href="/libs/layui/v2.8.3/css/layui2.css"> <link rel="stylesheet" href="/libs/layui/soulTable.css">
- js文件:
html<script src="/libs/jquery/jquery-3.2.1.min.js"></script> <script src="/libs/layui/v2.8.3/layui.js"></script>二、重要部分的代码：
1.主要代码：
javascript// 自定义模块，这里只需要开放soulTable即可 // 自定义模块，这里只需要开放soulTable即可 layui.config({ base: '/libs/layui/', // 第三方模块所在目录 version: 'v1.8.0' // 插件版本号 }).extend({ soulTable: 'soulTable/soulTable', tableChild: 'soulTable/tableChild', tableMerge: 'soulTable/tableMerge', tableFilter: 'soulTable/tableFilter', excel: 'soulTable/excel' }).use(['form', 'table','soulTable'], function () { var table = layui.table, form = layui.form, soulTable = layui.soulTable; /***文件表格初始化**/ window.fn_load_table_data=function() { //-------初始化 var v_filter=window.fn_wherejson(""); var v_order=' CODEPATH ASC, IORDER DESC '; var __params=[]; __params.push(v_filter); __params.push(v_order); var __where = {}; __where.token = pub.State.Ticket; __where.data=pub.JSONEx.fn_ToString(__params); __where.api="com.dcs.bapi.AQMaterManager.BAPI_查询_安全资料_附件"; window.table_data=__where.data; table.render({ elem: '#tablemodel', url: '/imx/sys/layui_table_bapi', method: 'POST', height:_full, cols:_col , page: true, limit:25, limits: [25 , 50, 100, 500, 1000,5000], even: true, id: "tablemodelTable", where: __where, request: { pageName: 'pageIndex', //page limitName: 'pageSize' //limit }, rowDrag: {trigger: 'row', done: function(obj) { // 完成时（松开时）触发 // 如果拖动前和拖动后无变化，则不会触发此方法 // console.log(obj.row) // 当前行数据 // console.log(obj.cache) // 改动后全表数据 // console.log(obj.oldIndex) // 原来的数据索引 // console.log(obj.newIndex) // 改动后数据索引 //全表数据 var objList=obj.cache; //当前拖拽row var oldRow=obj.row; var dataObject={}; dataObject["ID"]=oldRow["ID"]; if(obj.newIndex==0){ dataObject["IORDER"] = Number(objList[obj.newIndex+1]["IORDER"])-1;//新序号 }else if(obj.newIndex==objList.length){ dataObject["IORDER"] = Number(objList[obj.newIndex-1]["IORDER"])+1;//新序 }else if(obj.newIndex>obj.oldIndex){ dataObject["IORDER"] = Number(objList[obj.newIndex-1]["IORDER"])+1;//新序号 }else{ dataObject["IORDER"] = Number(objList[obj.newIndex+1]["IORDER"])-1;//新序号 } // console.log(JSON.stringify(dataObject)); fnOneRowDoIDCU("PUB_FILES","Modify",JSON.stringify(dataObject),function(){ window.fn_重新渲染序号(); }); }}, done: function(res, curr, count){ table.resize("tablemodelTable"); //重置表格尺寸 //开启列拖拽 if(imx_action!="view"){ soulTable.render(this); soulTable.suspend('tablemodelTable', 'drag', false);//true 关闭列拖拽! false 开启列拖拽! soulTable.suspend('tablemodelTable', 'rowDrag', false);//true 关闭行拖拽! false 开启行拖拽! fn_click_date_time(); } } }); };
- 开启拖拽的代码：
javascriptsoulTable.render(this); soulTable.suspend('tablemodelTable', 'drag', false);//true 关闭列拖拽! false 开启列拖拽! soulTable.suspend('tablemodelTable', 'rowDrag', false);//true 关闭行拖拽! false 开启行拖拽!3.行拖拽触发事件：
javascriptrowDrag: {trigger: 'row', done: function(obj) { // 完成时（松开时）触发 // 如果拖动前和拖动后无变化，则不会触发此方法 // console.log(obj.row) // 当前行数据 // console.log(obj.cache) // 改动后全表数据 // console.log(obj.oldIndex) // 原来的数据索引 // console.log(obj.newIndex) // 改动后数据索引 //全表数据 var objList=obj.cache; //当前拖拽row var oldRow=obj.row; var dataObject={}; dataObject["ID"]=oldRow["ID"]; if(obj.newIndex==0){ dataObject["IORDER"] = Number(objList[obj.newIndex+1]["IORDER"])-1;//新序号 }else if(obj.newIndex==objList.length){ dataObject["IORDER"] = Number(objList[obj.newIndex-1]["IORDER"])+1;//新序 }else if(obj.newIndex>obj.oldIndex){ dataObject["IORDER"] = Number(objList[obj.newIndex-1]["IORDER"])+1;//新序号 }else{ dataObject["IORDER"] = Number(objList[obj.newIndex+1]["IORDER"])-1;//新序号 } // console.log(JSON.stringify(dataObject)); fnOneRowDoIDCU("PUB_FILES","Modify",JSON.stringify(dataObject),function(){ window.fn_重新渲染序号(); }); }},四、效果图：
【Layui】------ layui实现table表格拖拽行、列位置的示例代码
皮皮冰要做大神2024-04-04 11:56
相关推荐
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程passerby60618 小时前
完成前端时间处理的另一块版图掘了8 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱！崔庆才丨静觅9 小时前
比官方便宜一半以上！Midjourney API 申请及使用Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏剪刀石头布啊9 小时前
jwt介绍爱敲代码的小鱼9 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：