控件隐藏
控件前端显示，选择框
<div class="form-group"> <label class="col-sm-3 control-label">API类型</label> <div class="col-sm-8"> <input class="apiType" type="radio" name="apiType" value="0" title="基础数据" />基础数据 <input class="apiType" type="radio" name="apiType" value="1" title="单实体" checked="checked" />单实体 <input class="apiType" type="radio" name="apiType" value="3" title="多实体" />多实体 <input class="apiType" type="radio" name="apiType" value="2" title="业务数据接口" />业务数据 <span class="help-block"><span class="required">*</span>说明：选择业务对接类型</span> </div> </div>
依据class对应的apitype如果发生改变，则触发函数，对应确定哪些控件显示，哪些隐藏。
注意：这里无论是隐藏还是显示，四种条件各自涉及到的控件要取并集，也就是说即使不隐藏也要写。
<script type="text/javascript"> $(function () { var item = document.getElementById("IsDependsBasic") item.parentNode.parentNode.style = ""; item = document.getElementById("whiteList") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("showFields") item.parentNode.parentNode.style = ""; //可以显示 item = document.getElementById("getApiListUrl") item.parentNode.parentNode.style = "display:none"; //设置不显示 item = document.getElementById("importApiUrl") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("isEnable") item.parentNode.parentNode.style = "display:none"; $(".apiType").change(function () { // var item = document.getElementById("getApiListUrl") // item.parentNode.parentNode.style = "display:none"; //document.getElementById("importApiUrl") console.info(item) var apiType = $("input[name='apiType']:checked").val(); if (apiType == "0") { var item = document.getElementById("IsDependsBasic") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("whiteList") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("getApiListUrl") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("showFields") item.parentNode.parentNode.style = ""; item = document.getElementById("importApiUrl") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("isEnable") item.parentNode.parentNode.style = "display:none"; } if (apiType == "1") { var item = document.getElementById("IsDependsBasic") item.parentNode.parentNode.style = ""; item = document.getElementById("whiteList") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("showFields") item.parentNode.parentNode.style = ""; item = document.getElementById("getApiListUrl") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("importApiUrl") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("isEnable") item.parentNode.parentNode.style = "display:none"; } if (apiType == "3") { var item = document.getElementById("whiteList") item.parentNode.parentNode.style = ""; item = document.getElementById("IsDependsBasic") item.parentNode.parentNode.style = ""; item = document.getElementById("getApiListUrl") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("showFields") item.parentNode.parentNode.style = ""; item = document.getElementById("importApiUrl") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("isEnable") item.parentNode.parentNode.style = "display:none"; } if (apiType == "2") { var item = document.getElementById("IsDependsBasic") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("whiteList") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("showFields") item.parentNode.parentNode.style = "display:none"; item = document.getElementById("getApiListUrl") item.parentNode.parentNode.style = ""; item = document.getElementById("importApiUrl") item.parentNode.parentNode.style = ""; item = document.getElementById("isEnable") item.parentNode.parentNode.style = "display:none"; } if (apiType == "2") { $("#getApiListUrl").val(""); $("#importApiUrl").val(""); $("#getApiListUrl").attr("readonly", false); $("#importApiUrl").attr("readonly", false); } else { $("#getApiListUrl").val("/Biz/GetObjectDataList"); $("#importApiUrl").val("/Biz/ImportObjectData"); $("#getApiListUrl").attr("readonly", "readonly"); $("#importApiUrl").attr("readonly", "readonly"); //禁用不可以修改 } }); }); </script>
控件不可点
获取输入控件中的name，如果为以下这几种直接禁用
$("input[name='apiType']").attr("disabled", true); $("input[name='appName']").attr("disabled", true); $("input[name='resourceCode']").attr("disabled", true);
当然也可以启用
$("input[name='resourceCode']").attr("disabled", false);
Ajax通信标准写法
控制器将需要访问js函数封装到链接里返回给前端
describe = "停用"; hrefEnabled = $"<a style='cursor: pointer; ' onclick=EnabledAPI('" + item.ID + "','" + setEnabled + "','" + describe + "',this)> <button class ='btn btn-primary' style ='padding:2px 5px'>停用 </button></ a >";
前端通过点击js函数，得到参数id，enabled
//启用按钮 function EnabledAPI(id, enabled, describe, tr) { var currentTr = $(tr).parent().parent().find("td"); resourceName = currentTr[0].innerHTML; //提示信息赋值，弹框 $("#hidId").val(id); $("#hidEnabled").val(enabled); $("#sureMessage").html("是否" + describe + "API:" + resourceName + " 的状态?"); $('#ConfirmEnabledModel').modal('show'); }
将值传到确认启用或停用的模态框id,enabled
// <!--设置是否启用的确认模态框--> <div class="modal fade" id="ConfirmEnabledModel" tabindex="-1" role="dialog" data-backdrop="static"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="gridSystemModalLabel">API注册</h4> </div> <input type="hidden" value="" id="hidId" /> <input type="hidden" value="" id="hidEnabled" /> <div class="modal-body"> <blockquote> <p id="sureMessage"></p> </blockquote> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="ConfirmEnabled" type="button" class="btn btn-primary">确定</button> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div>
点击确认模态框后，将参数值传进来id,enabled
``` //确定启用 $("#ConfirmEnabled").click(function () { var id = $("#hidId").val(); var enabled = $("#hidEnabled").val(); if (id == "") return false; if (enabled == "") return false; $('#ConfirmEnabledModel').modal('hide'); $.ajax({ type: "post", dataType: "json", url: "/API/EnabledAPI", data: { id: id, enabled: enabled }, success: function (data) { $('#APIModel').modal('hide'); alert(data.message ? data.message : "success"); window.location.reload(); }, error: function (data) { alert(data.message ? data.message : "error"); } }); });
