bootstrap-table 应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="xx">
<meta name="description"
content="xxx"> <link rel="shortcut icon" href="__STATIC__/favicon.ico">
<link href="__STATIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="__STATIC__/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="__STATIC__/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="__STATIC__/css/animate.css" rel="stylesheet">
<link href="__STATIC__/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="col-sm-12"> <!-- Example Pagination -->
<div id="toolbar">
<div class="btn-group hidden-xs" id="exampleToolbar" role="group">
<a class="btn btn-outline btn-default" href="{:url('Host/getInfo')}">
<i class="fa fa-plus" aria-hidden="true">添加</i>
</a>
<button type="button" id="batchUp" name="up" class="btn btn-outline btn-default">
<i class="fa fa-level-up" aria-hidden="true">上线</i>
</button>
<button type="button" id="batchDown" name="down" class="btn btn-outline btn-default">
<i class="fa fa-level-down" aria-hidden="true">下线</i>
</button>
<button type="button" id="batchDelete" name="delete" class="btn btn-outline btn-default">
<i class="fa fa-remove" aria-hidden="true">删除</i>
</button>
</div>
</div> <table id="hostTable" class="table table-hover"></table>
</div>
<!-- End Example Pagination -->
</div>
</div>
</div>
</div>
<!-- End Panel Other -->
</div> <!-- 全局js -->
<script src="__STATIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__STATIC__/js/bootstrap.min.js?v=3.3.6"></script> <!-- 自定义js -->
<script src="__STATIC__/js/content.js?v=1.0.0"></script> <!-- Bootstrap table -->
<script src="__STATIC__/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="__STATIC__/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="__STATIC__/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> <script>
$(function () {
var table = $('#hostTable').bootstrapTable(
{
url: "{:url('Host/hostJson')}", //请求url
dataField: "rows", //服务器返回数据放的键值
search: true, //是否搜索
pagination: true, //是否分页
pageNumber: 1, //初始化加载第一页
pageSize: 10, //每页的记录行数
pageList: [10, 20, 50, 100], //可供选择的每页的行数
sidePagination: "server",//服务器端分页
dataType: "json", //返回数据类型
method: "post", //请求方式
searchAlign: "right", //查询框对其方式
searchText: "{$ser?? ''}",
sortName:"status", //定义默认排序列
sortOrder:"desc", //定义默认排序规则
queryParamsType: "limit",//查询参数组织方式
queryParams: function getParams(params) {
params.other = "otherInfo";
return params;
}, //传递参数
iconSize: 'outline',
showRefresh: true, // 刷新按钮
showColumns: true, //列选择按钮
buttonsAlign: "right", // 按钮对齐方式
toolbar: "#toolbar", //指定工具栏
toolbarAlign: "left", //工具栏对齐方式
striped: true, //是否显示间隔色
cache: false, //是否使用缓存，默认true rowStyle: function (row, index) {
//5个取值代表5种颜色
//['active','success','info','warning','danger']
var strClass = "";
if (row.status == 0) {
strClass = 'success';
} else {
strClass = 'danger';
}
return {classes: strClass};
}, columns: [
{
checkbox: true,
width: '5%'
},
{
field: 'ip',//键名
title: 'IP',//标题
sortable: true,//是否可排序
width: '10%',
formatter: function (value, row, index) {
if (row.screen) {
return '<a href="http://falcon.kaixin002.com/screen/' + row.screen + '" target="_blank">' + row.ip + '</a> ';
} else {
return row.ip;
}
}
},
{
field: 'nip',
title: 'NIP',
sortable: true,
width: '10%'
},
{
field: 'role',
title: '角色',
sortable: true,
width: '18%',
formatter: function (value, row, index) {
var roles = row.role.split(' ');
var roleHref = "";
for (var i = 0; i < roles.length; i++) {
roleHref += '<a href="{:url(\'Host/index\')}?ser=' + roles[i] + '">' + roles[i] + '</a> ';
}
return roleHref;
}
},
{
field: 'gameserver',
title: '游戏服',
sortable: true,
width: '8%'
},
{
field: 'serverid',
title: 'serverID',
sortable: true,
width: '8%'
},
{
field: 'status',
title: '状态',
sortable: true,
width: '8%',
formatter: function (value, row, index) {
var str = "线下";
if (row.status == 0) {
str = "线上";
}
return str;
}
},
{
field: 'remark',
title: '备注',
width: '20%'
},
{
field: 'ctime',
title: '申请日期',
sortable: true,
width: '8%'
},
{
title: '操作',
field: 'id',
align: 'center',
width: '5%',
formatter: function (value, row, index) {
var html = '<a href="{:url(\'Host/getInfo\')}?id=' + row.id + '">编辑</a>';
return html;
}
},
],
locale: "zh-CN",//中文支持
detailView: false,//是否显示详情折叠
}); $("#batchUp,#batchDown,#batchDelete").click(function () {
var name = $(this).prop('name');
var selections = table.bootstrapTable('getSelections');
if (selections.length <= 0) {
window.alert("请选择数据!");
return false;
}
if (name == 'delete') {
var st = confirm('确认删除?');
if (!st) {
return false;
}
}
var i = 0;
var ids = [];
$.each(selections, function () {
ids[i] = selections[i]['id'];
i++;
});
var postInfo = {
'ids': ids,
'deal': name
};
var postUrl = "{:url('Host/batchDeal')}";
var dealStr = {
'up': '上线',
'down': '下线',
'delete': '删除'
}; $.ajax({
type: "post",
url: postUrl,
data: {postInfo: postInfo},
success: function (data, status) {
if (data == 1) {
window.alert('所选主机 <' + dealStr[name] + '> 成功!');
} else {
window.alert(data);
return false;
}
window.location.href = "{:url('Host/index')}";
},
error: function () {
window.alert(name + "请求失败!");
return false;
}
});
});
}); </script>
</body>
</html>
后端处理代码：
$search = $this->request->post('search');
$searchWhere = null;
if (!empty($search)) {
$searchWhere = " WHERE CONCAT(`ip`,`nip`,`role`,`gameserver`,`serverid`,`status`) LIKE '%$search%' ";
}
$sort = $this->request->post('sort');
$sortWhere = null;
if (!empty($sort)) {
$order = $this->request->post('order');
$sortWhere = " ORDER BY `$sort` $order ";
}
$sql = "SELECT `id`,`ip`,`nip`,`role`,`gameserver`,`serverid`,`status`,`remark`,DATE_FORMAT(ctime,'%Y-%m-%d') as `ctime` FROM $table ";
$sqlCount = "SELECT COUNT(1) FROM $table ";
if (!empty($searchWhere)) {
$sql .= " $searchWhere ";
$sqlCount .= " $searchWhere ";
}
if (!empty($sortWhere)) {
$sql .= " $sortWhere ";
}
$offset = $this->request->post('offset/d');
$limit = $this->request->post('limit/d');
$sql .= " limit $offset,$limit ";
//使用原生查询，返回结果集
$jsonData = '';
$result = Db::query($sql);
foreach ($result as $i => $info) {
$screen = $this->getScreenInfo($info['ip']);
if ($screen) {
$result[$i]['screen'] = $screen[0];
}
}
$count = Db::query($sqlCount);
$count = $count[0]['COUNT(1)'];
if ($result !== false) {
//转化为json
$data['total'] = $count;
$data['rows'] = $result;
$jsonData = json_encode($data, JSON_UNESCAPED_UNICODE);
}
echo $jsonData;
bootstrap-table 应用的更多相关文章
- BootStrap table使用
bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...
- bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- 后台系统组件：一丶bootstrap table
http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...
- Bootstrap Table Examples
The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...
随机推荐
- mac下快速安装gearman和php扩展
1.brew install gearman 用brew安装gearman 2.pecl install gearman 用pecl安装php的gearman扩展 3.ln -s /usr/local ...
- List<Map> 进行求和
public class Main { public static void main(String[] args) { List<Map> lists = new ArrayList&l ...
- javascript中boolean类型和其他类型的转换
在javascript中,if语句括号中的表达式返回值可以是任何类型,即:if(a)中的a可以是boolean.number.string.object.function.undefined中的任何类 ...
- 原生Ajax函数
前言 在日常工作中,我经常使用Jquery的Ajax来获取接口数据.这几天有一个的官网要制作,由于网站比较小,有一些与服务器通信的接口处理,并没有涉及到复杂的交互功能.为了可以减少加载Jquery库的 ...
- UVA 12633 Super Rooks on Chessboard(FFT)
题意: 给你一个R*C的棋盘,棋盘上的棋子会攻击,一个棋子会覆盖它所在的行,它所在的列,和它所在的从左上到右下的对角线,那么问这个棋盘上没有被覆盖的棋盘格子数.数据范围R,C,N<=50000 ...
- idea的protobuf使用
1.安装插件 2.添加依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...
- Ansible基础概述
一.Ansible简介 Ansible基于Python语言实现,由paramiko和PyYAML两个关键模块构建.Ansible的编排引擎可以出色地完成配置管理,流程控制,资源部署等多方面工作.Ans ...
- debian修改时区
这里提供两种方法 一.使用dpkg-reconfigure修改 # dpkg-reconfigure tzdata Current default time zone: 'Asia/Shanghai' ...
- 单点登录(十六)-----遇到问题-----cas4.2.x登录成功后报错No principal was found---cas中文乱码问题完美解决
情况 我们之前已经完成了cas4.2.x登录使用mongodb验证方式并且自定义了加密. 单点登录(十五)-----实战-----cas4.2.x登录mongodb验证方式实现自定义加密 但是悲剧的是 ...
- kubernetes 1.9部署实践
目录 简要说明 环境说明 安装前的约定 配置etcd 生成相关证书 证书类型说明 cfssl配置 证书相关配置 生成ca证书 生成kubernetes证书 生成kubectl证书 生成kube-pro ...