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 ...
随机推荐
- CPU结合CS、IP寄存器进行执行程序
上一篇介绍了CS.IP两个寄存器内容,当我们运行一个可执行文件时,我们需要另外一个程序来将这个可执行文件加载到内存当中,关于这个加载可执行文件的程序,我们在这里不管他,点一下即可,一般是通过操作系统的 ...
- Linux上的free命令详解-收藏
解释一下Linux上free命令的输出. 下面是free的运行结果,一共有4行.为了方便说明,我加上了列号.这样可以把free的输出看成一个二维数组FO(Free Output).例如: FO[2][ ...
- Python动态规划求解最长递增子序列（LIS）
原始代码错误,移步博客查看O(N^2)及优化的O(N*logN)的实现:每天一道编程题--最长递增子序列
- C++模式学习------工厂模式
工厂模式属于创建型模式,大致可以分为简单工厂模式.抽象工厂模式. 简单工厂模式,它的主要特点是需要在工厂类中做判断,从而创造相应的产品. enum PTYPE { ProdA = , ProdB = ...
- TensorFlow入门之MNIST最佳实践
在上一篇<TensorFlow入门之MNIST样例代码分析>中,我们讲解了如果来用一个三层全连接网络实现手写数字识别.但是在实际运用中我们需要更有效率,更加灵活的代码.在TensorFlo ...
- 洛谷 P2431 正妹吃月饼 解题报告
P2431 正妹吃月饼 题目描述 今天是中秋节.\(uim\)带来了一堆大小不同且味道各异的月饼. 这些月饼的质量分别是\(1g\),\(2g\),\(4g\),\(8g\),\(16g\)....后 ...
- 洛谷 P3205 [HNOI2010]合唱队 解题报告
P3205 [HNOI2010]合唱队 题目描述 为了在即将到来的晚会上有更好的演出效果,作为AAA合唱队负责人的小A需要将合唱队的人根据他们的身高排出一个队形.假定合唱队一共N个人,第i个人的身高为 ...
- APT攻击基础科普
0x00 APT的历史起源背景 APT这个词汇最早起源于:2005年英国和美国的CERT组织发布了关于有针对性的社交工程电子邮件,放弃特洛伊木马以泄露敏感信息的第一个警告,尽管没有使用“APT”这个名 ...
- 闲:测试memcpy和std::copy vector之间拷贝
预测:底层C函数肯定比stl算法快 结果:少量数据底层快,大数据以上则stl对vector的处理可能更好 C/C++: #include <iostream> #include <v ...
- HDU 6040 stl
Hints of sd0061 Time Limit: 5000/2500 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others ...