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 ...
随机推荐
- DTCping 的简单使用与排错
1. 工具下载路径 https://support.microsoft.com/zh-cn/help/918331/how-to-troubleshoot-connectivity-issues-in ...
- Jquery 表单提交后3s禁用
<form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" ...
- c语言宏定义#define
1. 利用define来定义 数值宏常量 #define 宏定义是个演技非常高超的替身演员,但也会经常耍大牌的,所以我们用它要慎之又慎.它可以出现在代码的任何地方,从本行宏定义开始,以后的代码就就都认 ...
- 【刷题】BZOJ 3591 最长上升子序列
Description 给出1~n的一个排列的一个最长上升子序列,求原排列可能的种类数. Input 第一行一个整数n. 第二行一个整数k,表示最长上升子序列的长度. 第三行k个整数,表示这个最长上升 ...
- 【poj3133】 Manhattan Wiring
http://poj.org/problem?id=3133 (题目链接) 题意 $n*m$的网格里有空格和障碍,还有两个$2$和两个$3$.要求把这两个$2$和两个$3$各用一条折线连起来.障碍里不 ...
- 遇到问题----gradle-----myeclipse的gradle插件导入项目报错nsupported major.minor version 51.0
装好了gradle插件之后 想要导入gradle类型的项目,然后在 build model的过程中发现: 报错nsupported major.minor version 51.0 查了下发现是jdk ...
- Windows + Ubuntu下JDK与adb/android环境变量配置完整教程
假设JDK和android sdk路径分别如下: D:\Program Files\Java\jdkD:\android-sdk 1.JDK环境变量配置JAVA_HOME=D:\Program Fil ...
- Android Progurad 代码混淆
ref: ProGuard基础语法和打包配置.mdhttps://github.com/D-clock/Doc/blob/master/Android/Gradle/3_ProGuard%E5%9F% ...
- [SCOI2016] 背单词 （Trie树）
$pdf\space solution$ link #include<iostream> #include<algorithm> #include<cstrin ...
- 【AC自动机】AC自动机
Definition & Solution AC自动机是一种多模式串的字符串匹配数据结构,核心在于利用 fail 指针在失配时将节点跳转到当前节点代表字符串的最长后缀子串. 首先对 模式串 建 ...