bootstrap-table的formatter列参数

最新推荐文章于 2025-07-02 16:26:04 发布

原创最新推荐文章于 2025-07-02 16:26:04 发布 · 4.9w 阅读

22 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

35 篇文章

订阅专栏

6 篇文章

订阅专栏

myEclipse

5 篇文章

订阅专栏

本文介绍了一个产品管理界面的设计实现，包括使用Java和JSP技术构建的动态网页，通过bootstrapTable插件展示产品列表，并实现了查询、新增、编辑和删除等功能。文章详细展示了如何通过前端技术对后台数据进行格式化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="../../common/taglibs.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	response.setHeader("X-Frame-Options", "SAMEORIGIN");// 解决IFrame拒绝的问题
%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../../include/title.jsp"></jsp:include>
<style type="text/css">
element.style {
	height: 100%;
}

.form-horizontal .control-label {
	padding-top: 0;
}
</style>
</head>


<body class="nav-md">
	<div class="container body">
		<div class="main_container">
	
			<div class="right_col" role="main">
				<div class="nav-search" style="overflow: hidden;">
					<div class="gfrom" > 
                  		<span class="gf">产品名称 :
                  			<input size="16" type="text" value="" id="pName" name="pName" class="">
                  		</span>
            		</div>
            	 	<button type="button" style="height:30px;padding: 4px 12px;" id="btn_query" class="btn btn-primary">查询</button>
				</div>
				<div id="toolbar" class="btn-group">
						<button id="btn_add" type="button" class="btn btn-default"  onclick="add()">
							<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
						</button>
						<!-- <button id="btn_delete" type="button" class="btn btn-default"
							onclick="dels()">
							<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
						</button> -->
					</div>
				<table id="tb_departments"></table>
			</div>
		
		</div>
	</div>

	

	<jsp:include page="../../include/bottom.jsp"></jsp:include>
	<script type="text/javascript">
		$(function() {

			//1.初始化Table
			var oTable = new TableInit();
			oTable.Init();

		});

		var TableInit = function() {
			var oTableInit = new Object();
			//初始化Table
			oTableInit.Init = function() {
				$('#tb_departments')
						.bootstrapTable(
								{
									url : '${ctx}/productInfo/listJSON.action', //请求后台的URL（*）
									method : 'post', //请求方式（*）
									dataType : "json",
									contentType : "application/x-www-form-urlencoded; charset=UTF-8",
									toolbar : '#toolbar', //工具按钮用哪个容器
									striped : true, //是否显示行间隔色
									cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
									pagination : true, //是否显示分页（*）
									sortable : false, //是否启用排序
									sortOrder : "asc", //排序方式
									queryParams : oTableInit.queryParams,//传递参数（*）
									sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
									pageNumber : 1, //初始化加载第一页，默认第一页
									pageSize : 15, //每页的记录行数（*）
									pageList : [ 15, 25, 50], //可供选择的每页的行数（*）
									search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
									strictSearch : false,
									showColumns : false, //是否显示所有的列
									showRefresh : false, //是否显示刷新按钮
									minimumCountColumns : 2, //最少允许的列数
									clickToSelect : false, //是否启用点击选中行
									/* height : 480, *///行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
									uniqueId : "id", //每一行的唯一标识，一般为主键列
									showToggle : false, //是否显示详细视图和列表视图的切换按钮
									cardView : false, //是否显示详细视图
									detailView : false, //是否显示父子表
									columns : [
											/* 前面 勾选框
											{
												field : 'ids',
												checkbox : true
											}, */
											{
												field : 'pCode',
												title : '产品编号',
												align : 'center'
											},
											{
												field : 'pName',
												title : '产品名称',
												align : 'center'
											},
											{
												field : 'pType',
												title : '产品类型',
												align : 'center',
												formatter:function(value,row,index){ 
									            	var value="";
									            	if(row.pType=="1"){
									            		value = "自发货";
									            	}else if(row.pType=="0"){
									            		value = "FBA配送";
									            	}else{
									            		value = row.pType ;
									            	}
									            	
														return value;
													
									            }
											},
											{
												field : 'pStock',
												title : '最小库存值',
												align : 'center'
											},
											/* {
												field : 'pDescription',
												title : '产品描述',
												align : 'center'
											}, */
											{
												field : 'createDate',
												title : '创建时间',
												align : 'center'
											},
											{
												field : 'id',
												title : '操作',
												align : 'center',
												formatter : function(value,
														row, index) {
													var c = '<a class="green-color" href="#"  onclick="info(\''
														+ row.id
														+ '\')">查看</a> ';
													var e = '<a class="green-color" href="#"  onclick="input(\''
															+ row.id
															+ '\')">编辑</a> ';
													var d = '<a class="red-color" href="#"  onclick="del(\''
															+ row.id
															+ '\')">删除</a> ';
													return c + e + d ;
												}
											}, ]
								});

			};

			// 分页查询参数，是以键值对的形式设置的
			oTableInit.queryParams = function(params) {
				var list = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
					limit : params.limit, //每页显示多少条，默认10
					offset : params.offset, //页码 ，分页数据偏移量
					pName : $("#pName").val(), //角色查询名称
					search : params.search
				};
				return list;
			};

			return oTableInit;
		};

		function del(id) {

			layer.confirm('确定要删除?', {
				title : "提示",
			}, function() {
				$.ajax({
					type : "POST",
					url : '${ctx}/productInfo/delete.action?id=' + id,
					success : function(data) {
						layer.msg("删除产品成功!", {
							icon : 1
						});
						window.location.href = "${ctx}/productInfo/list.action";
					}
				});
			});
		};

		function dels() {
			var obj = getIdSelections();
			if (obj.length < 1) {
				layer.alert('请选择要删除的选项', {
					title : "提示",
					icon : 7
				});
				return;
			}

			layer.confirm('确定要删除?', {
				title : "提示"
			}, function() {
				$.ajax({
					type : "POST",
					url : '${ctx}/productInfo/deletes.action',
					data : "ids=" + obj,
					success : function(data) {
						layer.msg("删除会员成功!", {
							icon : 1
						});
						window.location.href = "${ctx}/productInfo/list.action";
					}
				});
			});
		}
		function getIdSelections() {
			return $.map($('#tb_departments').bootstrapTable('getSelections'),
					function(row) {
						return row.id;
					});
		}

		function add(id) {
			layer.open({
				title : '新增产品',
				type : 2,
				area : [ '420px', '500px' ],
				resize : false, //是否允许拉伸
				/*  弹出框页面 跳转地址 */
				content : '${ctx}/productInfo/input.action',

			});
		}

		
		function input(id) {
			if (typeof (id) == "undefined") {
				id = "";
			}
			layer.open({
				title : '产品编辑',
				type : 2,
				area : [ '420px', '500px' ],
				resize : false, //是否允许拉伸
				/*  弹出框页面 跳转地址 */
				content : '${ctx}/productInfo/input.action?id=' + id,

			});
		}

		//查看页面
		function info(id) {
			layer.open({
				type : 2,
				title : '查看详情',
				area : [ '360px', '460px' ],
				content : '${ctx}/productInfo/info.action?id=' + id,
			});
		}


		/*回车 触发  查询按钮 */
		$(function() {
			document.onkeydown = function(event) {
				var e = event || window.event
						|| arguments.callee.caller.arguments[0];
				if (e && e.keyCode == 13) {
					$("#btn_query").click();
				}
			};
		});

		//搜索按钮触发事件 
		$(function() {
			$("#btn_query").click(function() {
				$('#tb_departments').bootstrapTable('refreshOptions', {
					pageNumber : 1
				}); // 很重要的一步，刷新url！
			});

		});
	</script>
</body>
</html>

直接调 
formatter:function(value,row,index)

对后台传入数据 进行操作 对数据重新赋值 返回return到前台

{
												field : 'pType',
												title : '产品类型',
												align : 'center',
												formatter:function(value,row,index){ 
									            	var value="";
									            	if(row.pType=="1"){
									            		value = "自发货";
									            	}else if(row.pType=="0"){
									            		value = "FBA配送";
									            	}else{
									            		value = row.pType ;
									            	}
									            	
														return value;
													
									            }
											},