subgrid更新后刷新主表单

本文介绍了一种在subgrid进行数据修改后触发主Form同步更新的方法。通过在subgrid上添加刷新事件,实现数据变化后的即时同步,确保主Form能够及时反映最新的数据状态。

通常我们在subgrid中追加或删除记录后需要更新主form中的字段,但是此时主Form却不能刷新
我们可以给subgrid追加刷新事件,也就是在subgrid中追加或删除记录后都会刷新subgrid的,此时我们就可以做相应的js控制了。


///<summary>
///受文单位subgrid的刷新操作
///</summary>
NewCRM.Main.Equip.Serviceworkorder.counterSignSubgridRefresh = function () {

    //取得受文单位subgrid
    var grid = document.getElementById("countersign");
    //因为是异步刷新所以需要将回调
    if (grid == null) {
        //1second后重新调用
        setTimeout("NewCRM.Main.Equip.Serviceworkorder.counterSignSubgridRefresh()", 1000);
    } else {
        grid.control.add_onRefresh(function () {
            //Todo
            //在此写相应的业务逻辑就可以了。
            // 后台刷新主form
             window.location.reload(true);
        });

    }

}

其中主要是grid.control.add_onRefresh(function () {})为subgrid的刷新操作追加了相应的js事件。
我进一步debug了一下control下面有哪些事件可以追加:

也参照了以下内容:
http://blog.youkuaiyun.com/vic0228/article/details/39001659

[#import "/pages/common/base.html" as base] [@base.page] <div id="div_content"> <div class="widget-box widget-color-orange"> <div class="widget-header widget-header-small"> <h5 class="widget-title lighter">条件查询</h5> <div class="widget-toolbar"> <a href="#" data-action="collapse"> <i class="1 ace-icon fa bigger-125 fa-chevron-up"></i> </a> </div> </div> <div class="widget-body"> <form id="form"> <div class="widget-main"> <fieldset> <div class="form-fieldset"> <label class="text-label" for="machineType">机器类型:</label> <select id="machineType" name="machineType" class="select" style="width: 150px"> <option value=""></option> <option value="ECM" selected >ECM(边缘机器)</option> <option value="CVM">CVM(云服务器)</option> </select> </div> <div> <div> <div class="form-fieldset"> <label class="text-label" for="modules">模块:</label> <input id="modules" type="text" name="modules" style="width: 250px" placeholder="例: info 或 dispatch,info" autocomplete="off"> </div> </div> </div> <div> <div> <div class="form-fieldset"> <label class="text-label" for="ips">ip:</label> <input id="ips" type="text" name="ips" style="width: 250px" placeholder="多个ip以,分隔" autocomplete="off"> </div> </div> </div> </fieldset> </div> <div class="form-actions no-margin"> <button id="btn_search" class="btn btn-sm btn-info" type="button"> <i class="ace-icon glyphicon glyphicon-search"></i> 查询 </button> <!-- <button id="btn_reset" class="btn btn-sm" type="button"> <i class="ace-icon glyphicon glyphicon-refresh"></i> 重置 </button>--> <!-- <button id="jqg_add" type="button" class="btn btn-success btn-sm" data-url="rcmnq/rc-config/save"> <i class="ace-icon glyphicon glyphicon-plus"></i> 新建 </button>--> <!--<button id="btn_autoRefresh" class="btn btn-sm" type="button"> <input type="checkbox" id="autoRefreshCheckbox" name="autoRefreshCheckbox" disabled="true"> 自动刷新 </button>--> <label class="btn checkbox-button"> <input type="checkbox" id="autoRefreshCheckbox" name="autoRefreshCheckbox" onclick="clickAutoRefreshCheckbox()"> 自动刷新 </label> <button id="btn_refreshAllDns" type="button" class="btn btn-success btn-sm" data-url="rcmnq/rc-config/save"> <i class="ace-icon glyphicon glyphicon-upload"></i> 更新全部接口机DNS </button> <label class="showtime"> <div id="time"></div> </label> </div> </form> </div> </div> <div class="top-scrollbar" id="top-scrollbar"></div> <div class="widget-grid" id="grid-container"> <table id="grid_table"></table> <div id="grid_pager"></div> </div> <!-- 模态框的HTML结构 --> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>更新 全量接口机ip的解析dns记录, 请输入口令验证:</p> <input type="password" id="passwordInput" placeholder="输入口令"> <button onclick="checkPassword()">确认</button> </div> </div> <div class="alert alert-warning"> <strong>备注:</strong> <ul> <li>自动刷新: 每3秒刷新一次,5分钟后自动停止刷新</li> <li>查询栏右侧自动刷新的时间为本地电脑上的时间</li> <li>某一行标红:判定最后上报时间为60秒之前则标红</li> </ul> </div> </div> <script id="template_op" type="text/html"> <button class="btn btn-sm btn-white btn-info" style="margin: 3px;" type="button" onclick="showDetail('{{rowid}}')">查看详情</button> </script> <script id="template_op2" type="text/html"> <button class="btn btn-sm btn-white btn-info" style="margin: 3px;" type="button" onclick="refreshDns('{{rowid}}')">更新dns</button> </script> <script id="template_op3" type="text/html"> <button class="btn btn-sm btn-white btn-info" style="margin: 3px;" type="button" onclick="removeDns('{{rowid}}')">移除dns</button> </script> <style> /* 自定义样式,创建顶部滚动条容器 */ .top-scrollbar { overflow-x: auto; overflow-y: auto; width: 100%; height: 20px; } /* 确保表格容器宽度与顶部滚动条一致 */ #grid-container { width: 100%; overflow-x: auto; overflow-y: auto; } </style> <script> jQuery(function ($) { grid.grid2({ url: "sdksys/dataInterfaceService/page", form: "form", pager: '#grid_pager', colModel: [ {label: '', name: 'index', key: true, align: 'center',hidden: true}, {label: 'index', name: 'index', align: 'center',width:'60px', editable: true, sorttype:'int', editrules: {required: true}}, {label: '模块', name: 'modules', align: 'center',width:'100px',editable: true, editrules: {required: true}}, {label: 'ip', name: 'ip', align: 'center',editable: true, editrules: {required: true}}, {label: '内网ip', name: 'inner ip', align: 'center',editable: true, editrules: {required: true}}, {label: '机房区域', name: 'zoneid', align: 'center',width:'190px',editable: true, editrules: {required: true}}, {label: '运营商', name: 'isp', align: 'center',width:'110px', editable: true, editrules: {required: true}}, {label: 'cpu使用率', name: 'cpu', align: 'center',editable: true, sorttype:'float', editrules: {required: true}}, {label: '出/入的最大码率(mbps)', name: 'max mbps', align: 'center',editable: true, sorttype:'float', editrules: {required: true}}, {label: '出入包量和(w/s)', name: 'packets w/s', align: 'center',editable: true, sorttype:'float', editrules: {required: true}}, {label: '接收包bytes', name: 'in', align: 'center',width:'120px',editable: true, sorttype:'int', editrules: {required: true}}, {label: '发送包bytes', name: 'out', align: 'center',width:'120px',editable: true, sorttype:'int', editrules: {required: true}}, {label: '最后上报时间', name: 'last report', align: 'center',editable: true, editrules: {required: true} // 一行的某列 标红 /*,formatter: function (cellValue, options, rowObject) { if (rowObject.expired > 0 ) { return "<div style='color:red;'>" + cellValue + "</div>"; } return cellValue; }*/ }, {label: '最后上报时间', name: 'last report', align: 'center',hidden: true}, {label: '最后记录时间', name: 'last record', align: 'center',editable: true, editrules: {required: true}}, {label: '国家', name: 'country', align: 'center',editable: true, editrules: {required: true}}, {label: '省份', name: 'province', align: 'center',editable: true, editrules: {required: true}}, {label: '城市', name: 'city', align: 'center',editable: true, editrules: {required: true}}, {label: '同机房同运营商机器数量', name: 'nodecount', align: 'center',editable: true, sorttype:'int', editrules: {required: true}}, {label: '同机房同运营商机器序号', name: 'nodesortnum', align: 'center',editable: true, sorttype:'int', editrules: {required: true}}, {label: '设置最大带宽(kbps)', name: '_band', align: 'center',editable: true, sorttype:'int', editrules: {required: true}}, {label: '最大支持包量(个/s)', name: '_packets', align: 'center',editable: true, sorttype:'int', editrules: {required: true}}, {label: '是否禁用', name: 'forbid', align: 'center',editable: true, editrules: {required: true}}, {label: 'expired', name: 'expired', align: 'center',hidden: true} /* {label: '是否在线', name: 'status', align: 'center', formatter: function(cellValue, options, rowObject) { if(cellValue==1){return "<font style='color:blue'>在线</font>";} else if(cellValue==0){return "<font style='color:red'>不在线</font>";} } }, {label: '是否在线', name: 'status', align: 'center',hidden: true}*/ ,{ label: '操作', name: '', editable: false, sortable: false, fixed: true, align: "center", formatter: function opformatter(cellvalue, options, rowObject) { var data = { rowid: options.rowId, msgRange: rowObject.msgRange, rowObject: rowObject.rowObject }; return $.trim(template("template_op2", data)); } } ,{ label: '删除', name: '', editable: false, sortable: false, fixed: true, align: "center", formatter: function opformatter(cellvalue, options, rowObject) { var data = { rowid: options.rowId, msgRange: rowObject.msgRange, rowObject: rowObject.rowObject }; return $.trim(template("template_op3", data)); } } ], loadonce : true, //一次加载全部数据到客户端,由客户端进行排序。 sortable: true, sortname : 'id', sortorder: "asc", rowNum: 50, rowList: [10, 20, 50, 100] // 水平滚动条 , shrinkToFit:false, autoScroll: true, loadComplete: function(data){ //$("#grid_table" ).closest(".ui-jqgrid-bdiv").css({"overflow-x":"scroll"}); // 一行标红 var rows = $("#grid_table").jqGrid('getRowData'); for (var i = 0; i < rows.length; i++) { if (rows[i].expired == 1) { //$("#grid_table").jqGrid('setRowData', rows[i].index, false, { backgroundcolor: 'red' }); $("#"+rows[i].index+ " td").css("background-color","#FFB6C1"); }else if(rows[i].expired > 1){ $("#"+rows[i].index+ " td").css("background-color","#BF8991"); } } } ,subGrid: true, subGridOptions: { plusicon : "ace-icon fa fa-plus center bigger-110 blue", //展开图标 minusicon : "ace-icon fa fa-minus center bigger-110 blue", //收缩图标 openicon : "ace-icon fa fa-chevron-right center orange" //打开时左侧图标 }, subGridRowExpanded: function(subgrid_id, row_id) { var rowData = $("#grid_table").jqGrid('getRowData', row_id); var modules_s =rowData.modules; var ip_s =rowData.ip; var isp_s =rowData.isp; var country_s =rowData.country; var province_s =rowData.province; var city_s =rowData.city; var subgrid_table_id = subgrid_id + "_t"; // 根据subgrid_id定义对应的子表格的table的id var subgrid_div_id = subgrid_id + "_d"; // 根据subgrid_id定义对应的子表格的div分页的id // 动态添加子报表的table $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table>"+"<div id='" + subgrid_div_id + "'></div>"); $("#" + subgrid_table_id).grid2({ url: "sdksys/dataInterfaceService/oneDnsPage?ip="+ip_s, form: "form", //pager: "", pager: subgrid_div_id, //disableView: true, serializeGridData: function(postData) { postData = $.extend($("#form").serializeObject(), {current: 1, size: postData.size, searchCount: false, sidx: postData.sidx, sord: postData.sord}); return postData; }, colModel: [ {label: 'recordId', name: 'RecordId', key: true, hidden: true}, /*{label: '日期', name: 'rdate', formatter: 'date', formatoptions: {newformat:'Y-m-d'}, align: "center"},*/ {label: '子域名', name: 'RR', align: "center"}, {label: '解析线路', name: 'Type', align: "center"}, {label: '记录值', name: 'Value', align: "center"}, {label: '线路code', name: 'Line', align: "center"}, {label: '线路名', name: 'description', align: "center"}, {label: '备注', name: 'Remark', align: "center"}, {label: '状态', name: 'Status', align: "center"}, {label: '创建时间', name: 'CreateTimestamp', firstsortorder: 'desc', align: "center", formatter: function(CreateTimestamp, options, rowObject) { return new Date(CreateTimestamp).format('yyyy-MM-dd hh:mm:ss'); } }, {label: '更新时间', name: 'UpdateTimestamp', firstsortorder: 'desc', align: "center", formatter: function(UpdateTimestamp, options, rowObject) { return new Date(UpdateTimestamp).format('yyyy-MM-dd hh:mm:ss'); } }, {label: '记录值', name: 'RecordId', align: "center"}, ], //rowNum: -1, loadonce : true, //一次加载全部数据到客户端,由客户端进行排序。 sortable: true, sortname: 'id', sortorder: "desc", rowNum: 20, rowList: [10, 20, 50, 100] }); } }); // 同步顶部滚动条和表格的滚动 $('#top-scrollbar').scroll(function () { $('#grid-container').scrollLeft($(this).scrollLeft()); }); $('#grid-container').scroll(function () { $('#top-scrollbar').scrollLeft($(this).scrollLeft()); }); // 复制表格的宽度到顶部滚动条 $('#top-scrollbar').width($('#grid_table').width()); function updateTime() { const now = new Date(); const year = now.getFullYear(); const month = String(now.getMonth() + 1).padStart(2, '0'); const day = String(now.getDate()).padStart(2, '0'); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); const formattedTime = "Local Time: "+ year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds; document.getElementById('time').textContent = formattedTime; } // 初始化时间 updateTime(); // 每秒更新一次时间 setInterval(updateTime, 1000); }); $("#btn_search").click(function() { $("#grid_table").setGridParam({datatype:'json'}).trigger("reloadGrid"); $("#grid_table").jqGrid('setGridParam', {page:1}).trigger("reloadGrid"); }); $("#btn_reset").click(function() { $("#form")[0].reset(); resetDate(); }); $("#btn_refreshAllDns").click(function() { refreshAllDns(); }); let timer; const maxDuration = 5 * 60 * 1000; // 5分钟 const interval = 3 * 1000; // 3秒 let startTime; function clickAutoRefreshCheckbox() { var checkbox = document.getElementById('autoRefreshCheckbox'); //checkbox.checked = !checkbox.checked; // 切换 checked 状态 var isChecked = checkbox.checked; console.log(isChecked); if(isChecked) { if (!startTime) { startTime = Date.now(); } clearInterval(timer); timer = setInterval(function () { if (Date.now() - startTime >= maxDuration) { clearInterval(timer); startTime = null; if(checkbox.checked){ checkbox.checked = !checkbox.checked; } //alert('定时刷新结束'); } else { console.log("请求数据."); $("#btn_search").click(); } }, interval); }else { clearInterval(timer); startTime = null; if(checkbox.checked){ checkbox.checked = !checkbox.checked; } //alert('定时刷新结束'); } } // 显示明细信息 function showDetail(rowid) { var data = {}; if (rowid) { $.extend(data, $("#grid_table").jqGrid('getRowData', rowid)); } $("#div_content").showDetail3(data); } function refreshDns(rowid){ var data = {}; if (rowid) { $.extend(data, $("#grid_table").jqGrid('getRowData', rowid)); } data.isall = "0"; var text = " 是否确定要更新 zoneid:【"+data.zoneid+"】 ip:"+data.ip+" 的解析dns记录(可能耗时会久)?" ; let res = confirm( text ); if(res == true) { console.log('点击了确认'); comm.ajaxMessage({ type: "POST", url: "sdksys/dataInterfaceService/refreshDns", data: data, autoClose: true, completeCallback: function (data){ // $("#grid_table").setGridParam({datatype:'json'}).trigger("reloadGrid"); // $("#grid_table").jqGrid('setGridParam', {page:1}).trigger("reloadGrid"); //console.log(data); //alert("更新完成:\n" +data); } ,success: function (data) { if(data.code == 200) { //alert("更新完成:\n" + data); }else{ //alert("更新失败:\n" + data.msg ); } } }); }else{ console.log('点击了取消'); } } function removeDns(rowid){ var data = {}; if (rowid) { $.extend(data, $("#grid_table").jqGrid('getRowData', rowid)); } var text = " 是否确定要删除 zoneid:【"+data.zoneid+"】 ip:"+data.ip+" 的解析dns记录?\n慎重操作,仅在需要下线接口机时操作" ; let res = confirm( text ); if(res == true) { console.log('点击了确认删除'); comm.ajaxMessage({ type: "POST", url: "sdksys/dataInterfaceService/removeDns", data: data, autoClose: true, completeCallback: function (data){ // $("#grid_table").setGridParam({datatype:'json'}).trigger("reloadGrid"); // $("#grid_table").jqGrid('setGridParam', {page:1}).trigger("reloadGrid"); //console.log(data); //alert("更新完成:\n" +data); } ,success: function (data) { if(data.code == 200) { //alert("更新完成:\n" + data); }else{ //alert("更新失败:\n" + data.msg ); } } }); }else{ console.log('点击了取消删除'); } } function refreshAllDns(){ var data = {}; data.isall = "1"; var text = " 是否确定要更新 全量接口机ip的解析dns记录(可能耗时会久)?" ; let res = confirm( text ); if(res == true) { console.log('点击了确认'); comm.ajaxMessage({ type: "POST", url: "sdksys/dataInterfaceService/refreshDns", data: data, autoClose: true, completeCallback: function (data){ // $("#grid_table").setGridParam({datatype:'json'}).trigger("reloadGrid"); // $("#grid_table").jqGrid('setGridParam', {page:1}).trigger("reloadGrid"); //console.log(data); //alert("更新完成:\n" +data); } ,success: function (data) { if(data.code == 200) { //alert("更新完成:\n" + data); }else{ //alert("更新失败:\n" + data.msg ); } } }); }else{ console.log('点击了取消'); } } function _refreshAllDns(){ var data = {}; data.isall = "1"; var text = "准备更新 全量接口机ip的解析dns记录(可能耗时会久),\n请输入口令验证:" ; var userInput = prompt( text ); if (userInput !== null) { console.log('输入了'); data.pass =userInput; /*comm.ajaxMessage({ type: "POST", url: "sdksys/dataInterfaceService/refreshDns", data: data, autoClose: true, completeCallback: function (data){ // $("#grid_table").setGridParam({datatype:'json'}).trigger("reloadGrid"); // $("#grid_table").jqGrid('setGridParam', {page:1}).trigger("reloadGrid"); //console.log(data); //alert("更新完成:\n" +data); } ,success: function (data) { if(data.code == 200) { //alert("更新完成:\n" + data); }else{ //alert("更新失败:\n" + data.msg ); } } });*/ }else{ console.log('没输入'); } } </script> <style> /* 自定义按钮样式 */ .checkbox-button { background-color: #4CAF50; border: none; color: white; padding: 6px 9px; text-align: center; text-decoration: none; display: inline-block; font-size: 13px; margin: 4px 2px; cursor: pointer; border-radius: 4px; } .checkbox-button input { margin-right: 5px; position: relative; top: 2px; } .showtime { /*position: fixed;*/ /*会导致固定在屏幕上,不随页面的滚动而移动。这意味着无论用户如何滚动页面,.showtime 元素都会保持在屏幕的同一位置*/ position: absolute; right: 35px; display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; } #time { font-size: 20px; margin: 10px; } </style> [#include "/pages/common/date-picker.html"/] [#include "/pages/common/chosen.html"/] [/@base.page]
最新发布
12-06
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值