bootstrap-table的formatter列参数

2019-09-13 09:03:27 阅读：458 来源： 互联网

标签：function false title bootstrap value table formatter id row

<%@ 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

标签：function,false,title,bootstrap,value,table,formatter,id,row
来源： https://blog.csdn.net/weixin_44018338/article/details/100043626

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

bootstrap-table的formatter列参数