一、完整的示例代码：（请使用layui v2.8.3的版本）看懂就能用、不要照搬、照搬会出错误、拷贝重要代码改改符合你自己的需求。
<!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', //pagelimitName: '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;//当前拖拽rowvar 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 查询keyform.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();}//查询keyListfunction 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) {//导入导出DIVvar __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>
二、引用的重要的文件:
1. css文件：
<link rel="stylesheet" href="/libs/layui/v2.8.3/css/layui2.css"><link rel="stylesheet" href="/libs/layui/soulTable.css">2. js文件:
<script src="/libs/jquery/jquery-3.2.1.min.js"></script> <script src="/libs/layui/v2.8.3/layui.js"></script>
二、重要部分的代码：
1.主要代码：
// 自定义模块，这里只需要开放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', //pagelimitName: '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;//当前拖拽rowvar 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();}}});};2. 开启拖拽的代码：
soulTable.render(this);soulTable.suspend('tablemodelTable', 'drag', false);//true 关闭列拖拽! false 开启列拖拽!soulTable.suspend('tablemodelTable', 'rowDrag', false);//true 关闭行拖拽! false 开启行拖拽!3.行拖拽触发事件：
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;//当前拖拽rowvar 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_重新渲染序号();});}},
四、效果图：
![MapReduce [OSDI‘04] 论文阅读笔记](https://img-blog.csdnimg.cn/direct/5ce9c9cff2de4ad889f25585f1ac910c.png#pic_center)
