以下代碼 是純手工撰寫嗎，那豈不是非常麻煩，沒有直接圖形化 拖拽 控制元件 的 方式 ？
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
<title>售電管理</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="decorator" content="ani"/>
<link href="https://bbs.csdn.net/topics/${ctxStatic}/plugin/bootstrapTree/patternfly/bootstrap-treeview.css" rel="stylesheet" type="text/css"/>
<script src="https://bbs.csdn.net/topics/${ctxStatic}/plugin/bootstrapTree/patternfly/bootstrap-treeview.js" type="text/javascript"></script>
<%@ include file="/webpage/include/bootstraptable.jsp"%>
<%@include file="emAmmeterList.js" %>
</head>
<body>
<div class="wrapper wrapper-content">
<input type="hidden" id="orgno" value="https://bbs.csdn.net/topics/${orgno }"/>
<input type="hidden" id="netMode" value="https://bbs.csdn.net/topics/${netMode }"/>
<input type="hidden" id="billFormatType" value="https://bbs.csdn.net/topics/${billFormatType }"/>
<input type="hidden" id="comName" value="https://bbs.csdn.net/topics/${comName }"/>
<input type="hidden" id="propertyRemindType" value="https://bbs.csdn.net/topics/${propertyRemindType }"/>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">售電管理</h3>
</div>
<div class="panel-body">
<div class="col-sm-3 col-md-2" >
<div id="jstree"></div>
</div>
<div class="col-sm-9 col-md-10 animated fadeInRight">
<sys:message content="${message}"/>
<!-- 搜索 -->
<div class="accordion-group">
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<form:form id="searchForm" class="form form-horizontal well clearfix" >
<input type="hidden" id="treeSearchId" name="treeSearchId" class="form-control m-b">
<input type="hidden" id="treeSearchParentId" name="treeSearchParentId" class="form-control m-b">
<div class="col-xs-12 col-sm-6 col-md-4">
<label class="label-item single-overflow pull-left" title="房號：">房號：</label>
<input id="houseName" name="house.name" class="form-control m-b"/>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<label class="label-item single-overflow pull-left" title="業主：">業主：</label>
<input id="ownerSearchStr" name="owner.searchStr" class="form-control m-b"/>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<label class="label-item single-overflow pull-left" title="型號：">表號：</label>
<input id="code" name="code" class="form-control m-b"/>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div style="margin-top:26px">
<a id="search" class="btn btn-primary btn-rounded btn-bordered btn-sm"><i class="fa fa-search"></i> 查詢</a>
<a id="reset" class="btn btn-primary btn-rounded btn-bordered btn-sm" ><i class="fa fa-refresh"></i> 重置</a>
</div>
</div>
</form:form>
</div>
</div>
</div>
<!-- 工具列 -->
<div id="toolbar">
<a class="accordion-toggle btn btn-default" data-toggle="collapse" data-parent="#accordion2" href="https://bbs.csdn.net/topics/#collapseTwo">
<i class="fa fa-search"></i> 檢索
</a>
<!-- 連網、卡混合 -->
<c:if test="${sellMode == '1' }">
<shiro:hasPermission name="elec:emElectricitySell:sell">
<button id="sell1" class="btn btn-primary" disabled onclick="sell('1')">
<i class="glyphicon glyphicon-jpy"></i> 售電(連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricitySell:sell">
<button id="sell2" class="btn btn-primary" onclick="sell('2')">
<i class="glyphicon glyphicon-jpy"></i> 售電(卡)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emAmmeter:open">
<button id="edit" class="btn btn-success" onclick="openAccount('1')">
<i class="glyphicon glyphicon-plus"></i> 開戶(連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emAmmeter:open">
<button id="edit" class="btn btn-success" onclick="openAccount('2')">
<i class="glyphicon glyphicon-plus"></i> 開戶(卡)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityClose:close">
<button id="close1" class="btn btn-danger" disabled onclick="closeAccount('1')">
<i class="glyphicon glyphicon-remove"></i> 銷戶(連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityClose:close">
<button id="close2" class="btn btn-danger" onclick="closeAccount('2')">
<i class="glyphicon glyphicon-remove"></i> 銷戶(卡)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emAmmeter:view">
<button id="getCardInfo" class="btn btn-info" onclick="getCardInfo()">
<i class="glyphicon glyphicon-credit-card"></i> 讀卡
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityCardRepair:repairCard">
<button id="repair" class="btn btn-info" disabled onclick="repairCard()">
<i class="glyphicon glyphicon-credit-card"></i> 補卡
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityAmmeterReplace:replaceAmmeter">
<button id="replace1" class="btn btn-warning" disabled onclick="replaceAmmeter('1')">
<i class="glyphicon glyphicon-modal-window"></i> 換表(連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityAmmeterReplace:replaceAmmeter">
<button id="replace2" class="btn btn-warning" onclick="replaceAmmeter('2')">
<i class="glyphicon glyphicon-modal-window"></i> 換表(卡)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricitySell:sell">
<button id="sell3" class="btn btn-primary" disabled onclick="sell('3')">
<i class="glyphicon glyphicon-jpy"></i> 售電(485連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityClose:close">
<button id="close3" class="btn btn-danger" disabled onclick="closeAccount('3')">
<i class="glyphicon glyphicon-remove"></i> 銷戶(485連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emAmmeter:view">
<button id="getAmmeterInfo" class="btn btn-info" onclick="getAmmeterInfo()">
<i class="glyphicon glyphicon-credit-card"></i> 讀表（485連網）
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityAmmeterReplace:replaceAmmeter">
<button id="replace3" class="btn btn-warning" disabled onclick="replaceAmmeter('3')">
<i class="glyphicon glyphicon-modal-window"></i> 換表(485連網)
</button>
</shiro:hasPermission>
</c:if>
<!-- 僅連網 -->
<c:if test="${sellMode == '2' }">
<shiro:hasPermission name="elec:emElectricitySell:sell">
<button id="sell1" class="btn btn-primary" disabled onclick="sell('1')">
<i class="glyphicon glyphicon-jpy"></i> 售電(連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emAmmeter:open">
<button id="edit" class="btn btn-success" onclick="openAccount('1')">
<i class="glyphicon glyphicon-plus"></i> 開戶(連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityClose:close">
<button id="close1" class="btn btn-danger" disabled onclick="closeAccount('1')">
<i class="glyphicon glyphicon-remove"></i> 銷戶(連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityAmmeterReplace:replaceAmmeter">
<button id="replace1" class="btn btn-warning" disabled onclick="replaceAmmeter('1')">
<i class="glyphicon glyphicon-modal-window"></i> 換表(連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricitySell:sell">
<button id="sell3" class="btn btn-primary" disabled onclick="sell('3')">
<i class="glyphicon glyphicon-jpy"></i> 售電(485連網)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emAmmeter:view">
<button id="getAmmeterInfo" class="btn btn-info" onclick="getAmmeterInfo()">
<i class="glyphicon glyphicon-credit-card"></i> 讀表（485連網）
</button>
</shiro:hasPermission>
</c:if>
<!-- 僅用卡 -->
<c:if test="${sellMode == '3' }">
<shiro:hasPermission name="elec:emElectricitySell:sell">
<button id="sell2" class="btn btn-primary" onclick="sell('2')">
<i class="glyphicon glyphicon-jpy"></i> 售電(卡)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emAmmeter:open">
<button id="edit" class="btn btn-success" onclick="openAccount('2')">
<i class="glyphicon glyphicon-plus"></i> 開戶(卡)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityClose:close">
<button id="close2" class="btn btn-danger" onclick="closeAccount('2')">
<i class="glyphicon glyphicon-remove"></i> 銷戶(卡)
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emAmmeter:view">
<button id="getCardInfo" class="btn btn-info" onclick="getCardInfo()">
<i class="glyphicon glyphicon-credit-card"></i> 讀卡
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityCardRepair:repairCard">
<button id="repair" class="btn btn-info" disabled onclick="repairCard()">
<i class="glyphicon glyphicon-credit-card"></i> 補卡
</button>
</shiro:hasPermission>
<shiro:hasPermission name="elec:emElectricityAmmeterReplace:replaceAmmeter">
<button id="replace2" class="btn btn-warning" onclick="replaceAmmeter('2')">
<i class="glyphicon glyphicon-modal-window"></i> 換表(卡)
</button>
</shiro:hasPermission>
</c:if>
</div>
uj5u.com熱心網友回復：
當年frontpage和dreamweaver那么火不是沒道理的。但是放到現在，需要依賴“所見即所得”來干活，只能說明前端不合格。在動手之前，應該對頁面有一個整體把握：布局是什么樣，怎么去把它畫出來，而不是一邊做一邊想；
寫頁面的時候，仍然可以在瀏覽器里運行，查看效果并使用除錯工具查看元素和樣式；
動態渲染的內容無法在開發階段顯示效果，必須運行以后才能開始看到實際樣貌。
uj5u.com熱心網友回復：
拖動控制元件的話有IDE可以完成大部分，但效果和布局和實際看到的不一定一樣。uj5u.com熱心網友回復：
會CSS和會使用模板就不麻煩uj5u.com熱心網友回復：
非常感謝。您的意思還是先 構思布局，而后再純手工 逐行寫代碼，當然手工寫的時候 IDE 會有大量的提示 ？
uj5u.com熱心網友回復：
非常感謝。您的意思 還是手工寫代碼，雖然IDE 會自動提供大量的提示，但是 這作業量還是很大， 再說 好象 ECLIPSE 在撰寫 JSP JS 這方面的功能好象很弱。
uj5u.com熱心網友回復：
有些專業界面要求很嚴格，很苛刻；有些還有專用的服務包，專用的定制規程。沒辦法，這種事就得按公司規定操作：要求手寫，就手工一個字母不錯的輸入；要求使用自動編程模塊，就嚴格按照指導操作。干活不能心浮氣躁，要遵從單位規則。轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/163849.html
標籤：JavaScript
下一篇：Umi專案按照官網創建不成功