利用原创框架封装后台管理组件

通过前几天编写的后台管理框架jsptagex我们已经能很快的开发web程序了，那么在实际开发后台管理系统中，为了提高开发效率，通常会封装一些常见的组件，以便更快的开发各类业务页面，这套后台管理基于bootstrap搭建，需要支持IE6,7版本的用户请绕道，那么我们来看一下JSPTagEx整合bootstrap前端在简化web开发方面的表现：

?

注：由于本人前端水平有限，有保留意见的人欢迎参与讨论

该项目的所有源代码被托管在：http://code.taobao.org/svn/jsptagex-web/

也欢迎您加入Q-Q群参与讨论：?431040030?

?

首先我们定义好数据集，这在下面的HTML代码片段中会用到：

?

• 表格：无需编写Java代码，无需编写js函数，只需要在页面中编写HTML代码：

<table id="grid-table" width="800" title="Web应用" dataset="sys.app" bizid="listBaseApp">
	<thead>
		<tr>
			<td field="app_id">应用ID</td>
			<td field="app_name" width="350">应用名</td>
			<td formatter="ff" width="350">操作</td>
		</tr>
	</thead>
</table>

?如果指定rowNum属性，那么表格内的数据就会自动分页了。

?在后台数据集中配置SQL语句，开发过程中无需重启tomcat，系统会自动侦测xml文件变化：

?

• 树

无需编写java代码，无需编写js代码，仅仅一行HTML代码：

<ul id="tree1" class="jsptag_tree" dataset="sys.app" bizid="treeMenu" pid-field="menu_pid" tree-async=true data-provider="?nav_id=main_menu"></ul>

效果如下：

??

?

• 下拉控件等

下拉框可以配套jsptagex标签库，也可以使用ajax读取，代码：

?

<!--利用标签读取动态数据-->
<sn:dataset name="menus">select menu_id,menu_name from base_nav_res_rel</sn:dataset>
<select name="state" class="select2" data-placeholder="Click to Choose...">
<option value="">&nbsp;</option>
<sn:repeat var="item" items="${menus }">
<option value="${item.menu_id }">${item.menu_name }</option>
</sn:repeat>
</select>
<!--利用后台定义的数据集也是可以的-->			
<select name="state2" dataset="sys.app" bizid="listBaseApp" valueField="app_id" labelField="app_name" class="select2" data-placeholder="Click to Choose..." value="2">
</select>

?

?

?

我们只是封装了很少一部分组件，通过这个思路，我们可以很容易的整合easyui等其他前端框架，并且在开发web程序的时候可以大大减少java代码量，并且可以增加web项目的可维护性。

?

?

?

利用原创框架封装后台管理组件

原文：http://cxlh.iteye.com/blog/2220961