您的位置：首页 > Web前端 > BootStrap

bootstrap-table的formatter列参数

2018-03-06 15:31 399 查看 
<%@ 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;}},

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航