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 ...
随机推荐
- htop操作方法
为什么 Linux 的 htop 命令完胜 top 命令? 在 Linux 系统中,top 命令用来显示系统中正在运行的进程的实时状态,它显示了一些非常有用的信息,比如 CPU 利用情况.内存消耗情况 ...
- 网页正文提取,降噪的实现(readability/Document)
安装: pip install readability-lxml 使用: # encoding:utf-8import html2textimport requestsimport refrom re ...
- xml 类详解
- java 一般类属性设置常量 用以长久使用
java 一般类属性设置常量 用以长久使用 一直引用 例如 文件名
- Eclipse中设置新创建文件的默认编码格式
window-prefenences-web-jsp(或者是其他文件格式,里面是一个列表) 找到之后点击,在右侧区域中选择encoding进行修改即可,然后应用,OK
- BZOJ5020 THUWC2017在美妙的数学王国中畅游（LCT）
明摆着的LCT,问题在于如何维护答案.首先注意到给出的泰勒展开式,并且所给函数求导非常方便,肯定要用上这玩意.容易想到展开好多次达到精度要求后忽略余项.因为x∈[0,1]而精度又与|x-x0|有关,当 ...
- BZOJ3439 Kpm的MC密码（可持久化trie）
将串反过来就变成查询前缀了.考虑建一棵可持久化trie,查询时二分答案,均摊一下复杂度即为O(mlogn). #include<iostream> #include<cstdio&g ...
- 安装MySql出现Error Nr.1045的解决办法
如图,最后一步出现这个错误框 这是因为上次安装过MySql,其用户数据在卸载的时候没有被删除掉,解决办法如下: 显示隐藏的文件夹,打开C盘,找到下图文件删除之 删除之后再安装一遍MySQL,就可以了
- HEOI2015小L的白日梦
题面链接 洛咕 sol 为什么网上面只有神仙题解啊!!! 引起我这种蒟蒻不适QAQ. 性质证明留给巨佬 然后我只贴性质了QwQ. 1.一定存在最优解每一天不高兴的概率是单调不增的. 2.一定存在最优解 ...
- 【SDOI2015】序列统计 解题报告
2119: [BZOJ3992][SDOI2015]序列统计 Description 小\(C\)有一个集合\(S\),里面的元素都是小于\(M\)的非负整数. 他用程序编写了一个数列生成器,可以生成 ...