jQuery EasyUIに精通

web管理システムの中で、避けられないのは各種のインタフェースを描いて、jspのここ数年の発展はあまり力がないようで、そこで現在他のオープンソースの無料のソフトウェアに投げて、探して各種の実験を探して、jQuery EasyUIがとても力があることを発見して、みんなのために普及する価値があります.簡単な例を挙げると、datagridはサービス側の開発者が使用したと信じています.データリストを表示するために使用されています.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は、datagrid列編集、行編集など、他の多くの強力な機能を提供しています.最も重要なのは、ソースコードをオープンすることです(公式サイト:http://www.jeasyui.com/index.php)、よく使われるjquery文法をもう少し簡単にマスターすれば、ほとんどのwebサポート管理システムのフロントインタフェースができます.