jQuery EasyUI 숙련

웹 관리 시스템에서 불가피하게 각종 인터페이스를 그려야 한다. jsp는 최근 몇 년 동안 발전이 별로 좋지 않은 것 같아서 현재는 다른 소스 오픈 무료 소프트웨어에 투자했다. 찾기와 각종 실험을 통해 jQuery EasyUI가 매우 기똥차서 여러분에게 홍보할 가치가 있다는 것을 발견했다.예를 들어 데이터grid는 서버 개발자가 데이터 목록을 보여주기 위해 사용한 적이 있다고 믿습니다. 만약에 jsp라면 다음과 같은 코드가 필요합니다.

		<div class="sortable">
			<div class="box span12">
				<div class="box-header well" >
					<h2>    </h2>
				</div>
				<div class="box-content">
					<table class="table table-bordered table-striped">
						<thead>
							<tr>
							
								<td>Item ID</td>
								<td>ProductId</td>
								<td>ListPrice</td>
								<td>UnitCost</td>
								<td>Atrr1</td>
								<td>status</td>
							</tr>
						</thead>
						<c:forEach items="${productList}" var="product">
							<tr>
								<td>${product.itemid }</td>								<td>${product.productid }</td>								<td>${product.listprice }</td>
<td>${product.unitcost }</td>								<td>${product.attr1 }</td>                                                                <td>${product.status}</td>
								
							</tr>
						</c:forEach>
					</table>
					${pageHtml }
				</div>
			</div>
		</div>

이 코드는 모두가 잘 알고 있다고 믿습니다. 그러면 jQuery EasyUI는 다음과 같은 코드만 있으면 됩니다.

    <table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
            data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'productid',width:100">ProductId</th>
                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:250">Attribute</th>
                <th data-options="field:'status',width:60,align:'center'">Status</th>
            </tr>
        </thead>
    </table>

많이 깔끔해졌죠?또한 jQuery EasyUI는 데이터grid 열 편집, 줄 편집 등 다양한 기능을 제공하는데 가장 중요한 것은 원본 코드(홈페이지:http://www.jeasyui.com/index.php), 자주 사용하는 jquery 문법을 간단하게 파악하면 대부분의 웹 지지 관리 시스템의 프론트 데스크톱 인터페이스를 해결할 수 있다.