bootstrap-table的formatter列参数

<%@ 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" οnclick="add()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<!-- <button id="btn_delete" type="button" class="btn btn-default"
οnclick="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="#" οnclick="info(\''
+ row.id
+ '\')">查看</a> ';
var e = '<a class="green-color" href="#" οnclick="input(\''
+ row.id
+ '\')">编辑</a> ';
var d = '<a class="red-color" href="#" οnclick="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;
}
},


参考地址https://blog.csdn.net/u013943009/article/details/79459029

原文地址：https://blog.csdn.net/weixin_44018338/article/details/100043626

bootstrap-table的formatter列参数

相关推荐