html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport"><link rel="stylesheet" href="../../css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<link rel="stylesheet"
href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css"><link rel="stylesheet"
href="../../plugins/ztree/css/metroStyle/metroStyle.css"><link rel="stylesheet" href="../../css/main.css">
<script src="../../libs/jquery.min.js"></script>
<script src="../../plugins/layer/layer.js"></script>
<script src="../../libs/bootstrap.min.js"></script>
<script src="../../libs/vue.min.js"></script>
<script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
<script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
<script src="../../js/common.js"></script>
</head>
<style>
.detailsDiv{
background-color:#fff;}
.page_lable_class{
margin-top:8px}
.layer_div_class{
margin-top:10px;
margin-bottom:10px;}
.div1{
padding-top: 20px;
width:100%;
padding-left: 100px;
}
.div2{
display: inline-block;
}
.div3{
display: inline-block;
padding-left: 250px;
}
</style>
<body>
<div id="metasystem_page" v-cloak>
<div v-show="showList">
<div class="grid-btn">
<div class="form-group col-sm-2">
<input type="text" class="form-control"
v-model="meta_system.metaName" @keyup.enter="query"
placeholder="元數(shù)據(jù)名稱">
</div>
<a class="btn btn-default" @click="query">查詢</a> <a
v-if="hasPermission('generator:metasystem:save')"
class="btn btn-primary" @click="add"><i class="fa fa-plus"></i> 新增</a>
<a v-if="hasPermission('generator:metasystem:update')"
class="btn btn-primary" @click="update"><i
class="fa fa-pencil-square-o"></i> 修改</a> <a
v-if="hasPermission('generator:metasystem:delete')"
class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i> 刪除</a>
</div>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<div v-show="!showList" class="panel panel-default">
<div class="panel-heading">{{title}}</div>
<div>
<ul class="nav nav-tabs">
<li id="stand_lab" @click="standardinfo" role="presentation" class="active"><a
href="#standardinfo" target="contentFrame" aria-controls="repeat"
data-toggle="tab">基本信息</a></li>
<li id ="relation_lab" @click="correlativity" role="presentation"><a
href="#onlyOne" target="contentFrameonly" aria-controls="onlyOne"
data-toggle="tab">關(guān)系配置</a></li>
</ul>
</div>
<div v-show="labelType==1" class="" align="">
<form class="form-horizontal" style="width:100%;" >
<div style="width:100%;padding-left: 100px;" >
<div class="" style="display: inline-block;" >
<div class="">元數(shù)據(jù)類型 :<span class="mandatory">*</span></div><br>
<div class="" style="padding: 0px">
<input id="metaTypePlace" type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.typeName" @click="metaTypeTree" readonly="readonly" placeholder="點擊選擇元數(shù)據(jù)類型"/>
</div>
</div>
<div class="" style="display: inline-block;padding-left: 250px;" >
<div class="">數(shù)據(jù)對象名稱 :<span class="mandatory">*</span></div><br>
<div class="" style="padding: 0px">
<input type="text" class="form-control" style="width: 280px;cursor:pointer;"
v-model="metaSystem.metaName" placeholder="請?zhí)顚懺獢?shù)據(jù)名稱" />
</div>
</div>
</div>
<div style="padding-top: 20px;width:100%;padding-left: 100px;" >
<div class="" style="display: inline-block;" >
<div class="">數(shù)據(jù)對象代碼 :<span class="mandatory">*</span></div><br>
<div class="" style="padding: 0px">
<input type="text" class="form-control" style="width: 280px;cursor:pointer;"
v-model="metaSystem.metaCode" placeholder="請?zhí)顚懺獢?shù)據(jù)代碼" />
</div>
</div>
<div class="" style="display: inline-block;padding-left: 250px;" >
<div class="">父對象 :</div><br>
<div class="" style="padding: 0px">
<input id="parentIdPlace" type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.parentName" @click="parentIdTree" readonly="readonly" placeholder="點擊選擇父對象"/>
</div>
</div>
<div>
<code style="margin-top:4px;display: block;">注:有*標識的為必填信息</code>
</div>
</div>
<div id="strInputForm" v-for="item in metaStrs" >
<div class="form-group" style="" v-show="'str1'==item.metaObjField" > <div class="" >str1:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str1"></div></div>
<div class="form-group" style="" v-show="'str2'==item.metaObjField" > <div class="" >str2:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str2"></div></div>
<div class="form-group" style="" v-show="'str3'==item.metaObjField" > <div class="" >str3:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str3"></div></div>
<div class="form-group" style="" v-show="'str4'==item.metaObjField" > <div class="" >str4:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str4"></div></div>
<div class="form-group" style="" v-show="'str5'==item.metaObjField" > <div class="" >str5:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str5"></div></div>
<div class="form-group" style="" v-show="'str6'==item.metaObjField" > <div class="" >str6:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str6"></div></div>
<div id="str7" class="form-group" style="" v-show="'str7'==item.metaObjField" > <div class="" >str7:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str7"></div></div>
<div class="form-group" style="" v-show="'str8'==item.metaObjField" > <div class="" >str8:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str8"></div></div>
<div id="str9" class="form-group" style="" v-show="'str9'==item.metaObjField" > <div class="" >str9:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str9"></div></div>
<div class="form-group" style="" v-show="'str10'==item.metaObjField"> <div class="" >str10:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str10"></div></div>
<div id="str11" class="form-group" style="" v-show="'str11'==item.metaObjField"> <div class="" >str11:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str11"></div></div>
<div class="form-group" style="" v-show="'str12'==item.metaObjField"> <div class="" >str12:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str12"></div></div>
<div id="str13" class="form-group" style="" v-show="'str13'==item.metaObjField"> <div class="" >str13:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str13"></div></div>
<div class="form-group" style="" v-show="'str14'==item.metaObjField"> <div class="" >str14:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str14"></div></div>
<div class="form-group" style="" v-show="'str15'==item.metaObjField"> <div class="" >str15:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str15"></div></div>
<div class="form-group" style="" v-show="'str16'==item.metaObjField"> <div class="" >str16:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str16"></div></div>
<div class="form-group" style="" v-show="'str17'==item.metaObjField"> <div class="" >str17:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str17"></div></div>
<div class="form-group" style="" v-show="'str18'==item.metaObjField"> <div class="" >str18:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str18"></div></div>
<div class="form-group" style="" v-show="'str19'==item.metaObjField"> <div class="" >str19:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str19"></div></div>
<div class="form-group" style="" v-show="'str20'==item.metaObjField"> <div class="" >str20:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str20"></div></div>
<div class="form-group" style="" v-show="'str21'==item.metaObjField"> <div class="" >str21:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str21"></div></div>
<div class="form-group" style="" v-show="'str22'==item.metaObjField"> <div class="" >str22:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str22"></div></div>
<div class="form-group" style="" v-show="'str23'==item.metaObjField"> <div class="" >str23:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str23"></div></div>
<div class="form-group" style="" v-show="'str24'==item.metaObjField"> <div class="" >str24:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str24"></div></div>
<div class="form-group" style="" v-show="'str25'==item.metaObjField"> <div class="" >str25:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str25"></div></div>
<div class="form-group" style="" v-show="'str26'==item.metaObjField"> <div class="" >str26:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str26"></div></div>
<div class="form-group" style="" v-show="'str27'==item.metaObjField"> <div class="" >str27:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str27"></div></div>
<div class="form-group" style="" v-show="'str28'==item.metaObjField"> <div class="" >str28:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str28"></div></div>
<div class="form-group" style="" v-show="'str29'==item.metaObjField"> <div class="" >str29:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str29"></div></div>
<div class="form-group" style="" v-show="'str30'==item.metaObjField"> <div class="" >str30:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str30"></div></div>
<div class="form-group" style="" v-show="'str31'==item.metaObjField"> <div class="" >str31:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str31"></div></div>
<div class="form-group" style="" v-show="'str32'==item.metaObjField"> <div class="" >str32:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str32"></div></div>
<div class="form-group" style="" v-show="'str33'==item.metaObjField"> <div class="" >str33:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str33"></div></div>
<div class="form-group" style="" v-show="'str34'==item.metaObjField"> <div class="" >str34:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str34"></div></div>
<div class="form-group" style="" v-show="'str35'==item.metaObjField"> <div class="" >str35:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str35"></div></div>
<div class="form-group" style="" v-show="'str36'==item.metaObjField"> <div class="" >str36:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str36"></div></div>
<div class="form-group" style="" v-show="'str37'==item.metaObjField"> <div class="" >str37:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str37"></div></div>
<div class="form-group" style="" v-show="'str38'==item.metaObjField"> <div class="" >str38:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str38"></div></div>
<div class="form-group" style="" v-show="'str39'==item.metaObjField"> <div class="" >str39:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str39"></div></div>
<div class="form-group" style="" v-show="'str40'==item.metaObjField"> <div class="" >str40:</div><br><div class="col-sm-10" ><input type="text" class="form-control" style="width: 280px;cursor:pointer;" v-model="metaSystem.str40"></div></div>
</div>
<div class="form-group" style="padding-left: 850px;" >
<div class="col-sm-2 control-label"></div>
<input type="button" class="btn btn-primary" @click="saveOrUpdate"
value="確定" /> <input type="button"
class="btn btn-warning" @click="reload" value="返回" />
</div>
</form>
</div>
</div>
<div id="detailsLayer" style="background-color: #ccc; display: none">
<div class="col-sm-9">
<div>
<div class="form-inline">
<div class="col-sm-6 form-group layer_div_class">
<label class="col-sm-4" for="metaNameIdLayer">元數(shù)據(jù)名稱</label> <input
readonly="readonly" type="text" class="col-sm-8 form-control"
id="metaNameIdLayer" v-model="metaSystemLayer.metaName">
</div>
<div class="col-sm-6 form-group layer_div_class">
<label class="col-sm-4" for="metaTypeIdLayer">元數(shù)據(jù)類型</label>
<input readonly="readonly" type="text"
class="col-sm-8 form-control" id="metaTypeIdLayer"
v-model="metaSystemLayer.typeName">
</div>
</div>
<div class="form-inline">
<div class="col-sm-6 form-group layer_div_class">
<label class="col-sm-4" for="namespaceIdLayer">元數(shù)據(jù)路徑</label> <input
readonly="readonly" type="text" class="col-sm-8 form-control"
id="namespaceIdLayer" v-model="metaSystemLayer.namespace">
</div>
<div class="col-sm-6 form-group layer_div_class">
<label class="col-sm-4" for="metaCodeLayer">元數(shù)據(jù)代碼</label> <input
readonly="readonly" type="text" class="col-sm-8 form-control"
id="metaCodeLayer" v-model="metaSystemLayer.metaCode">
</div>
</div>
<div class="form-inline">
<div class="col-sm-6 form-group layer_div_class">
<label class="col-sm-4" for="metaCodeLayer">創(chuàng)建時間</label> <input
readonly="readonly" type="text" class="col-sm-8 form-control"
id="metaCodeLayer" v-model="metaSystemLayer.createTime">
</div>
<div class="col-sm-6 form-group layer_div_class" style="hidden:true">
</div>
</div>
</div>
</div>
</div>
<!-- 選擇數(shù)據(jù)類型 -->
<div id="metaTypeLayer" style="display: none;padding:10px;">
<ul id="menuTypeTree" class="ztree"></ul>
</div>
<!-- 選擇父ID -->
<div id="parentIdLayer" style="display: none;padding:10px;">
<ul v-show="showBlankTree" id="parentIdTree" class="ztree"></ul>
<span v-show="!showBlankTree">當前元數(shù)據(jù)類型沒有可以選擇的父節(jié)點</span>
</div>
</div>
<script src="../../js/modules/metamanage/metasystem.js"></script></body>
</html>
vuejs:
metaTypeTree: function() { //獲取元數(shù)據(jù)類型
layer.open({
type: 1,
offset: '50px',
skin: 'layui-layer-molv',
title: "選擇元數(shù)據(jù)類型",
area: ['300px', '450px'],
shade: 0,
shadeClose: false,
content: jQuery("#metaTypeLayer"),
btn: ['確定', '取消'],
btn1: function(index) {
var node = metaTypeZtree.getSelectedNodes();
vm.metaSystem.metaType = node[0].id;
vm.metaSystem.typeName = node[0].typeName;
type_id = node[0].id;
$.ajax({
type: "POST",
dataType: "json",
url: baseURL + "/generator/metasystem/queryStrInput",
data: {
'metatype': node[0].id
},
success: function(r) {
vm.metaStrs = r.strinputlist;
for(var i =0;i<r.strinputlist.length;i++){
if(i%2==0){
var id = r.strinputlist[i].metaObjField;
var obj = document.getElementById(id);
obj.style.cssText = "display: inline-block;";
}else{
var id = r.strinputlist[i].metaObjField;
var obj = document.getElementById(id);
obj.style.cssText = "display: inline-block;padding-left: 250px;";
}
}
}
});
layer.close(index);
}
});
},
你能把代碼格式弄好一點，問題整理清楚了在發(fā)上來嗎
你需要了解下執(zhí)行的先后順序問題，vue用的虛擬DOM，沒掛載之前是取不到的
在vue沒有掛載成功前，使用id是獲取不到節(jié)點內(nèi)部的元素的，你可以在mounted事件內(nèi)去觸發(fā)一個事件來獲取節(jié)點
在外部是獲取不到的，因為vue海沒有生成dom節(jié)點，應該在vue里面獲取節(jié)點，你的 layer.open是否寫在vue里面的，可以寫在mounted里面調(diào)用，另外建議用ref獲取節(jié)點
是說這一句么 var id = r.strinputlist[i].metaObjField;
var obj = document.getElementById(id);
首先你的看看這個id是不是有值或者這個id在頁面上是否存在
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學院和江蘇省首批服務(wù)外包人才培訓基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團創(chuàng)建于1999年，經(jīng)過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機構(gòu)，發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團，成為集合面授教學培訓、網(wǎng)
達內(nèi)教育集團成立于2002年，是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
曾工作于聯(lián)想擔任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍懿科技有限責任公司從事總經(jīng)理職務(wù)負責iOS教學及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術(shù)功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多