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 ...
随机推荐
- dbgrid如何在最左边的列上显示行序号
procedure TForm1.Table1CalcFields(DataSet: TDataSet); begin table1.FieldValues['no']:=table1.RecNo; ...
- 使用 TClientDataSet(1)
本例效果图: 代码文件: unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, ...
- java与C++相比增加和缺少的特性--持续更新
缺少的特性 java值类型中没有无符号数 java没有运算符重载语法 java中没有struct和union等用户自定义值类型 java中没有虚函数的概念,所有函数默认具有虚函数的特性 java采用单 ...
- P1110 [ZJOI2007]报表统计
题目描述 Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工作,作为她的生日礼物之一. 经过仔细观察,小Q发现统计一张报表实际上是维护一个非负整数数列,并 ...
- IoT与区块链的机遇与挑战
区块链, 分布式账本技术的一种形式, 自从2014年或多或少地获得了大量的关注: 区块链和物联网, 区块链和安全, 区块链和金融, 区块链和物流, 凡是你能想到的,仿佛都可以应用区块链. 在本文中, ...
- iptables之NAT代理-内网访问外网
1.前言 本文使用NAT功能:内网服务器,想上网又不想被攻击. 工作原理:内网主机向公网发送数据包时,由于目的主机跟源主机不在同一网段,所以数据包暂时发往内网默认网关处理,而本网段的主机对此数据包不做 ...
- 20165218 《网络对抗技术》Exp2 后门原理与实践
Exp2 后门原理与实践 准备工作 1. 查看Linux和Win的IP地址,ping通 Linux地址 Win7地址 ping 2.下载ncat并装载到win7主机 3.下载socat并装载到win7 ...
- Android Log详解(Log.v,Log.d,Log.i,Log.w,Log.e)
1.Log.v 的调试颜色为黑色的,任何消息都会输出,这里的v代表verbose啰嗦的意思,平时使用就是Log.v("",""); 2.Log.d的输出颜色是蓝 ...
- navicat执行大容量的.sql文件时的设置
如果有主外键关联等,执行报错,则去掉中间的对勾保留第三个对勾试试.第三个对勾 是 手动提交(不自动提交,估计是全部导入到数据库中之后再一起提交,而不是导入一条sql语句就提交一次) 如果同时不勾选第2 ...
- 共享内存shm*（生产者和消费者）
//heads.h #ifndef HEAD_H #define HEAD_H #include <iostream> #include <sys/shm.h> //share ...