精通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支撑管理系统的前台界面都可以搞定了。