BootStarp的表格实现，利用mvc框架+bootStarp+jsp

最新推荐文章于 2022-11-05 15:19:41 发布

原创最新推荐文章于 2022-11-05 15:19:41 发布 · 480 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在MVC框架下结合BootStrap和JSP实现表格界面。通过前端JSP代码、后端JS代码以及MVC框架的XML配置，展示了创建表格的简单过程。

首先我们来看下表格界面吧

这个其实挺简单的我们看代码吧（那些要引用的bootStarp的js我都是放在一个页面然后直接在当前页面调用就行了）

前端jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
      <%@ include file="/head/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/service/create.js"></script>
<title>服务创建窗口</title>
</head>
<body>
<!-- 默认添加的权限列名 -->
<input type="hidden" id="service" value="${pageContext.request.contextPath}/"/>
 <input type="hidden" id="usr_id" value="${user.usr_id}"/>
 
 <!-- 工具栏 -->
 <div id="toolbar" class="btn-group"> 
 <form class="form-inline" id="form" method="post">
  <!-- 客 户 名 称 : -->
    <label for="svr_name" style="margin-top:30px;margin-left:10px;font-family:elevation; size:15px"> 客 户 名 称 :</label>
    <input type="text" class="form-control" name="svr_cust_name" id="svr_name" placeholder="请输入名称" style="margin-top:25px;margin-left:10px; ">
    <!-- 概 要 -->
     <label for="svr_title" style="margin-top:30px;margin-left:15px;font-family:elevation; size:20px"> 概 要:</label>
    <input type="text" class="form-control" name="svr_title" id="svr_title" placeholder="请输入名称" style="margin-top:25px;margin-left:15px; ">
    <button type="button" class="btn btn-success" onclick='find_plan()' style="margin-top:25px; margin-left:20px;"><span class="glyphicon glyphicon-search" aria-hidden='true'></span>&nbsp;查询</button>
    <button type="button" class="btn btn-danger" onclick='add_satisfy()' style="margin-top:25px; margin-left:30px;"><span class="glyphicon glyphicon-plus" aria-hidden='true'></span>&nbsp;&nbsp;服务创建</button>
</form>
  </div>
<!-- 数据表格 -->
 <table id="tables" style="height:30px"></table>
 

<!-- /.modal -->
</body>
</html>

后端js代码：

$(function(){   //程序入口
	//数据表格加载
	$('#tables').bootstrapTable({
    //请求后台的url
	url : $("#service").val()+"customersAction.action?methodName=find_customers",
	//请求方式
	method: 'POST',
	contentType:'application/x-www-form-urlencoded; charset=UTF-8',
	//页面上头部的工具栏
	toolbar : '#toolbar',
	//传递参数  （模糊查）
	queryParams:queryParams,  
	 //客户端分页
	sidePagination: "client",  
	// 表格风格的白灰相间 术语：是否显示行间隔色
	striped: true,
	// 是否使用缓存，默认为true，无特殊需求为false，所以一般情况下需要设置一下这个属性（*）
	cache: false,
	pagination: true,  //是否分页
	// 默认展示第一页
	pageNumber:1,  
	// 默认的展示数值（*）
	pageSize:5,        
	pageList: [5,10, 25, 50, 100],
	columns: [
		{ checkbox: true},
		{ field:'cust_no',title:'客户编号',align: 'center',valign: 'middle'},
		{ field:'cust_name',title:'客户名称',align: 'center',valign: 'middle'},
		{ field:'cust_addr',title:'客户地址',align: 'center',valign: 'middle'},
		{ field:'cust_zip',title:'邮政编码',align: 'center',valign: 'middle'},
		{ field:'cust_tel',title:'电话',align: 'center',valign: 'middle'},
		{ field:'cust_fax',title:'传真',align: 'center',valign: 'middle'},
		{ field:'cust_website',title:'网址',align: 'center',valign: 'middle'},
	],
	
	});
})

mvc框架 xml:


	 <!-- 处理一些服务的方法 -->
	<action path="/satisfyAction" type="com.damei.crm.web.SatisfyAction">
	
	</action>

其实也不难对吧

BootStarp的表格 实现 ，利用mvc框架+bootStarp+jsp

BootStarp的表格实现，利用mvc框架+bootStarp+jsp