bootstrap后台界面前端实例

1、前端效果展示

2、<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
SmartAdmin WebApp - category_1 - SmartAdmin v4.0.2
</title>
<meta name="description" content="SmartAdmin WebApp">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" media="screen, print" href="../../../static/ui/css/vendors.bundle.css">
<link rel="stylesheet" media="screen, print" href="../../../static/ui/css/app.bundle.css">
<link rel="apple-touch-icon" sizes="180x180" href="../../../static/ui/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../../static/ui/img/favicon/favicon-32x32.png">
<link rel="mask-icon" href="../../../static/ui/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="stylesheet" media="screen, print" href="../../../static/myui/css/myStyle.css">
<style>
html,body{
height:1000px;
}
</style>
</head>

<div class="form-group">
<label class="form-label">来源：</label>
<select class="custom-select form-control">
<option selected="">全部</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="form-group">
<label class="form-label">提出单位：</label>
<select class="custom-select form-control">
<option selected="">全部</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="form-group">
<label class="form-label">所属系统：</label>
<select class="custom-select form-control">
<option selected="">全部</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>

<div class="form-group">
<label class="form-label">问题类型：</label>
<select class="custom-select form-control">
<option selected="">全部</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>

<div class="form-group">
<label class="form-label">问题状态：</label>
<select class="custom-select form-control">
<option selected="">全部</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>

</form>

</div>
</div>
</div>
</div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新增</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="name" class="control-label">名称:</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="price" class="control-label">价格:</label>
<textarea class="form-control" id="price"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="ok" type="button" class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>

<script src="../../../static/myui/js/utils/jquery.min.js?v=2.1.4"></script>
<script src="../../../static/myui/js/utils/bootstrap.min.js?v=3.3.6"></script>

<script src="../../../static/myui/js/utils/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../../static/myui/js/utils/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="../../../static/myui/js/utils/bootstrap-table/local/bootstrap-table-zh-CN.min.js"></script>

$(document).ready(function () {
//初始化表格,动态从服务器加载数据
$("#table_list").bootstrapTable({
//使用get请求到服务器获取数据
method: "GET",
//必须设置，不然request.getParameter获取不到请求参数
contentType: "application/x-www-form-urlencoded",
//获取数据的Servlet地址
url: "${ctx!}/problem/findProblemList",
//表格显示条纹
striped: true,
//启动分页
pagination: true,
//每页显示的记录数
pageSize: 10,
//当前第几页
pageNumber: 1,
//记录数可选列表
pageList: [5, 10, 15, 20, 25],
//是否启用查询
search: true,
//是否启用详细信息视图
detailView:true,
detailFormatter:detailFormatter,
//表示服务端请求
sidePagination: "server",
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType: "undefined",
queryParams: queryParams,
//json数据解析
responseHandler: function(res) {
return {
"rows": res.content,
"total": res.totalElements
};
},
//数据列
columns: [{
title: "ID",
field: "id",
sortable: true
},{
title: "单号",
field: "orderId"
},{
title: "来源",
field: "branchName"
},{
title: "标题",
field: "branchAddress"
},{
title: "提出单位",
field: "payeeName"
},{
title: "所属系统",
field: "payeeAccount"
},{
title: "问题模块",
field: "payeeAccount"
},{
title: "问题类型",
field: "payeeAccount"
},{
title: "问题状态",
field: "payeeAccount"
},{
title: "当前处理人",
field: "payeeAccount"
},{
title: "牵头部门",
field: "payeeAccount"
},{
title: "创建时间",
field: "createTime",
sortable: true
},{
title: "当前处理人",
field: "status",
formatter: function(value,row,index){
if (value == '0')
return '<span class="label label-primary">正常</span>';
return '<span class="label label-danger">禁用</span>';
}
},{
title: "更新时间",
field: "updateTime",
sortable: true
},{
title: "操作",
field: "empty",
formatter: function (value, row, index) {
var operateHtml = '<button class="btn btn-primary btn-xs" type="button" οnclick="edit(\''+row.id+'\')"><i class="fa fa-edit"></i> 修改</button>  ';
operateHtml = operateHtml + '<button class="btn btn-danger btn-xs" type="button" οnclick="del(\''+row.id+'\')"><i class="fa fa-remove"></i> 删除</button>  ';

return operateHtml;
}
}]
});
});

//查询的参数
function queryParams(params) {
var sta=$.trim($("#status").val());
var stat = "";
if(sta == "未发送" || sta == "未")
{
stat = 1;
}else if(sta == "已发送" || sta == "已"){
stat = 0;
}
/* alert("name:"+$("#name").val()+";"+"score:"+$("#score").val()+";"+"time_send:"+$("#time_send").val()+";"+"email:"+$("#email").val()+";"+"status:"+stat+";"+"phone:"+$("#phone").val()+";"); */
console.log("params--->>"+"进入查询参数的界面");
var param = {
searchScope: "name:"+$.trim($("#name").val())+";"
+"score:"+$.trim($("#score").val())+";"
+"time_send:"+$.trim($("#time_send").val())+";"
+"email:"+$.trim($("#email").val())+";"
+"status:"+$.trim(stat)+";"+"phone:"
+$.trim($("#phone").val())+";",
pageNumber: params.pageNumber,
pageSize: params.pageSize
};
return param;
}

// 搜索按钮触发事件
$(function() {
$("#searchBtn").click(function() {
$('#table_list').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
});
});

//清除全部的数据
$(function() {
$("#resetData").click(function() {
//$('#table_list').bootstrapTable(('refresh')); // 很重要的一步，刷新url！

});
});

//导出数据
$(function() {
$("#importData").click(function() {
//$('#table_list').bootstrapTable(('refresh')); // 很重要的一步，刷新url！

});
});

//新增按钮的事件
/* $("#btnAdd").click(function () {
console.log("-->>"+"进入新增弹窗调用");
$("#myModalLabel").text("新增");
$('#myModal').modal();
});*/

/* $("#btnAdd").on('click', function() {
console.log("-->>"+"进入新增弹窗调用");
$("#myModal").modal({
backdrop: 'static'
});
});*/

function detailFormatter(index, row) {
var html = [];
html.push('<p><b>描述:</b> ' + row.description + '</p>');
return html.join('');
}

</script>

</body>

</html>

bootstrap后台界面前端实例相关推荐

免费的响应式bootstrap管理员后台界面主题 - Charisma
日期:2013-3-31 来源:GBin1.com 在线演示 Charisma是一套全功能的,免费,会员质量的响应式HTML5管理员界面模板,基于"Bootstrap",拥有了9 ...
使用bootstrap搭建后台界面(一)列表展示
在这里展示如何使用bootstrap搭建后台界面,所有教程可以到百度上找到,这里是一些经验. 最后效果如图: 需要引入三个头文件: <link href="bootstrap/css/ ...
Bootstrap后台管理系统收集
Bootstrap后台管理系统收集 bootstrap 8 一.框架整理 1.灰黑色后台框架 2.论如何把后台管理系统写出花(关于后台开发的相关技术) 3.最新的技术-Vue后台管理 4.AdminL ...
【javaWeb微服务架构项目——乐优商城day03】——（搭建后台管理前端，Vuetify框架，使用域名访问本地项目，实现商品分类查询，cors解决跨域，品牌的查询）
乐优商城day03 0.学习目标 1.搭建后台管理前端 1.1.导入已有资源 1.2.安装依赖 1.3.运行一下看看 1.4.目录结构 1.5.调用关系 2.Vuetify框架 2.1.为什么要学习U ...
50个高端大气上档次的管理后台界面模板(转)
译自: 50 Incredible Admin Page Templates 译自: 50个高端大气上档次的管理后台界面模板请尊重版权,转载请注明来源,多谢-- 大部分网站都有一个管理面板或者管理界 ...
solr后台界面介绍——（十一）
1.加一个collection的方法复制solr-home下的collection1,修改名字为collection2.并且修改collection2文件夹中配置文件core.properties中 ...
python制作系统程序与html交互_python+html语音人物交互_flask后台与前端（html）交互的两种方法...
基于python flask框架搭建web flask后台与前端(html)交互的两种方法: 方法1 使用flask-wtf 提供的表单用常见的登录为例: // An highlighted blo ...
12个免费的 Twitter Bootstrap 后台模板
12个免费的 Twitter Bootstrap 后台模板在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找 ...
java ee项目案后台模板_后台界面也可以很酷！31个高大上的后台管理系统模版
和一些设计朋友聊天,他们做了几年网页设计,最喜欢的设计项目就是制作后台管理界面了,因为最具挑战最显成就感!当然,也最体现设计能力了,非常考验设计师对界面细节.统一性的把控. 几年以前,制作后台界面都没 ...

bootstrap后台界面前端实例

bootstrap后台界面前端实例相关推荐

最新文章

热门文章