分享源码-基于bootstrap和原创web框架的后台管理系统

空山雪林 2015-06-19 07:12:11

通过前几天编写的后台管理框架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=""> </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>