一、完整的示例代码：（请使用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
相关推荐
秦jh_5 分钟前
【Linux】多线程（概念，控制）蜗牛快跑21318 分钟前
面向对象编程 vs 函数式编程Dread_lxy19 分钟前
vue 依赖注入（Provide、Inject ）和混入（mixins）涔溪1 小时前
Ecmascript（ES）标准榴莲千丞1 小时前
第8章利用CSS制作导航菜单奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解java—大象1 小时前
基于java+springboot+layui的流浪动物交流信息平台设计实现羡与1 小时前
echarts-gl 3D柱状图配置guokanglun1 小时前
CSS样式实现3D效果咔咔库奇2 小时前
ES6进阶知识一